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

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

本文主要参考项目：

https://github.com/dorshinar/eslint-react-intro​github.com

主要参考文章：

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

---

一、ESLint

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

避免代码错误

写出最佳实践的代码

规范变量使用方式

规范代码格式

更好的使用新的语法

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

• standardjs
• airbnb

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

二、Prettier

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

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

Prettier:

prettier/eslint-plugin-prettier​github.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 官方决定全面采用 ESLint​www.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-eslint​github.comTypeScript 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-742cf1f384f1​larrylu.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/husky​github.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.comhttps://standardjs.com/readme-zhcn.html​standardjs.comhttps://larrylu.blog/improve-code-quality-using-eslint-742cf1f384f1​larrylu.blogTypeScript 官方决定全面采用 ESLint​www.oschina.nethttps://medium.com/@oliver.grack/using-eslint-with-typescript-and-react-hooks-and-vscode-c583a18f0c75​medium.com

总结

以上是生活随笔为你收集整理的antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。