eslint-config-encode 使用指南

JavaScript 项目 (默认)

配置文件：eslint-config-encode

依赖：

• @babel/core@^7.16.0
• @babel/eslint-parser@^7.16.3
• eslint-plugin-import@^2.25.3

安装：

npm i -D eslint-config-encode @babel/core @babel/eslint-parser eslint-plugin-import

配置：

{"extends": ["eslint-config-encode"]
}

JavaScript + React

配置文件：eslint-config-encode/react

依赖：

• 默认依赖
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y（可选）

安装：

npm i -D eslint-config-encode @babel/core @babel/eslint-parser eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

配置：

{"extends": ["eslint-config-encode/react"]
}

支持无障碍 (可选)：

npm i -D eslint-plugin-jsx-a11y

{"extends": ["eslint-config-encode/react", "eslint-config-encode/jsx-a11y"]
}

JavaScript + Vue

配置文件：eslint-config-encode/vue

依赖：

• 默认依赖
• vue-eslint-parser
• eslint-plugin-vue

安装：

npm i -D eslint-config-encode @babel/core @babel/eslint-parser eslint-plugin-import vue-eslint-parser eslint-plugin-vue

配置：

{"extends": ["eslint-config-encode/vue"]
}

JavaScript (Node.js)

配置文件：eslint-config-encode/node

依赖：

• 默认依赖
• eslint-config-egg

安装：

npm i -D eslint-config-encode @babel/core @babel/eslint-parser eslint-plugin-import eslint-config-egg

配置：

{"extends": ["eslint-config-encode/node"]
}

TypeScript 项目

配置文件：eslint-config-encode/typescript

依赖：

• @typescript-eslint/parser
• @typescript-eslint/eslint-plugin
• eslint-plugin-import
• eslint-import-resolver-typescript

安装：

npm i -D eslint-config-encode @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript

配置：

{"extends": "eslint-config-encode/typescript","parserOptions": {"project": "./tsconfig.json"}
}

TypeScript + React

配置文件：eslint-config-encode/typescript/react

依赖：

• TS 依赖
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y（可选）

安装：

npm i -D eslint-config-encode @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-react eslint-plugin-react-hooks

配置：

{"extends": ["eslint-config-encode/typescript/react"]
}

TypeScript + Vue

配置文件：eslint-config-encode/typescript/vue

依赖：

• TS 依赖
• vue-eslint-parser
• eslint-plugin-vue

安装：

npm i -D eslint-config-encode @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript vue-eslint-parser eslint-plugin-vue

配置：

{"extends": ["eslint-config-encode/typescript/vue"]
}

TypeScript (Node.js)

配置文件：eslint-config-encode/typescript/node

依赖：

• TS 依赖
• eslint-config-egg

安装：

npm i -D eslint-config-encode @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript eslint-config-egg

配置：

{"extends": ["eslint-config-encode/typescript/node"]
}

配合 Prettier 使用

安装：

npm i -D eslint-config-prettier eslint-plugin-prettier

配置 (TS React 项目为例)：

{"extends": ["eslint-config-encode/typescript/react", "prettier"]
}

将风格问题降级 (essential)

默认规则中风格问题是 error，可使用 essential 将其降级为 warn。

示例：

• JS React: eslint-config-encode/essential/react
• TS Vue: eslint-config-encode/essential/typescript/vue

常用 ESLint 配置字段

• extends: 继承规则集
• rules: 自定义规则覆盖
• parser: 自定义解析器
• globals: 指定全局变量
• env: 指定环境（browser、node、es6、测试框架等）