快捷導(dǎo)航

vscode中eslint配置保存自動(dòng)修復(fù)代碼示例詳解

更新時(shí)間：2023年12月04日 10:27:39 作者：佛系內(nèi)卷

vscode根據(jù)eslint保存?動(dòng)修復(fù)配置,下面這篇文章主要給大家介紹了關(guān)于vscode中eslint配置保存自動(dòng)修復(fù)代碼的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

前言

本次配置達(dá)到的效果：vue代碼格式有問題會(huì)根據(jù)插件的eslint規(guī)則紅色波浪線提示、ctrl+s保存后根據(jù)波浪線的規(guī)則進(jìn)行代碼修復(fù)（包括自動(dòng)刪除尾部逗號(hào)等）

vue項(xiàng)目配置eslint，vscode下載的eslint插件，與npm下載eslint插件有各種沖突，導(dǎo)致如vscode編輯器格式化以后會(huì)有一大堆紅色波浪線等問題，下面我列出我的相關(guān)配置，可以供參考。

一、vscode配置

vscode安裝的插件

vscode的settings.json的相關(guān)配置項(xiàng)

1.打開配置文件方法：文件->首選項(xiàng)->設(shè)置->輸入框輸入settings

2.下面是settings.json的配置

以下列出我完整的配置，主要是搜索關(guān)鍵詞eslint、editor，若是嫌麻煩，可以備份自己的配置后，直接把這個(gè)配置替換

{
  "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, //  啟用保存時(shí)自動(dòng)修復(fù),默認(rèn)只支持.js文件
  "eslint.validate": [
      "javascript",
      //  用eslint的規(guī)則檢測(cè)js文件
      {
          "language": "vue", // 檢測(cè)vue文件
          "autoFix": true //  為vue文件開啟保存自動(dòng)修復(fù)的功能
      },
      {
          "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"
  },
  // 保存時(shí)格式化
  "editor.formatOnSave": true,//保存時(shí)格式化  
  // 讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  //vue的模板文件中的 html 使用自帶的 js-beautify-html 進(jìn)行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html", 
  // 讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatterOptions": {
    // 讓html的attributes不換行，看起來(lái)會(huì)更美觀
    "js-beautify-html":{
      "wrap_line_length": 240,
      "wrap_attributes": "auto",
      "end_with_newline": false
    },  
    "prettier": {
      //設(shè)置分號(hào)
      "semi": true,
      //雙引號(hào)變成單引號(hào)
      "singleQuote": true,
      //禁止隨時(shí)添加逗號(hào),這個(gè)很重要。找了好久
      "trailingComma": "none"
    }
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.formatOnSave": false
  }  
}

二、vue項(xiàng)目package.json中與eslint相關(guān)的配置

{
	"@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
	  }
	}
}

至于每個(gè)插件的作用，大家善用各種搜索工具,以下是一個(gè)簡(jiǎn)單的插件簡(jiǎn)介：