1. ESlint: Trouble Shooting
    1. Global or Locally?
    2. 本地安装方法
    3. 本地安装之后依然无法使用
    4. 某些包无法找到
    5. ESLint couldn't find the config "airbnb" to extend from. Please check that the name of the config is correct.
    6. ESLint: Jest - test not found
    7. ESLint - VSC 不显示
    8. ESLint 集成 Husky Precommit
  2. Usage
    1. 忽略特定文件或文件夹
    2. 检查多个不同扩展名
    3. 使用 npm run check 执行 ESlint

ESlint: Trouble Shooting

Global or Locally?

除非你能够保证所有项目都使用相同的配置, 否则建议本地安装.

并且建议 永远不要全局安装 ESlint, 你会被不同项目的版本问题搞得生不如死

本地安装方法

首先跑到 D:\NodeJS\node_global 里面把之前全局安装的 ESlint 的包全部给删除掉.

然后跑到项目文件夹:

cnpm i eslint --save-dev

然后本地 bash 里面 init 一下:

./node_modules/.bin/eslint --init

# Windows 下为反斜杠
.\node_modules\.bin\eslint --init

然后他会指导你安装对应的包

可以让他帮忙安装或者点击取消自己用 npm/yarn 安装

最好一个一个安装并且安装的时候选择他标示的最高版本

比如: eslint@^5.16.0 || ^6.8.0 || ^7.2.0 这里我们肯定就直接用 7.20 的。

Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-google@latest eslint@>=5.16.0
? Would you like to install them now with npm? No   <-- 我这里选择了 No
Successfully created .eslintrc.json file in G:\Dev\GitRepos\Github\ToooooooLooooongDoNotRead

本地安装之后依然无法使用

考虑一下是否是后期额外添加了 ESLint, 遇到这种情况, 一般把整个 node_modules 删掉然后重新 cnpm i 即可

某些包无法找到

有可能安装后还会缺少一些包, 本地对应一个文件执行一下试一下:

$ ./node_modules/.bin/eslint main.js

# Windows 下变成了反斜杠
$ .\node_modules\.bin\eslint hooks\recentComments.ts

里面就会告诉你有哪些包没有找到, 将这些包也本地安装一下就好了.

ESLint couldn't find the config "airbnb" to extend from. Please check that the name of the config is correct.

cnpm i eslint@^6.1.0 eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

然后同样本地运行一次

$ ./node_modules/.bin/eslint main.js

试一下行不行, 如果可以就重新跑一次 --save-dev 保存到 package.json

ESLint: Jest - test not found

只要在配置文件 .eslintrc.json 里面加一两行就可以:

{
  "env": {
    "jest": true
  },
}

ESLint - VSC 不显示

最近修改了 Node 版本, 路径也改了, 就出现了一些问题

主要的解决方法:

检查 VSC 的 ESLint 里面的设置, 直接编辑设置文件:

主要确认以下两个配置

"eslint.nodePath": "C:/InstalledSoftware/NodeJS12/node.exe",
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"]

ESLint 集成 Husky Precommit

先配置好 Eslint, 所有必要的组件安装好, 并且保证 ESLint 可以跑: ./node_modules/.bin/eslint xxx.js

npm i -D husky lint-staged
npx mrm lint-staged
# 如果不跑一次 rebuild 可能无效, 另外重装 node_modules 也可以
npm rebuild

Usage

忽略特定文件或文件夹

根目录新建一个文件 .eslintignore :

/out
/.next

检查多个不同扩展名

.\node_modules\.bin\eslint --ext .tsx,.ts .

使用 npm run check 执行 ESlint

"lint": "eslint . --ext .tsx,.ts --fix",   /* 检查并修复 */
"lint-error": "eslint . --ext .tsx,.ts --fix --quite", /* 只对 Error 进行检查并修复 */
"check": "eslint . --ext .tsx,.ts", /* 仅仅检查 */
"check-error": "eslint . --ext .tsx,.ts --quite"  /* 只对 Error 进行检查 */