分号，双引号问题
新建.prettierrc文件，添加
{
"semi": false,
"singleQuote": true
}
image.png
函数名空格问题
将Eslint语法禁用。编辑.eslintrc.js文件，在rules下添加
'space-before-function-paren': 0
image.png
配置后重启
{
"window.zoomLevel": 0,
"cssrem.rootFontSize": 75,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"editor.fontSize": 18,
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
// vscode默认启用了根据文件类型自动设置tabsize的选项
// "editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"jsx",
"vue",
{
"language": "vue",
"autoFix": true
},
],
// #让prettier使用eslint的代码格式进行校验
// "prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
//采用vscode默认的格式化，否则会出现问题
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
// {
// "liveServer.settings.host": "192.168.1.100", //设置本地服务的地址
// "workbench.colorTheme": "One Dark Pro",
// "files.autoSave":true,
// "editor.formatOnType": false,
// "editor.formatOnSave": false,
// "[javascript]": {
// "editor.defaultFormatter": "vscode.typescript-language-features"
// },
// "emmet.syntaxProfiles": {
// "vue-html": "html",
// "vue": "html"
// },
// "emmet.includeLanguages": {
// "javascript": "javascriptreact"
// },
// // #让函数(名)和后面的括号之间加个空格
// "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// //.vue文件template格式化支持，并使用js-beautify-html插件
// "window.zoomLevel": 0,
// "files.associations": {
// "*.wpy": "vue",
// "*.cjson": "jsonc",
// "*.wxss": "css",
// "*.wxs": "javascript"
// },
// "explorer.confirmDelete": false,
// "vetur.validation.template": false,
// "vetur.format.options.tabSize": 2,
// "vetur.format.defaultFormatter.html": "js-beautify-html",
// "vetur.format.defaultFormatterOptions": {
// "js-beautify-html": {
// "wrap_line_length": 1200,
// "wrap_attributes": "auto",
// "end_with_newline": true
// }
// },
// "[vue]": {
// "editor.defaultFormatter": "octref.vetur"
// },
// "editor.suggestSelection": "first",
// "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
// }
}
以上配置可能不生效，可添加以下配置setting.json
// "liveServer.settings.host": "192.168.1.10", //设置本地服务的地址
// "workbench.colorTheme": "One Dark Pro",
"files.autoSave": "afterDelay",
// "editor.formatOnType": false,
// "editor.formatOnSave": false,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
//.vue文件template格式化支持，并使用js-beautify-html插件
"window.zoomLevel": 0,
"files.associations": {
"*.wpy": "vue",
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"explorer.confirmDelete": false,
"vetur.validation.template": false,
"vetur.format.options.tabSize": 2,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 1200,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
在package.json里面，增加eslintConfig.
"eslintConfig": {
"rules": {
"linebreak-style": [
"off",
"windows"
],
"semi": [
"error",
"always"
],
"eqeqeq": [
"error",
"always"
],
"indent": "off",
"for-direction": "error",
"getter-return": "error",
"no-async-promise-executor": "error",
"no-cond-assign": "error",
"no-control-regex": "off",
"no-dupe-args": "error",
"no-dupe-keys": "error",
"no-duplicate-case": "error",
"no-empty": "error",
"no-console": "off",
"no-empty-character-class": "error",
"no-constant-condition": "off",
"no-ex-assign": "error",
"no-debugger": "off",
"no-func-assign": "error",
"no-inner-declarations": "error",
"no-prototype-builtins": "off",
"no-sparse-arrays": "error",
"no-unexpected-multiline": "off",
"no-unreachable": "off",
"require-atomic-updates": "error",
"use-isnan": "error",
"valid-typeof": "error",
"array-callback-return": "error",
"curly": "error",
"default-case": "error",
"no-iterator": "error",
"no-multi-str": "error",
"no-proto": "error",
"require-await": "error",
"brace-style": "error",
"constructor-super": "error",
"no-tabs": "error",
"no-alert": "off"
}
}
再在根目录下新建vue.config.js文件
module.exports = {
lintOnSave: 'error'
}
如果还是有问题，则选择以下截图的空格，手动设置一下空格数
image.png
原文链接
https://blog.csdn.net/suifengqianxing/article/details/78533810
https://www.cnblogs.com/jaelynl/p/10449714.html
https://www.npmjs.com/package/eslint-config-elemefe