新版vs code + Vue高亮、语法自动补全插件
vs code 版本或及以上
安装以下三个插件插件
-
Vetur
Vue语法支持。包括语法高亮、语法代码提示、语法lint检测 -
ESLint
语法纠错 -
Prettier
2.左下角设置
3.进行配置
配置内容:
{
"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"
]
}
新版vs code + Vue高亮、语法自动补全插件_vscode 写 vue 代码自动补全插件-CSDN博客