eslint+prettier eslnit配置

293 阅读1分钟

每次换电脑后,总是要在新的vscode中配置eslint和prettier-eslnit,每次配置时,总是很头疼,得去找一堆资料,这次就一次性总结一下吧

首先找到配置: 我一般从文件的首选项里去找,

image.png

进入后再在用户的设置区中的settings.json中编辑

image.png

以上步骤的前提是,vscode中安装了 ESLint和Prettier ESLint插件,且项目中安装了eslint和eslint-plugin-prettier

image.png

image.png

接下来就在settings.json中配置下 以下是我的配置

{
  "editor.fontSize": 16,
  "settingsSync.ignoredExtensions": [],
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "always",
    "source.fixAll.eslint": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.workingDirectories": [    
    {
      "mode": "auto"
    }
  ],
  "eslint.validate": [    
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
  ],
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "git.autofetch": true,
  "workbench.colorTheme": "One Dark Pro",
  "leetcode.endpoint": "leetcode-cn",
  // "leetcode.nodePath": "D:\\program\\node\\node.exe",
  "eslint.debug": true,
  "eslint.codeActionsOnSave.rules": ["source.formatDocument" , "source.fixAll.eslint"],
  "eslint.lintTask.enable": true,
  "eslint.nodeEnv": "",
  "hediet.vscode-drawio.resizeImages": null,
  "npm.keybindingsChangedWarningShown": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "eslint.format.enable": true,
  "eslint.onIgnoredFiles": "warn",
  "vs-code-prettier-eslint.prettierLast": true,
  "auto-close-tag.disableOnLanguage": []
}

保存配置后重启下vscode,再看项目中有没有生效。 如果没有生效,可以在该项目的vscode控制台的输出中看下是什么原因导致未生效的,根据提升去修改。有可能是vscode版本太低导致,则需升级一下。

image.png