eslint规范_Typescript项目优雅的使用ESLint和Prettier

在Typescript项目中，如何优雅的使用ESLint和Prettier

---

对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，TypeScript 官方决定全面采用ESLint，甚至把仓库作为测试平台，而 ESLint 的 TypeScript 解析器也成为独立项目，专注解决双方兼容性问题。 最近在我的项目的编码规范中全量的用ESLint代替了TSLint,针对其中遇到的问题做一个记录。

• 用ESLint来规范Typescript代码
• 用ESLint来规范React代码
• 结合Prettier和ESLint来规范代码
• 在VSCode中使用ESLint
• husky和lint-staged构建代码工作流
• gitlab的CI/CD来规范代码

原文在我的博客中： github.com/fortheallli…

欢迎star和收藏

---

一、用ESLint来规范Typescript代码

首先安装依赖：

npm i -d eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin复制代码

这三个依赖分别是：

• eslint: ESLint的核心代码
• @typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
• @typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范

安装好这3个依赖包之后，在根目录下新建.eslintrc.js文件，该文件中定义了ESLint的基础配置，一个最为简单的配置如下所示：

module.exports = { parser: '@typescript-eslint/parser', //定义ESLint的解析器 extends: ['plugin:@typescript-eslint/recommended'],//定义文件继承的子规范 plugins: ['@typescript-eslint'],//定义了该eslint文件所依赖的插件 env:{ //指定代码的运行环境 browser: true, node: true, } }复制代码

• 在ts项目中必须执行解析器为@typescript-eslint/parser，才能正确的检测和规范TS代码
• env环境变量配置，形如console属性只有在browser环境下才会存在，如果没有设置支持browser,那么可能报console is undefined的错误。

二、用ESLint来规范React代码

如果在你的TS项目中同时使用了React，那么为了检测和规范React代码的书写必须安装插件eslint-plugin-react，然后增加配置：

module.exports = { parser: '@typescript-eslint/parser', extends: [ 'plugin:react/recommended'  'plugin:@typescript-eslint/recommended' ], //使用推荐的React代码检测规范 plugins: ['@typescript-eslint'], env:{  browser: true, node: true, }, settings: { //自动发现React的版本，从而进行规范react代码 "react": { "pragma": "React