eslint-config

eslint 配置规则

使用方法

快速使用（推荐）

使用 npm:

  npm install --save-dev eslint prettier babel-eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks @coolh/eslint-config

使用 yarn:

  yarn add --dev eslint prettier babel-eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks @coolh/eslint-config

配置 .eslintrc :

{
  "extends": ["@trip/eslint-config"]
}

该规则支持自动识别.js、.jsx、.ts、.tsx文件并启用对应的规则，大部分项目使用此种配置即可。

JavaScript

若你希望开仅启针对 .js 文件的校验，使用方法如下 使用 npm:

  npm install --save-dev eslint prettier babel-eslint @coolh/eslint-config

使用 yarn:

  yarn add --dev eslint prettier babel-eslint @coolh/eslint-config

配置 .eslintrc :

{
  "extends": ["@eslint-config/javascript"]
}

TypeScript

若你希望仅开启针对 .ts 文件的校验，使用方法如下 使用 npm:

  npm install --save-dev eslint prettier typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @coolh/eslint-config

使用 yarn:

  yarn add --dev eslint prettier typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @coolh/eslint-config

配置 .eslintrc :

{
  "extends": ["@coolh/eslint-config/typescript"]
}

React

如果项目中使用到 react，那么可以按照如下方式启用 react 相关规则 使用 npm:

  npm install --save-dev eslint prettier babel-eslint eslint-plugin-react eslint-plugin-react-hooks @coolh/eslint-config

使用 yarn:

  yarn add --dev eslint prettier babel-eslint eslint-plugin-react eslint-plugin-react-hooks @coolh/eslint-config

配置 .eslintrc :

{
  "extends": [
    "@coolh/eslint-config/javascript", //或是 "@coolh/eslint-config/typescript"
    "@coolh/eslint-config/react"
  ]
}

最后配置 package.json 的 scripts:

{
  "scripts": {
    "lint": "eslint *.js lib test xxx",
    "lintfix": "eslint --fix *.js lib test xxx"
  }
}

运行:

  npm run lint

扩展

搭配 VSCode 使用

vscode 扩展-搜索 eslint-安装并重启 vscode

开启 ESLint 错误提示

在 VSCode 中，ESLint 无法识别 .ts 或 .tsx 等文件，需要在设置的 json 文件添加以下配置：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

保存时自动修复ESLint错误(推荐)

如果想要开启「保存时自动修复」的功能，额外配置以下条件：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

注意：如果已安装 Prettier 等插件并开启了自动格式化，请将其关闭，否则存在冲突的可能

文档链接