使用Vue-cli构建的项目会启用Eslint检测代码规范,所以很容易因为代码不规范控制台总报错,所以为了解决这个问题,可以配置vscode在ctrl+s的时候自动代码格式化。
1.配置环境
npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue
2.安装插件:eslint 插件和 vetur 插件
3.修改setting.json文件,快捷键打开:ctrl+shift+p
setting.json内容如下:
{
"git.ignoreMissingGitWarning": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"window.zoomLevel": 1, //界面的放大等级
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
}
],
"eslint.options": {
"plugins": [
"html"
]
},
"editor.tabSize": 2,
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"git.confirmSync": false,
"git.autofetch": true,
"editor.formatOnType": false,
"git.enableSmartCommit": true,
"team.showWelcomeMessage": false,
"editor.fontSize": 16,
"files.autoSave": "onWindowChange",
"explorer.confirmDelete": false,
"terminal.integrated.rendererType": "dom",
"search.location": "panel",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"editor.autoIndent": false
}