vs code 版本或及以上
1.安装以下三个插件插件
Vetur
Vue语法支持。包括语法高亮、语法代码提示、语法lint检测ESLint
语法纠错Prettier
2.左下角设置
3.进行配置
旧版配置:
{
"editor.fontSize": 20,
"window.zoomLevel": 1,
"workbench.iconTheme": "ayu",
"files.autoSaveDelay": 500,
"files.autoGuessEncoding": true,
"files.autoSave": "afterDelay", //自动保存
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 2, //制表符符号eslint
"editor.formatOnSave": true, //保存时自动格式化
"eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
"prettier.semi": false, //去掉代码结尾的分号
"prettier.singleQuote": true, //使用带引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
"eslint.validate": [
//开启对.vue文件中错误的检查
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"emmet.triggerExpansionOnTab": true,
"files.associations": { //要进行html补全的文件
"*.js": "html",
"*.vue": "html"
}
}
新版配置不同点:
//保存时自动将代码按ESLint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"eslint.validate": [
//开启对.vue文件中错误的检查,autoFix默认开启,只需输入字符串数组即可
"javascript","html", "vue"
]
4. 新版完整配置
{
"editor.fontSize": 20,
"window.zoomLevel": 1,
"workbench.iconTheme": "ayu",
"files.autoSaveDelay": 500,
"files.autoSave": "afterDelay",
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 2, //制表符符号eslint
"editor.formatOnSave": true, //保存时自动格式化
//保存时自动将代码按ESLint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
"prettier.semi": false, //去掉代码结尾的分号
"prettier.singleQuote": true, //使用带引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
"eslint.validate": [
//开启对.vue文件中错误的检查,autoFix默认开启,只需输入字符串数组即可
"javascript","html", "vue"
]
}
其他好用插件
Chinese
——中文Live Server
——浏览器自动刷新- 设置刷新方式和时间
open in browser
——直接右键项目单击启动Beautify
——格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则- 5.
VueHelper
——包括了vue2所有api,还含有vue-router2和vuex2的代码提示