Tip: This article shows the configuration of eslint in the vue project, which can be automatically repaired after saving in the vscode editor
Article directory
foreword
The effect achieved by this configuration: if there is a problem with the vue code format, it will be prompted according to the eslint rules of the plug-in, and the red wavy line will be prompted, and after ctrl+s is saved, the code will be repaired according to the rules of the wavy line (including automatic deletion of trailing commas, etc.) Vue project configuration eslint,
vscode The downloaded eslint plug-in has various conflicts with the npm downloaded eslint plug-in, which leads to problems such as a lot of red wavy lines after the vscode editor is formatted. Below I list my related configuration for reference.
1. vscode configuration
vscode安装的插件
vscode的settings.json的相关配置项
1. Open the configuration file method: File->Preferences->Settings->Enter settings in the input box
2. The following is the configuration of 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
}
}
2. Configuration related to eslint in package.json of vue project
{
"@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
}
}
}
至于每个插件的作用，大家善用各种搜索工具,以下是一个简单的插件简介：
Summarize
This problem solving refers to many articles on the Internet and chatgpt, a powerful tool, finally achieved the desired effect of the article. If you have any questions, please comment or contact me.