eslint是前端开发中必不可少的一个代码规则检查工具。可以规范化我们的代码。方便我们在大型项目中代码的规范化。

配置

常用配置文件：

module.exports = {
    env:{
      jest: true,
    node: true,
    browser: true,
    es2021: true
  },
  extends: ["airbnb-base","prettier"],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint","prettier","import"],
  rules: {
      "prettier/prettier": "error",
    "import/extensions": [
        "error",
      "ignorePackage",
      {
          js: "never",
        jsx: "never",
        ts: "never",
        tsx: "never"
      }
    ]
  },
  settings: {
      "import/resolver": {
        node: {
          extensions: [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

添加Prettier支持：

当我们在项目中添加了Prettier的时候，Prettier的格式化内容和Eslint的格式化内容往往是不一致的。当我们使用Prettier格式化文件之后，通常是不能通过Eslint的检查的。为了解决这个问题，我们需要让Prettier和Eslint整合起来。

安装必要的依赖：

要把Eslint和Prettier整合起来，我们需要安装几个依赖包：eslint-config-prettier和eslint-plugin-prettier。

修改文件配置：

在我们安装完依赖后，我们需要修改Eslint的配置文件才能使得Eslint的配置生效，把Eslint和Prettier整合在一起。需要修改的有extends、plugins和rules三部分内容。配置后的内容应该是下面这个样子的：

module.exports = {
    extends: [...,'prettier'],
  plugins: [...,'prettier'],
  rules:{
      ...,
    'prettier/prettier': 'error'
  }
}

注：如果使用了airbnb-base的扩展，一定要把prettier放在这些扩展之后！！！

常见问题

Jest

在使用Eslint和Jest组合开发的时候，如果我们是自己配置的Eslint文件，那么就有可能会遇到类似describe is not defined之类找不到Jest中全局变量的错误提示。导致这个问题的原因是，我们没有在eslint中启用Jest的环境配置。解决这个问题非常简单，只需要把jest加入到env配置选项中即可。

module.exports = {
    ...,
  env: {
        jest: true
    }
}

通用

import/extensions 报错

当我们使用eslint的时候，我们可能到遇到类似ESLint: Missing file extension for "..."; (import/extensions)的错误。这是因为在通常的情况下，我们引入文件的时候，要用完整的文件名。但在node环境下，我们引用文件的时候，对于.js的扩展名是会省略的。在这个时候，如果我们要请eslint不报这个错误。那么我们就可以通过安装eslint-plugin-import和修改settings配置。

安装依赖

npm i -D eslint-plugin-import
npm i -D eslint-import-resolver-typescript // 添加对typescript的支持

修改配置文件

module.exports = {
    ...,
  plugins: [...,'import'],
  settings: {
      "import/resolver": {
        node: {
          extensions: [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

import/no-unresolved报错

当我们使用typescript配置eslint开发的时候，我们可能会遇到ESLint: Unable to resolve path to module './func'. (import/no-unresolved)的错误。如果我们要解决这个问题，那么我们就要通过安装插件和修改配置的方式来进行。

安装依赖

npm i -D eslint-plugin-import
npm i -D eslint-import-resolver-typescript

修改配置文件

module.exports = {
    ...,
  plugins: [...,'import'],
  rules: {
      ...,
    "import/extensions: [
          "error",
      "ignorePackage",
        {
            js: "never",
            ts: "never",
            jsx: "never",
            tsx: "never",
          }
      ]
  },
  settings: {
      "import/resolver": {
        node: {
          extensions: [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}