WebStorm快速配置EsLint

因为工作的疏忽，精弘网络暑期前端授课视频中 5:03的关于EsLint的配置环境的教程，有部分内容是错误的，可能会误导到听课的同学。为此我感到十分抱歉，所以特此出一篇博客，纠正这个问题，还望大家海涵。

一、Webstorm安装插件

前往设置-插件，搜索如下图片的关键字，安装EsLint所需要的插件

二、根目录下编辑 Eslint配置文件

首先我们要知道的是，在eslint中，插件会自动检索根目录下面的配置文件作为EsLint的配置规则，顺序是

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json

打个比方说，一个项目同时有.eslintrc.cjs 和.eslintrc.json 配置文件，那么会优先采用.cjs的配置规则，.json就不起作用了

之前授课的错误就是，我把两种配置规则混在一起了，导致一个项目中同时有2个规则。但是插件那边选择了auto，插件就没有选择配置文件，导致我们想要的规则不起作用。

因此，

不需要Eslint –init 配置，只需要直接在根目录新建一个文件.eslintrc.cjs

内容如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "@vue/eslint-config-typescript/recommended"
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: "./tsconfig.json"
  },
  plugins: [
    "vue"
  ],
  rules: {
    quotes: ["warn", "double"],
    semi: "error",
    "vue/multi-word-component-names": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "no-trailing-spaces": "error"
  }
};

另外值得一提的是，为什么在二者只能选其一的情况下，我们不使用EsLint –init，而更推荐大家直接使用上面的.cjs文件来配置EsLint呢？

因为EsLint –init配置出来的规则是最基础的规范，而上面的.cjs则是精弘一直使用的团队规范，虽然不能保证是最好的规则，但也至少比–init的要好。而且最主要的原因是，在这个Demo中，我们使用的就是精弘网络要求的规范和技术栈，使用–init创建的规范文件，可能在这个Demo中会存在不适配和报错的情况。

三、Eslint具体设置

设置左上角输入Eslint就可以跳转到这个界面，选择 手动/自动 均可

下面都不用动，都会自动匹配到.cjs的规则。

四、补全Eslint所需要的依赖

.cjs中所需要的规则需要额外添加一些关于EsLint的依赖环境，

请在package.json中按照如下补全依赖,检查是否有缺失的依赖，无误后pnpm i：

{
  "name": "addressbook",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "axios": "^1.2.2",
    "element-plus": "^2.3.7",
    "pinia": "^2.1.4",
    "pinia-plugin-persistedstate": "^3.2.0",
    "vue": "^3.2.47",
    "vue-router": "4"
  },
  "devDependencies": {
    "@types/node": "^20.5.1",
    "@typescript-eslint/eslint-plugin": "^6.5.0",
    "@typescript-eslint/parser": "^6.5.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "eslint": "^8.44.0",
    "eslint-plugin-vue": "^9.17.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vue-tsc": "^1.4.2"
  }
}