antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目

最新推荐文章于 2023-09-15 14:10:37 发布

weixin_39520210

最新推荐文章于 2023-09-15 14:10:37 发布

阅读量193

点赞数

文章标签： antd + react model自定义footer eslint关闭 eslint怎么关闭 eslint是什么 eslint自动格式化 eslint规范

项目开发过程中，大多数时候我们使用别人搭建好的脚手架编写代码，是项目的参与者。对于一些细节往往被忽略了。其中代码检测本身是一类非常简单的配置，但涉及不同框架和语言组合使用的时候，可能比想象中要困难，本文带您一起学习ts + react 项目搭建过程中的代码规范配置。

本文主要参考项目：

https://github.com/dorshinar/eslint-react-introgithub.com

主要参考文章：

https://medium.com/@dors718/linting-your-react-typescript-project-with-eslint-and-prettier-2423170c3d42medium.com

一、ESLint

ESLint 是一个Javascript Linter，帮助我们规范代码质量，提高团队开发效率。

避免代码错误
写出最佳实践的代码
规范变量使用方式
规范代码格式
更好的使用新的语法

社区比较知名的代码规范，eslint 配合这些代码规范，能够检测出代码潜在问题，从而提高代码质量。

standardjs
airbnb

说明：ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

二、Prettier

eslint 虽然能帮助我们提高代码质量，但并不能完全统一编码风格，因为这些代码规范的重点并不在代码风格上，虽然有一定的限制。

prettier 是一个能够统一团队编码风格的工具，能够极大的提高团队执行效率，统一的编码风格能很好的保证代码的可读性。

Prettier:

prettier/eslint-plugin-prettiergithub.com

三、React + TypeScript 项目中该怎么选择 Linting？

最近在做 react + typescript 项目过程中，想通过合适的工具对代码进行规范以及统一编码规则。很自然的想到了 eslint 、tslint

3.1 TSLint

TSLint 对TypeScript 支持得很好，并且如果你使用的是 VsCode IDE，还有出色的插件支持。

可能有人会有疑问：JavaScript 语言非常灵活，所以需要相应的代码检测，而TypeScript 有强大的 类型系统 和 对ES6+ 的支持。在编译过程中已经可以检测出很多问题。为什么还需要？

因为TypeScript 关注的是类型的匹配，而不是代码风格。

比如：

// 1.缩进应该是四个空格还是两个空格？
// 2.是否应该禁用 var？
// 3.接口名是否应该以 I 开头？
// 4.是否应该强制使用 === 而不是 ==？

TypeScript 不会关注上面的问题，但这些问题能够影响到团队协作效率、代码的可理解、可维护性。

例子：

let myName = 'Tom';
console.log(`My name is ${myNane}`);
console.log(`My name is ${myName.toStrng()}`);
console.log(`My name is ${myName}`)

3.2 应该使用哪种代码检查工具？

TSLint 的优点：

专为 TypeScript 服务，bug 比 ESLint 少
不受限于 ESLint 使用的语法树 ESTree
能直接通过 tsconfig.json 中的配置编译整个项目，使得在一个文件中的类型定义能够联动到其他文件中的代码检查

ESLint 的优点：

基础规则比 TSLint 多很多
社区繁荣，插件众多

3.3 BUT

参考：

TypeScript 官方决定全面采用 ESLintwww.oschina.net

由于性能问题，TypeScript 官方决定全面采用 ESLint，甚至把仓库（Repository）作为测试平台，而 ESLint 的 TypeScript 解析器也成为独立项目，专注解决双方兼容性问题。

JavaScript 代码检测工具 ESLint 在 TypeScript 团队发布全面采用 ESLint 之后，发布typescript-eslint 项目，以集中解决TypeScript 与 ESLint兼容性问题。而ESLint不再维护typescript-eslint-parser，也不会在npm 上做任何发布。TypeScript 解析器转移至Github 的 typescript-eslint/parser。

typescript-eslint/typescript-eslintgithub.com

TypeScript 2019上半年发展规划github.com

3.4 SO

虽然TSLint 很长一段时间是Linting TypeScript 的标准，但ESLint会很快完全取代 TSLint，TSLint将被抛弃。

四、React + TypeScript 项目 Linting 搭建

4.1 使用`npx`创建项目

$ npx create-react-app eslint-react-intro --typescript

说明：npx 参考

4.2 安装 ESLint 解析 TypeScript 的依赖

eslint：javascript代码检测工具，使用espree解析器
@typescript-eslint/parser：将 TypeScript 转换为 ESTree，使 eslint 可以识别
@typescript-eslint/eslint-plugin：只是一个可以打开或关闭的规则列表

$ yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

4.3 配置 ESLint

1.使用eslint 交互式工具配置

$ ESLint --init

它会问你一系列问题，以帮助你配置它。

可以参考：

https://larrylu.blog/improve-code-quality-using-eslint-742cf1f384f1larrylu.blog

2.自定义配置，添加配置文件 .eslintrc.js

module.exports = {
  parser: {},  // 解析器
  extends: [], // 继承的规则 [扩展]
  plugins: [], // 插件
  rules: {}    // 规则
};

plugin 与 extend 的区别：

extend 提供的是 eslint 现有规则的一系列预设
而 plugin 则提供了除预设之外的自定义规则，当你在 eslint 的规则里找不到合适的的时候就可以借用插件来实现了

为了使配置能够正常运行，我们需要配置解析器、插件、规则集等。

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: ["plugin:@typescript-eslint/recommended"],
  plugins: ["@typescript-eslint"],
  rules: {}
};

我们已经告诉ESLint 怎样正确解析 TypeScript 代码，并且使用了一组推荐的插件规则（extends字段选项中的配置）。

3. 接下来我们将为 React 添加基本规则

此规则，由Create React App团队提供

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: ["plugin:@typescript-eslint/recommended", "react-app"],
  plugins: ["@typescript-eslint", "react"],
  rules: {}
};

我们对 TypeScript 和 React 进行了规范(linting)，此时需要选择一种代码格式化程序。前面提到的Prettier 将是首选工具，因为它在检测和修复样式错误方面做的很出色，并且和ESLint有很好的集成。

4. 安装 prettier 依赖

$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

prettier: 格式化规则程序
eslint-config-prettier: 将禁用任何可能干扰现有 prettier 规则的 linting 规则
eslint-plugin-prettier: 将作为ESlint 的一部分运行 Prettier分析。

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'react-app',
    'plugin:prettier/recommended',
  ],
  plugins: ['@typescript-eslint', 'react'],
  rules: {},
};

5. Visual Studio Code 集成 ESLint 与 Prettier

最后，虽然默认配置（setting.json）已经很好，但默认只检测.js和 *.jsx文件，我们还需要配置typescripe，同时我们也希望有自动修复功能（有些是不可能自动修复）。

user settings 与 workspace settings：user settings 里面是更通用的设置，workspace settings 是跟随项目存在，可以做到团队统一。

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

6.使用 husky，提交检测（可选）

https://github.com/typicode/huskygithub.com

结合自己团队实际情况，是否选择，建议使用。

$ yarn add husky -D

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

五、总结

ESList：@typescript-eslint项目取代 tslint

TSLint：逐渐被舍弃

Prettier：统一代码风格

VSCode：在setting.json中设置，可以集成 ESLint、Prettier 等规则，并能自动修复。

Linting Your React+Typescript Project with ESLint and Prettier!medium.com 自然醒：使用ESLint+Prettier来统一前端代码风格zhuanlan.zhihu.com

https://standardjs.com/readme-zhcn.htmlstandardjs.com https://larrylu.blog/improve-code-quality-using-eslint-742cf1f384f1larrylu.blog TypeScript 官方决定全面采用 ESLintwww.oschina.net

https://medium.com/@oliver.grack/using-eslint-with-typescript-and-react-hooks-and-vscode-c583a18f0c75medium.com