vscode中eslint配置保存自动修复代码示例详解
作者：佛系内卷
vscode根据eslint保存⾃动修复配置,下面这篇文章主要给大家介绍了关于vscode中eslint配置保存自动修复代码的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
提示：本文展示了vue项目中配置eslint，在vscode编辑器中保存后可以自动修复
前言
本次配置达到的效果：vue代码格式有问题会根据插件的eslint规则红色波浪线提示、ctrl+s保存后根据波浪线的规则进行代码修复（包括自动删除尾部逗号等）
vue项目配置eslint，vscode下载的eslint插件，与npm下载eslint插件有各种冲突，导致如vscode编辑器格式化以后会有一大堆红色波浪线等问题，下面我列出我的相关配置，可以供参考。
一、vscode配置
vscode安装的插件
vscode的settings.json的相关配置项
1.打开配置文件方法：文件->首选项->设置->输入框输入settings
2.下面是settings.json的配置
以下列出我完整的配置，主要是搜索关键词eslint、editor，若是嫌麻烦，可以备份自己的配置后，直接把这个配置替换
{
"beautify.language": {
"js": {
"type": [
"javascript",
"json",
"jsonc"
],
"filename": [
".jshintrc",
".jsbeautifyrc"
]
},
"css": [
"css",
"less",
"scss"
],
"html": [
"htm",
"html",
"vue"
]
},
"workbench.colorTheme": "Dracula At Night",
"workbench.iconTheme": "vscode-icons",
"vsicons.dontShowNewVersionMessage": true,
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
"[javascript]": {
"editor.defaultFormatter": "octref.vetur",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
"workbench.iconTheme": "material-icon-theme",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
//配置eslint
"eslint.enable": true, // 启用保存时自动修复,默认只支持.js文件
"eslint.validate": [
"javascript",
// 用eslint的规则检测js文件
{
"language": "vue", // 检测vue文件
"autoFix": true // 为vue文件开启保存自动修复的功能
},
{
"language": "html",
"autoFix": true
},
],
"cSpell.enabledLanguageIds": [
"asciidoc",
"c",
"cpp",
"csharp",
"css",
"git-commit",
"go",
"graphql",
"handlebars",
"haskell",
"html",
"jade",
"java",
"javascript",
"javascriptreact",
"json",
"jsonc",
"jupyter",
"latex",
"less",
"markdown",
"php",
"plaintext",
"python",
"pug",
"restructuredtext",
"rust",
"scala",
"scss",
"text",
"typescript",
"typescriptreact",
"yaml",
"yml",
"vue"
],
"diffEditor.ignoreTrimWhitespace": false,
"alias-skip.mappings": {
"~@/": "/src",
"views": "/src/views",
"assets": "/src/assets",
"network": "/src/network",
"common": "/src/common"
},
"tabnine.experimentalAutoImports": true,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"bracketPairColorizer.depreciation-notice": false,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"cSpell.customDictionaries": {
"custom-dictionary-user": {
"name": "custom-dictionary-user",
"path": "~/.cspell/custom-dictionary-user.txt",
"addWords": true,
"scope": "user"
}
},
"editor.foldingStrategy": "indentation",
"git.mergeEditor": false,
"[css]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"remote.SSH.remotePlatform": {
"192.168.10.31": "linux"
},
"cSpell.languageSettings": [],
"vetur.ignoreProjectWarning": true,
"settingsSync.keybindingsPerPlatform": false,
"eslint.migration.2_x": "off",
"eslint.autoFixOnSave": true,
"eslint.codeActionsOnSave.rules": null,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
},
"editor.fontLigatures": null,
"pathAlias.aliasMap": {
"@": "${cwd}/src"
},
// 保存时格式化
"editor.formatOnSave": true,//保存时格式化
// 让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
//vue的模板文件中的 html 使用自带的 js-beautify-html 进行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatterOptions": {
// 让html的attributes不换行，看起来会更美观
"js-beautify-html":{
"wrap_line_length": 240,
"wrap_attributes": "auto",
"end_with_newline": false
},
"prettier": {
//设置分号
"semi": true,
//双引号变成单引号
"singleQuote": true,
//禁止随时添加逗号,这个很重要。找了好久
"trailingComma": "none"
}
},
"[javascript]": {
"editor.formatOnSave": true
},
"[html]": {
"editor.formatOnSave": false
}
}二、vue项目package.json中与eslint相关的配置
{
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {},
"globals": {
"utils": true
}
}
}
至于每个插件的作用，大家善用各种搜索工具,以下是一个简单的插件简介：
总结
本次问题解决参考了网上的多篇文章以及chatgpt这款强大的工具最终达到了文章自己想要的效果，如有问题可评论或与我进行联系。