一、vscode必装插件
1、eslint ：代码校验
2、stylelint：样式代码校验
3、GitLens：代码编辑历史人员信息
4、Git History：当前版本与上一版本代码比对
5、Vetur：vue项目插件，提供语法高亮、校验等能力
6、vscode-fileheader：页面头部注释快捷方式
7、Auto Rename Tag：标签同步更改
8、Auto Close Tag：自动闭合标签
二、vscode配置文件
建议将下列配置项设置为user配置，全局生效，避免每个项目都进行配置。
ps：
1、字体大小可以自行调整，不做强制要求
2、fileheader的配置需要改为自己的信息，不可直接复制使用
{
"editor.fontSize": 16,
"eslint.autoFixOnSave": true,
"vetur.validation.template": false,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"indent_size": 4,
"wrap_attributes": "force-aligned"
},
"prettier": {
"tabWidth": 4,
"printWidth": 120,
"singleQuote": true,
"eslintIntegration": true,
"stylelintIntegration": true
}
},
"prettier.tabWidth": 4,
"prettier.singleQuote": true,
"prettier.semi": true,
"prettier.printWidth": 120,
"files.associations": {
"*.vue": "vue"
},
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"css.validate": true,
"less.validate": true,
"scss.validate": true,
"fileheader.LastModifiedBy": "tangliang",
"fileheader.tpl": "/*\\r\\n * @Author: {author}\\r\\n * @Email: [email protected]\\r\\n * @Date: {createTime}\\r\\n * @Last Modified by: {lastModifiedBy}\\r\\n * @Last Modified time: {updateTime}\\r\\n * @Description: Description\\r\\n * @Route: Route\\r\\n */\\r\\n",
"fileheader.Author": "tangliang",
"prettier.stylelintIntegration": true,
"prettier.eslintIntegration": true,
"files.insertFinalNewline": true
}
三、配置方式：
1、利用command + 逗号快捷键打开配置页面，如下图：
2、选择User栏目，点击右上角的大括号，进入settings.json文件，将上面的配置项粘贴进去即可。