設置配置
{
// 配置終端有在運行時關閉軟件提醒
"terminal.integrated.confirmOnExit": true,
"editor.fontSize": 19, //字體
"editor.tabSize": 2, // 間隔
// 新建爲html
"files.defaultLanguage": "html",
// 配置 vetur
"vetur.format.defaultFormatterOptions": {
//html標籤禁止換行
"end_with_newline": true,
"prettier": {
"semi": false, //不加分號
"singleQuote": true //用單引號
}
},
// #讓函數(名)和後面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 保存自動ESLint格式化
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 右側預覽關閉
"editor.minimap.enabled": false,
// 圖標美化
"workbench.iconTheme": "material-icon-theme",
"editor.quickSuggestions": {
"strings": true
},
// 選項卡顏色主題
"workbench.colorCustomizations": {
"tab.activeBorder": "#5996ff"
},
// 禁用html標籤自動閉合
"html.autoClosingTags": false,
// 定義格式方式： 3種： Prettier插件、 vetur插件、 vscode默認
"[vue]": {
// 配置爲vetur插件
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
// 配置爲vscode默認
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json]": {
// 配置爲Prettier插件
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
// 配置爲vscode默認
"editor.defaultFormatter": "vscode.html-language-features"
},
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"git.ignoreMissingGitWarning": true,
"explorer.confirmDelete": false,
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
// 配置 @ 路徑
"path-autocomplete.pathMappings": {
"@": "${folder}/src/",
"@views": "${folder}/src/views/",
}
}
解決終端 無法加載文件.......，因爲在此係統上禁止運行腳本
1. 以管理員身份運行vscode
2. 執行：get-ExecutionPolicy，顯示Restricted，表示狀態是禁止的
3. 執行：set-ExecutionPolicy RemoteSigned
4. 這時再執行get-ExecutionPolicy，就顯示RemoteSigned
插件集合
Auto Rename Tag 修改 html 標籤，自動幫你完成頭部和尾部閉合標籤的同步修改
Bootstrap 3 Snippets Bootstrap3 代碼提示
Chinese (Simplified) Language Pack for Visual Studio Code 中文包
CSS Peek css預覽
ESLint 格式代碼規範，高亮提示
Image preview 圖片預覽
JavaScript (ES6) code snippets es6 代碼提示
jQuery Code Snippets jq代碼提示
Live Server 啓動本地服務器
Material Icon Theme 文件圖標主題
open in browser 支持快捷鍵與鼠標右鍵快速在瀏覽器中打開html文件
Path Autocomplete 路徑補全
Prettier - Code formatter 代碼格式
px2rem px轉rem
Syncing 同步設置插件
vscode-pdf 查看pdf文件
Markdown Preview Enhanced .md 預覽插件
Vetur vue必備插件，高亮，格式
vscode-element-helper ElementUi 代碼提示
Vue 2 Snippets vue 代碼補全
Vant Snippets 小程序 Vant UI 代碼提示
minapp 微信小程序標籤、屬性的智能補全（同時支持原生小程序、mpvue 和 wepy 框架，並提供 snippets）
wechat-snippet 微信小程序代碼輔助,代碼片段自動完成
wxapp-helper 小程序代碼提示
VScode 查看 .md 文件
一、原生快捷鍵
shift + ctrl + v
二、使用插件 Markdown Preview Enhanced
1.VSCode 安裝 插件 官網鏈接
2. 在 .md 的文件中右鍵 選擇它 就打開拉
三、安裝客戶端 官方下載
Vscode中快速創建自定義代碼模板
1.在Vscode中找到設置 -> 用戶代碼片段，新建全局
2.輸入名字
3.接下里就是編寫我們的模板了，我們的模板需要的大致有以下幾項：
基本的HTML架構，引入Vue包的script路徑。，一些基本的Vue代碼結構。
模板我已經備好了，模板如下：
{
"html5-Vue": {
/*
請將vue html的代碼片段放在此處。每個代碼段都在代碼段名稱下定義，並具有前綴、正文和
"名字"：{}
prefix 定義輸入的內容，在html中輸入這個值獲取到這個代碼塊
body 代碼塊主體
每一行模板代碼都要用雙引號""來包括。
如果雙引號包括的代碼中間也出現了雙引號，那麼需要用轉義字符\轉義。
\n意味着換行，\t是製表符，這兩個用於生成時模板的縮進，讓生成出來的模板便於閱讀。
模板中出現的$1代表着光標，它的位置即光標的默認位置，可以有多個光標：$2,$3,$4等。
description 提示
*/
"prefix": "vue-html",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">\n",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
"\t<script src=\"https://unpkg.com/vue-router/dist/vue-router.js\"></script>",
"\t<script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>",
"</head>\n",
"<body>",
"\t<div id=\"app\">$1</div>\n",
"\t<script>",
"\t\tlet vm = new Vue({",
"\t\t\tel: '#app',",
"\t\t\tdata: {},",
"\t\t\tmethods: {}",
"\t\t});",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "快速創建在html5編寫的vue模板",
}
}
4.保存
5.在html輸入 vue-html 就直接有代碼塊了