reactLint

该项目包含 eslint、tsconfig.json、.prettierrc.js，涵盖项目所需的规范化文件。使用时只需要通过 extends 引入即可，若是需要自定义，则采用项目文件覆盖 ❗️ 非必要不建议，除非你知道你在做什么

安装

npm i @weike/reactlint -D

# 依赖包 peerDependencies
npm i @typescript-eslint/eslint-plugin@4 @typescript-eslint/parser@4 eslint@7 eslint-plugin-import@2 eslint-plugin-promise@5 eslint-plugin-react@7 eslint-plugin-react-hooks@4 eslint-webpack-plugin@3 -D

eslint 使用方式

// .eslintrc.js
module.exports = require("@weike/reactlint/react-eslint");

tsconfig 使用方式

// tsconfig.json
{
  "extends": "@weike/reactlint/tsconfig.json",
  "include": ["typings/*", "src/**/*"],
  "exclude": ["node_modules", "build", "public"],
  "compilerOptions": {
    "rootDir": "./"
  }
}

.prettierrc 使用方式

// 新建 .prettierrc.js，并导入以下代码
module.exports = {
  ...require("@weike/reactlint/prettier"),
};

注意：更新 perttier 会有 vscode 缓存，所以需要重启 vscode

eslint 一些说明

parser

默认走 espree 解析器
设定 parser，则指定处理代码生成 estree（ast）解析器，同时 eslint 根据解析器进行校验

parserOptions 注意事项

可用的选项：（👉文档）

• ecmaVersion
  • 设置为 3、5（默认）、6、7、...、14 以指定要使用的 ECMAScript 语法版本。
  • 也可以设置为 2015（同 6）、2016（同 7）、...、 2023（与 14 相同）以使用基于年份的命名。
  • 还可以设置"latest"为使用最近支持的版本。
• sourceType- 设置为"script"（默认）或者"module"如果您的代码在 ECMAScript 模块中。
• allowReserved- 允许使用保留字作为标识符（如果 ecmaVersion 是 3）。
• ecmaFeatures- 一个对象，指示您要使用哪些附加语言功能：
  • globalReturn- 允许 return 在全局范围内声明
  • impliedStrict- 启用全局严格模式（如果 ecmaVersion 是 5 或更大）
  • jsx- 启用 JSX

@typescript-eslint/parser

参考文档：https://typescript-eslint.io/

ESLint 是 JavaScript 代码检查器。

ESLint 静态分析您的代码以快速发现问题。它允许围绕代码的外观或行为创建一系列称为 lint 规则的断言，以及为您改进代码的自动修复程序建议，以及从共享插件加载 lint 规则。

TypeScript 是一种建立在 JavaScript 之上的强类型编程语言。

TypeScript 向 JavaScript 添加了额外的语法，允许您在代码中声明对象和函数的形状。它提供一组语言服务，允许使用该类型的信息运行强大的推理和自动化。

typescript-eslint使 ESLint 能够在 TypeScript 代码上运行。 它结合了这两种工具的优点，可以帮助您编写更好的 JavaScript 或 TypeScript 代码。

ESLint 和 TypeScript 在内部以不同方式表示代码。ESLint 的默认 JavaScript 解析器无法原生读取特定于 TypeScript 的语法，并且其规则本身无法访问 TypeScript 的类型信息。

typescript-eslint:

• 允许 ESLint 解析 TypeScript 语法
• 为 ESLint 规则创建一组工具，以便能够使用 TypeScript 的类型信息
• 提供大量 lint 规则列表，这些规则特定于 TypeScript 和/或使用该类型信息

rule

规则配置，“0，1，2”含义：
- 0：禁止使用该规则(off)
- 1：将该规则定义为警告 (warn) 等级（不影响exit code）
- 2：将该规则定义为错误 (error) 等级（exit code为1）

@typescript-eslint/naming-convention 命名约定

这个好像没有文档，直接上 git 上看吧：参考 👉git 链接

1. 布尔类型命名规范，以制定的动词开头的非命令式动词短语。

布尔名称通常用作控制的条件，因此需要一个可读性好的名称，好名字往往是以下几种动词之一开头：

• is, was, should, has, can, did, will
  • “是否”的一种形式: isOpen，hasElements，hasToken，canShowPopup
  • 首选布尔属性或变量的“正向”名称: isOpen 与 isHide，在选择 true 代表的两种情况中的哪一种时，首选正向属性，更加符合。
  • 非命令式: 布尔类型一般都属于询问，而不是告诉某对象做某事（如果该属性确实以有意义的方式修改了对象，则它应该是一个方法，如：'onShow'，'onLoad'）
     

  "@typescript-eslint/naming-convention": [
      "error",
      // 指定 boolean 前缀格式，必须以制定的动词开头。
      {
          selector: "variable",
          types: ["boolean"],
          format: ["PascalCase"],
          /* 有新的定义，可以增加 */
          prefix: ["is", "was", "should", "has", "can", "did", "will"],
      },
  ],

2. 约定私有属性格式

内部私有属性以_为前缀，基本上是所有语言的约定。
同时对于非共享的 window 属性，比如对于项目的一个模块使用的时候，虽然没有限制，但是建议也加_，或者__，避免变量污染。

```javascript
"@typescript-eslint/naming-convention": [
    "error",
    // 约定私有属性格式， _private
    {
        selector: "memberLike",
        modifiers: ["private"], // 私有属性
        format: ["camelCase"], // 指定格式
        leadingUnderscore: "require", // 必须使用下划线前缀
    },
],
```

3. interface 约定命名

interface须以I或者_I开头，这个作为代码规范进行约定，便于 ts 类型与 jsApi，函数，对象之间的区分

 "@typescript-eslint/naming-convention": [
     "error",
     {
         selector: "interface",
         format: ["camelCase"],
         prefix: ["I", "_I"],
     },
 ],

其他更多选项定义，见 react-eslint.js 文件