|
一、问题描述
在开发项目的时候，往往我们会配置ESLint的代码规范。而我们在实际开发过程中，每次出现代码格式问题都去手动修改是非常麻烦的（比如双引号改成单引号；缩进问题；句尾分号、逗号等），而通过配置vscode在保存时去自动修改这些简单的代码规格是非常必要也非常方便的！
二、项目配置方案
2.1 安装eslint插件
2.2 修改用户配置
ctrl + shift + p => 首选项：打开工作区设置 在打开的配置文件中添加以下内容：
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
解释： eslint.autoFixOnSave：用来进行保存时自动格式化，但是默认只支持 javascript .js 文件； eslint.validate 用来配置作用的文件类型`
2.3 缺点
该种方式是针对项目级配置，每次新建项目都需要重新配置一下！ 配置成功后再项目目录下会产生 => .vscode / settings.json 文件 一个文件中有多处修改时，保存一次可能不会将全部修改全部自动化修改，这时我们手动多保存几次即可！！！
三、vscode全局配置方案
1. 文件 => 首选项 => 设置：搜索setting
2. 在打开的 vscode 配置文件settings.json中，添加以下ESLint相关配置
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// #去掉代码结尾的分号
"prettier.semi": false,
// #让函数(名)和后面的括号之间加个空格
// "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"files.autoSave": "afterDelay",
"javascript.referencesCodeLens.enabled": true,
"git.enabled": true,
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[less]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"tslint.jsEnable": true,
// "workbench.colorTheme": "Monokai Dimmed",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDragAndDrop": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"npm.enableScriptExplorer": true,
"editor.tabCompletion": "on",
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
"prettier.printWidth": 1000,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"tabWidth": 2,
"wrap_attributes": "auto",
"wrap-line-length": 1000,
},
"prettier": {
"semi": true,
"singleQuote": true
},
"prettyhtml": {
"printWidth": 1000,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
"vetur.format.options.useTabs": false,
"vetur.format.options.tabSize": 2,
"vetur.format.scriptInitialIndent": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 按照什么规范去格式化js, prettier/prettier-eslint 会在句末自动添加分号，但遇到then,catch等链式调用时会自动换行
// "vetur.format.defaultFormatter.js": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript", // none/prettier/prettier-eslint/vscode-typescript
"vetur.format.defaultFormatter.less": "prettier",
"css.lint.duplicateProperties": "warning",
"emmet.triggerExpansionOnTab": false,
"vetur.format.styleInitialIndent": true,
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.ts": "prettier",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.vue": "vue",
"*.nvue": "vue"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"vetur.validation.template": false,
"task.slowProviderWarning": [
"typescript"
],
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[scss]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"editor.rulers": [],
"terminal.integrated.automationProfile.windows": null,
"window.zoomLevel": 1,
"editor.renderWhitespace": "all",
"editor.autoIndent": "advanced",
"explorer.confirmDelete": false,
"html.format.wrapAttributes": "aligned-multiple",
"editor.semanticTokenColorCustomizations": {},
"http.proxyAuthorization": null,
"editor.detectIndentation": false,
"editor.tabSize": 2,
"[yaml]": {
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.autoIndent": "advanced"
},
"tabnine.experimentalAutoImports": true,
3. 优缺点
优点：可作用于任何项目，不要单独配置 缺点：配置较为笼统，多为常规配置，如果想要严格使用ESLint规范代码，最好还是在项目中集成 eslint 并配置 .eslintrc.js
四、其他使用技巧
1. 忽略部分ESLint校验
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
----------------------------------- 分割线 -------------------------------------
您可以使用特殊注释来禁用（忽略）某些警告。
使用 // eslint-disable-next-line 忽略下一行的ESLint校验
使用 /* eslint-disable */ 忽略文件中的所有ESLint校验。
2. 打开浏览器的错误提示蒙层
方法：在vue.config.js配置eslint-loader相关。
chainWebpack: config => {
// ESLint 强制校验，开启后如果ESLint校验不通过，则运行不起来。错误也将显示在浏览器页面上
config.module
.rule('eslint')
.include.add(path.resolve(__dirname, './src')).end()
.exclude.add(path.resolve(__dirname, './src/assets')).end()
.exclude.add(path.resolve(__dirname, './src/styles')).end()
.exclude.add(path.resolve(__dirname, './dist')).end()
.use('eslint')
.loader('eslint-loader')
.tap(options => options);
},
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！
|