English | 中文

@tencentcloud/eslint-config-hybrid

本项目是一个eslint的可扩展配置，用于配置前端代码规范，支持Javascript、Typescript、React、Vue项目。

本项目有以下特点：

1. 支持JavaScript、Typescript、React、Vue项目。
2. 如果使用本项目不需要再使用 prettier 进行代码美化，拥抱stylistic。参考这篇文章 antfu - 为什么我不使用 Prettier.
3. 兼容并继承了eslint-config-airbnb-base的最佳实践。由于eslint-config-airbnb-base年久失修，本项目关闭了和code style相关的规则，使用了stylistic进行代码风格的校验。
4. 兼容并继承了eslint-config-airbnb-typescript的最佳实践。由于eslint-config-airbnb-typescript年久失修，本项目移除了 typescript-eslint@8 废弃的规则，使其可以完美地在 typescript-eslint@8 下工作。

在全局上，使用了stylistic进行代码风格的美化校验。

在JavaScript规则上，本项目扩展了优秀的javascript规范 eslint-config-airbnb-base，但是由于该项目很久没有维护，为了兼容新的eslint变更，本项目关闭了和code style相关的规则。

在TypeScript规则上，本项目扩展了优秀的typescript规范 eslint-config-airbnb-typescript，但是由于该项目也很久没有维护，对于eslint-typescript@8存在兼容性问题，本项目仅沿用了eslint-config-airbnb-typescript的部分规则，解决了eslint-typescript@8的兼容性问题。

在 React 规则上，本项目使用了 eslin-plugin-react/recommended 和 eslint-plugin-react-hooks/recommended。如果需要 a11y 的内容请自行添加。

在 Vue 规则上，本项目使用了 eslint-plugin-vue/recommended。

本项目继续使用 eslint@8，并没有使用 eslint@9 新增的 flat config 特性。

用法

本项目为以下类型的项目提供可配置项：

• JavaScript
• Typescript
• React
• Vue3
• Vue2

---

项目类型	extends	描述
JavaScript	@tencentcloud/eslint-config-hybrid/javascript	为JavaScript项目提供eslint配置
Typescript	@tencentcloud/eslint-config-hybrid	（默认）为JavaScript + Typescript混合项目提供eslint配置
React	@tencentcloud/eslint-config-hybrid/react	为React项目提供eslint配置
Vue3	@tencentcloud/eslint-config-hybrid/vue3	为Vue3代码风格项目提供eslint配置 支持Vue2.7
Vue2	@tencentcloud/eslint-config-hybrid/vue2	为Vue2代码风格项目提供eslint配置

安装

1npm i -D @tencentcloud/eslint-config-hybrid

假设以 typescript 项目为例，在项目根目录创建 .eslintrc.cjs文件：

1module.exports = {
2  root: true,
3  extends: [
4    '@tencentcloud/eslint-config-hybrid'
5  ],
6  parserOptions: {
7    // or replaced by the path of tsconfig.json file
8    project: true,
9  },
10  ignorePatterns: [
11    'node_modules',
12    'dist',
13    'public',
14    // else
15  ],
16};

Typescript

如果是Typescript项目，需要额外配置parserOptions.project，指向你的tsconfig.json文件。

可以设置parserOptions.project为true，表示使用当前目录下的tsconfig.json文件。如果项目表示找不到tsconfig.json文件，可以设置parserOptions.project为具体的tsconfig.json文件路径。

Vite

如果你的项目使用Vite，tsconfig文件可能有references字段，如：

1{
2  "files": [],
3  "references": [
4    { "path": "./tsconfig.app.json" },
5    { "path": "./tsconfig.node.json" }
6  ]
7}

需要将parserOptions.project设置为数组：

1parserOptions: {
2  project: [
3    `${__dirname}/tsconfig.json`,
4    `${__dirname}/tsconfig.app.json`,
5    `${__dirname}/tsconfig.node.json`,
6  ]
7},

参考

• antfu - 为什么我不使用 Prettier
• eslint
• stylistic issues
• github - typescript-eslint
• eslint-config-airbnb-base