Meta

目录

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 进行检查 */