方法1:关闭掉代码检查
找到.eslintrc.js文件
extends: [
'plugin:vue/essential',
'@vue/standard'//注释掉,就不会代码检查问题了
],
方法2:在vscode中的格式化代码配中加入自己代码的样式
先声明:这个方法也是网上找的,但不记得是谁写的了,抱歉了。
步骤有点繁琐,我就直接放截图了。
点击文件,找到首选项,点击设置。
点击第一个,进入settings.json文件。
复制下面代码
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false, // 重新设定tabsize
"editor.tabSize": 2, // #每次保存的时候自动格式化
"editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true, // 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
], // #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true, // #去掉代码结尾的分号
"prettier.semi": false, // #使用带引号替代双引号
"prettier.singleQuote": true, // #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" // #vue组件中html代码格式化样式
}
},
"window.zoomLevel": 0,
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[less]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"javascript.updateImportsOnFileMove.enabled": "always"
}
完成这些步骤,退出重新登录,就可以实现和vue3.0符合的代码格式化了。每次保存就会自动格式化代码。