1.下载插件
步骤一：
点击右下角齿轮图标->扩展->搜索框中搜索下面三个插件
1、Vetur
2、Prettier-Code form formatter
3、ESLint
步骤二：
找到vscode的菜单栏 文件->首选项->设置(或者直接ctrl+,)->点击右上角json设置添加内容
{
“vetur.format.defaultFormatter.html”: “js-beautify-html”,
“vetur.format.defaultFormatter.js”: “vscode-typescript”,
“javascript.format.insertSpaceBeforeFunctionParenthesis”: true,
“vetur.format.defaultFormatterOptions”: {
“prettier”: {
“semi”: false,
“singleQuote”: true
}
},
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
},
“workbench.iconTheme”: “vscode-icons”,
“files.autoSave”: “afterDelay”,
“liveServer.settings.CustomBrowser”: “chrome”,
“editor.formatOnSave”: true,
“html.format.indentInnerHtml”: true,
“html.format.indentHandlebars”: true,
“eslint.format.enable”: true,
“prettier.requirePragma”: true,
“prettier.singleQuote”: true,
“prettier.semi”: false,
}
如图：
步骤三：
找到项目中的.eslintrc.js文件在rules中加入一下代码 关闭空格以及换行的检测规则
‘no-tabs’: 0,
‘no-mixed-spaces-and-tabs’: 0,
‘indent’: [“off”, “tab”],
‘no-trailing-spaces’: 0,
到这一步重启vscode尝试是否可以如果还不可以执行第四步
步骤四:
在项目的根目录中创建文件.prettierrc.json文件并加入代码
{
“singleQuote”: true,
“semi”: false
}