新版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博客