html 標簽自動補全
File -> Preference -> Setting ->搜索setting.json -> Edit in settings.json
settings.json
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*.vue":"html"}
編輯后自動保存
方法1：File -> Preference -> Setting ->搜索setting.json -> Edit in settings.json
settings.json
Setting.json
"files.autoSave": "xxx"
方法2：File -> Preference -> 搜索框輸入：files.autoSave
之后能看到 files.autoSave 的可選項有
off : 關閉自動保存（默認）
afterDelay: 延遲xx時間后保存，可在 "files.autoSaveDelay" 中配置延遲時間；
onFocusChange: 編輯器失去焦點時自動保存；
onWindowChange: 窗口失去焦點時(編輯器窗口的切換，桌面窗口的切換)自動保存；
ESLint sLint 保存時自動自動格式化
安裝 ESLint https://cn.eslint.org/
$ npm install eslint --save-dev
vscode 中安裝 ESLint 插件
image.png
然后配置 vscode 的 setting.json
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
]
新建.vue文件時自動創(chuàng)建vue模板
File -> Preference -> User Snippers
vue.json文件，然后添加下面模板
{
"Create vue template": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"container\">\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" name: 'c',",
" data () {",
" return {\n",
" }",
" },",
" props: {},",
" components: {},",
" watch: {},",
" computed: {},",
" methods: {},",
" created () {},",
" mounted () {}",
"}",
"</script>\n",
"<style scoped lang=\"stylus\">\n",
"</style>",
"$2"
],
"description": "Create vue template"
}
}
然后新建.vue文件 ，寫下vue然后Tap鍵就能生成什么的模板。
如果沒有生成模板只是多了個空格或者生成的是vue標簽的話，我們還得設置一下，打開settings.json，添加下面的設置
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.triggerExpansionOnTab": true
如果你的Setting.json文件有"files.associations" 設置的話，請刪除，因為他會和上面 emmet.syntaxProfiles沖突。
files.associations 和 emmet.syntaxProfiles 都是設置html 標簽的補全，如果是要用.vue模板補全功能的話，html標簽補全我們就用emmet.syntaxProfiles來設置。
我的設置
vue 的開發(fā)中 vscode 可裝用于開發(fā)規(guī)范的插件有
Prettier ：規(guī)范js
ESLint: 規(guī)范js
Vuter: 規(guī)范 .vue 文件中 template
stylus: 規(guī)范 stylus
注意：以下配置是基于接下來介紹的插件設置的，如果沒有安裝插件是不會生效的。
{
// 換行
"editor.wordWrap": "on",
// 代碼縮進修改成2個空格
"editor.tabSize": 2,
// 不檢查縮進，保存后統(tǒng)一按設置項來設置
"editor.detectIndentation": false,
//保存的時候自動格式化
"editor.formatOnSave": true,
// 字體大小
"editor.fontSize": 16,
// 設置行高
"editor.lineHeight": 24,
// 主題
"workbench.colorTheme": "Visual Studio Light",
// 左側工具欄是否可見
"workbench.activityBar.visible": true,
// 控制何時自動保存已更新文件。
// 接受值有: "off"、"afterDelay"、"onFocusChange" (編輯器失去焦點)、"onWindowChange" (窗口失去焦點)。如果設置為 "afterDelay"，可在 "files.autoSaveDelay" 中配置延遲時間。
"files.autoSave": "onWindowChange",
// "files.autoSaveDelay": 3000,
// 讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
// 去掉代碼結尾的分號
"prettier.semi": true,
// 使用帶引號替代雙引號
"prettier.singleQuote": true,
// 啟用后，按下 TAB 鍵，將展開 Emmet 縮寫。
"emmet.triggerExpansionOnTab": true,
// js設置單引號
"javascript.preferences.quoteStyle": "single",
// 讓函數(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// html格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 使用eslint 風格使用standard 進行代碼規(guī)則限制
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
//自動保存信息
// By default, create file username
"fileheader.Author": "you name",
// By default, update file username.
"fileheader.LastModifiedBy": "you name",
// By default, common template. Do not modify it!!!!!
"fileheader.tpl": "/*\r\n * @Author: {author}\n * @Date: {createTime}\n * @Last Modified by: {lastModifiedBy}\n * @Last Modified time: {updateTime}\n */\n",
// vue組件中html代碼格式化樣式
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
}
}
或者：
{
"vsicons.projectDetection.autoReload": true,
"git.autofetch": true,
"window.zoomLevel": 0,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"fileheader.Author": "L",
"fileheader.tpl": "/*\r\n * @Author: {author} \r\n * @Date: {createTime} \r\n * @Last Modified by: {lastModifiedBy} \r\n * @Last Modified time: {updateTime} \r\n */\r\n",
"fileheader.LastModifiedBy": "L",
"editor.tabSize": 2,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性強制折行對齊
"wrap_attributes": "force-aligned",
}
},
"prettier.singleQuote": true,
"prettier.semi": false,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"beautify.tabSize": 2,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"[html]": {},
"files.associations": {
"*.html": "html"
},
"stylusSupremacy.insertColons": false, // 是否插入冒號
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false // 兩個選擇器中是否換行
}
其中：
- fileheader插件的配置，可以在頭部生成信息
"fileheader.Author": "L"
- eslint 格式化js時默認設置是結束語句帶分號，引號為雙引號，但是我們的規(guī)范是不加分號、單引號，所以要手動修改配置
"prettier.singleQuote": true,
"prettier.semi": false,
- vetur 格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性強制折行對齊
"wrap_attributes": "force-aligned",
}
},
//空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
4.如果使用了stylus，那么vscode安裝stylus插件，進行設置，不適用冒號雙引號大括號
"stylusSupremacy.insertColons": false, // 是否插入冒號
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false // 兩個選擇器中是否換行
#附
根目錄下創(chuàng)建eslint規(guī)則文件 .eslintrc.js
（下面browsers 多了s 正確的為browser）
.eslintrc.js
