背景

G7 前端规范，是在 G7 内部广泛使用的一套前端编码和工程规范，致力于通过统一编码风 格、普及最佳实践和代码缺陷检查帮助团队降低协作成本、提升前端项目的可维护性和稳定 性。

简介

本包是 G7 所有项目配套的 ESLint 可共享配置， 我们提供了多套配置文件以支持 JavaScript、TypeScript、React、Vue、Node.js 等多种 项目类型：

JavaScript 项目

| 项目类型 | 配置文件 | 依赖 | | ------------ | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 一般项目 | @g7fe/g7 | babel-eslint@^10.1.0 eslint-plugin-import@^2.19.1 | | React 项目 | @g7fe/g7/react @g7fe/g7/jsx-a11y（可选） | babel-eslint@^10.1.0 eslint-plugin-import@^2.19.1 eslint-plugin-react@^7.17.0 eslint-plugin-react-hooks@^4.0.4 eslint-plugin-jsx-a11y@^6.3.1（可选） | | Vue 项目 | @g7fe/g7/vue | babel-eslint@^10.1.0 eslint-plugin-import@^2.19.1 vue-eslint-parser@^7.0.0 eslint-plugin-vue@^7.3.0 | | Node.js 项目 | @g7fe/g7/node | babel-eslint@^10.1.0 eslint-plugin-import@^2.19.1 eslint-config-egg@^9.0.0 | | ES5 项目 | @g7fe/g7/es5 | 无 |

TypeScript 项目

| 项目类型 | 配置文件 | 依赖 | | ------------ | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 一般项目 | @g7fe/g7/typescript | @typescript-eslint/parser@^4.4.0 @typescript-eslint/eslint-plugin@^4.4.0 eslint-plugin-import@^2.19.1 | | React 项目 | @g7fe/g7/typescript/react @g7fe/g7/jsx-a11y（可选） | @typescript-eslint/parser@^4.4.0 @typescript-eslint/eslint-plugin@^4.4.0 eslint-plugin-import@^2.19.1 eslint-plugin-react@^7.17.0 eslint-plugin-react-hooks@^4.0.4 eslint-plugin-jsx-a11y@^6.3.1（可选） | | Vue 项目 | @g7fe/g7/typescript/vue | @typescript-eslint/parser@^4.4.0 @typescript-eslint/eslint-plugin@^4.4.0 eslint-plugin-import@^2.19.1 vue-eslint-parser@^7.0.0 eslint-plugin-vue@^7.3.0 | | Node.js 项目 | @g7fe/g7/typescript/node | @typescript-eslint/parser@^4.4.0 @typescript-eslint/eslint-plugin@^4.4.0 eslint-plugin-import@^2.19.1 eslint-config-egg@^9.0.0 |

快速接入

如果想一键完成规范接入，请执行下面脚本，如有任何问题，请联系 @张新

yarn global add @g7fe/g7-scripts
g7-scripts init

安装与使用

手动接入时，可以在上面表格中找到自己项目类型对应的配置文件，在 ESLint 配置 中 extends， 并安装所需依赖。下面对各项目类型的安装和使用进行详细介绍：

一般项目（JavaScript）

针对未使用 React 或 Vue 的一般 JavaScript 项目，使用 ESLint 原生规则和 eslint-plugin-import 规则 ，使用 babel-eslint 作为 parser，是本 包的默认配置。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0 babel-eslint@^10.1.0 eslint-plugin-import@^2.19.1

使用

{
  "extends": "@g7fe/g7"
}

React 项目（JavaScript）

针对 JS React 项目，继承了默认配置，并启用了 eslint-plugin-react 和 eslint-plugin-react-hooks 的规则。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0 babel-eslint@^10.1.0 eslint-plugin-import@^2.19.1 eslint-plugin-react@^7.17.0 eslint-plugin-react-hooks@^4.0.4

使用

{
  "extends": "@g7fe/g7/react"
}

a11y 支持

本包也提供了 JSX a11y 的检查规则，但没有在 React 规则包中默认引入，你可以按如下 步骤手动启用：

安装 eslint-plugin-jsx-a11y 插件：

npm install --save-dev eslint-plugin-jsx-a11y

在配置中引入 @g7fe/g7/jsx-a11y：

{
  "extends": ["@g7fe/g7/react", "@g7fe/g7/jsx-a11y"]
}

Vue 项目（JavaScript）

针对 JS Vue 的项目，继承了默认配置，并启用了 eslint-plugin-vue 插件的规则 ，使用 vue-eslint-parser 作为 parser。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0 vue-eslint-parser@^7.0.0 babel-eslint@^10.1.0 eslint-plugin-import@^2.19.1 eslint-plugin-vue@^7.3.0

使用

{
  "extends": "@g7fe/g7/vue"
}

Node.js 项目（JavaScript）

针对 Node.js 项目，继承了默认配置和 egg-config-egg 的 node 规则， 规则由 ESLint 原生规则和 eslint-plugin-node 提供。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0 babel-eslint@^10.1.0 eslint-plugin-import@^2.19.1 eslint-config-egg@^9.0.0

使用

{
  "extends": "@g7fe/g7/node"
}

ES5 项目（JavaScript）

针对仍在使用 ES5 及之前版本 JS 的老项目，使用 ESLint 原生规则。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0

使用

{
  "extends": "@g7fe/g7/es5"
}

一般项目（TypeScript）

针对未使用 React 或 Vue 的一般 TypeScript 项目，继承了默认配置，并启用了 @typescript-eslint/eslint-plugin 插件的规则，使用 @typescript-eslint/parser 作为 parser。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0 eslint-plugin-import@^2.19.1 @typescript-eslint/eslint-plugin@^4.4.0 @typescript-eslint/parser@^4.4.0

使用

{
  "extends": "@g7fe/g7/typescript"
}

需保证项目已安装 typescript 依赖，另外如果项目的 TS 配置文件不是 ./tsconfig.json，则需要设置 .eslintrc 中的 parserOptions.project 字段 ，例如：

{
  "extends": "@g7fe/g7/typescript",
  "parserOptions": {
    "project": "./tsconfig.eslint.json"
  }
}

React 项目（TypeScript）

针对 TS React 项目，继承了 JS React 的配置，并启用了 @typescript-eslint/eslint-plugin 插件的规则，使用 @typescript-eslint/parser 作为 parser。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0 eslint-plugin-import@^2.19.1 eslint-plugin-react@^7.17.0 eslint-plugin-react-hooks@^4.0.4 @typescript-eslint/eslint-plugin@^4.4.0 @typescript-eslint/parser@^4.4.0

使用

{
  "extends": "@g7fe/g7/typescript/react"
}

a11y 支持

本包也提供了 JSX a11y 的检查规则，但没有在 TS React 规则包中默认引入，你可以按如 下步骤手动启用：

安装 eslint-plugin-jsx-a11y 插件：

npm install --save-dev eslint-plugin-jsx-a11y

在配置中引入 @g7fe/g7/jsx-a11y：

{
  "extends": ["@g7fe/g7/typescript/react", "@g7fe/g7/jsx-a11y"]
}

Vue 项目（TypeScript）

针对 TS Vue 项目，继承了 JS Vue 的配置，并启用了 @typescript-eslint/eslint-plugin 插件的规则，使用 @typescript-eslint/parser 作为 parser。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0 eslint-plugin-import@^2.19.1 eslint-plugin-vue@^7.3.0 vue-eslint-parser@^7.0.0 @typescript-eslint/eslint-plugin@^4.4.0 @typescript-eslint/parser@^4.4.0

使用

{
  "extends": "@g7fe/g7/typescript/vue"
}

Node.js 项目（TypeScript）

针对未使用 React 和 Vue 的 TypeScript(Node) 项目，继承了 JS Node.js 配置，并启用 了 @typescript-eslint/eslint-plugin 插件的规则，使用 @typescript-eslint/parser 作为 parser。

安装

npm install --save-dev @g7fe/eslint-config-g7 eslint@^7.15.0 eslint-plugin-import@^2.19.1 @typescript-eslint/eslint-plugin@^4.4.0 @typescript-eslint/parser@^4.4.0 eslint-config-egg@^9.0.0

使用

{
  "extends": "@g7fe/g7/typescript/node"
}

配合 Prettier 使用

如果你的项目使用 Prettier 进行代码格式化，本包的一些规则 可能会跟 Prettier 格式化结果有冲突 ，例如这条规则。 为了避免冲突，你需要手动安装 eslint-config-prettier 和 eslint-plugin-prettier：

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

如果你不希望 ESLint 再管格式问题，直接调用 Prettier 进行格式化的话，可修改 eslintrc 的 extends 如下（以 TS React 项目为例）：

{
  "extends": ["@g7fe/g7/typescript/react", "plugin:prettier/recommended"]
}

了解更多请阅读 Prettier - Integrating with Linters。

将风格问题降级

为了保证一致的编码风格，本包中大量风格相关的规则被设为了 error 级别，以引起开发 者的足够重视。如果你觉得风格问题不足以是 error 级别（有些用户根据 ESLint error 进行流程卡点），本包还提供了一套名为 'essential' 的配置文件，这套配置将所有风格 问题降级为 warn 级别，仅将必要问题报告为 error，引用方式为在相应配置的 @g7fe/g7 后面加上 /essential，如对 JS React 项目为 @g7fe/g7/essential/react、对 TS Vue 项目为 @g7fe/g7/essential/typescript/vue

了解更多

• 如果你对 ESLint 还不熟悉，可以阅读官网的 Getting Started 快速入门 。
• 了解如何为 IDE 配置 ESLint，可以参考官网的 Integrations。
• 了解如何在继承本包的基础上对项目 ESLint 进行个性化配置，可参考官网的 Configuring ESLint。下面简介 下 ESLint 配置中的几个常用字段：
  • extends: 继承一组规则集。"extends": "eslint-config-g7", 表示继承本包定义 的规则配置。
  • rules: 配置规则，这里定义的规则会覆盖 extends 的规则。如果觉得本包开启的 某条规则过于严格，你可以暂时在这里将其关闭。
  • parser: 设置 ESLint 的解析器。ESLint 使用 espree 作为默认的解析器，可以通 过这个参数指定其他的解析器。比如指定为 babel-eslint，以解析 Babel 支持但 ESLint 默认解析器不支持的语法（本包不同配置文件使用的解析器可在简介表格中的 「依赖 parser」一列查看）。
  • globals: 指定代码中可能用到的全局变量，以免全局变量被 no-undef 规则报错。
  • env: 指定代码的运行环境，每个环境预定义了一组对应的全局变量，本包已开启的 环境有 browser、node、jquery、es6 及几个测试框架的环境。
• 了解常用的 ESLint 命令，如 --fix、--ext，可参考官网的 Command Line Interface。

LICENSE

PRIVATE