react+ts+eslint+prettier规范项目代码

1. 首先安装node、webpack、第三方脚手架工具create-react-app

使用npm install webpack webpack-cli -g 完成全局安装，webpack -v 查询当前的版本号；
或者npm install webpack webpack-cli --save-dev 进行局部安装，npx webpack -v查看版本

npm install -g create-react-app 

创建一个基于ts的react项目

npx create-react-app antd-demo --template typescript

拓展：

创建项目成功后，如果我们要将creat react app配置文件进行修改，现有目录下是没有地方修改的，使用npm run eject，会将原本creat react app对webpack，babel等相关配置的封装弹射出来，然后就可以在项目的目录下看到很多配置文件。但这个操作是不可逆的，我们无法再通过其他方式将这些暴露出来的配置还原回去。

npm run eject

npm run eject：
可以通过执行 npm run eject 弹出 Webpack 配置信息，直接修改。不推荐。

craco：
使用 craco 在 React 脚手架的基础上进行 Webpack 配置。

安装 craco：npm install craco。
在根目录下创建 craco.config.js 配置文件编写配置信息。
使用 craco 启动项目：将 package.json 中 scripts 里的 react-scripts 改为 craco，才能将 craco.config.js 中的配置合并到 React 脚手架的配置信息中。
 

2.创建成功后一般会默认装上eslint，如package.json 中没有那么手动安装

npm i -g eslint 全局安装

npm i -D eslint 局部安装

全局安装的好处是，在任何项目我们都可以使用eslint的全局命令进行代码规则操作，但是这对我们的意义并不大，后续会详细介绍；全局安装之后，要求相关的eslint插件页必须全局安装，这对多人开发项目来说会比项目安装更加繁琐。所以，我们这里采用局部安装

3. 安装成功后执行

 npx/npm   eslint  --init

npx报错的话需要 npm i  npx

生成回答一系列问题后， 生成 .eslintrc.js 文件 ，并安装一系列包

// 空格键 选中/取消   Enter键确认选择
 
? How would you like to use ESLint? (Use arrow keys) //您想如何使用ESLint
  To check syntax only // 只检查语法
  To check syntax and find problems // 检查语法和发现问题
> To check syntax, find problems, and enforce code style // 检查语法、发现问题并实施代码样式
 
? What type of modules does your project use? (Use arrow keys) //您的项目使用什么类型的模块
> JavaScript modules (import/export) // JavaScript模块 ES6的模块化
  CommonJS (require/exports) // CommonJS NOde这种模块化方式
  None of these // 其他
 
? Which framework does your project use? (Use arrow keys) //您的项目使用哪个框架(根据情况选择)
> React
  Vue.js
  None of these
 
? Does your project use TypeScript? (y/N) 
//项目是否使用TypeScript,后面括号中大写字母表示默认选项，如果不想使用，直接回车
 
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert sel
ection) //您的代码在哪里运行 按a键两个都选
>(*) Browser // 浏览器
>(*) Node // node
 
? What format do you want your config file to be in? (Use arrow keys) //您希望生成的配置文件是什么格式的
> JavaScript
  YAML
  JSON
 
The config that you've selected requires the following dependencies: //您选择的配置需要以下依赖，
eslint-plugin-vue@latest
? Would you like to install them now with npm? (Y/n) //您想现在安装它吗,默认yes，安装的话直接回车，不安装输入n

 

 4. .eslintignore 忽略文件

• eslint总是忽略 /node_modules/\* 和 /bower_components/\* 中的文件

• .eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如：

/scripts   忽略scripts文件夹下所有文件

/src/App.css  忽略src文件夹下App.css文件

5. 想要eslint生效，需要vscode下载安装 Eslint 插件

6. 保存自动格式化，在设置-》settings.json中添加一行代码。保存后即可生效

"editor.codeActionsOnSave": {"source.fixAll.eslint": true }

如果出现 

in [eslint] Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Occurred while linting D:\project\react_app\src\index.tsx

 可加入这么一行代码即可解决

若报错

 Parsing error: Cannot read file '/users/yuyi/desktop/react/antd-demo/.tsconf

这是由于我们配置查找的tsconfig.json文件路径配置有问题，只需配置 .eslintrc.js中的tsconfigRootDir属性（这里我们tsconfig.json文件和.eslintrc.js处于同一目录下）

7. 安装prettier

npm install prettier -D

or
npm install -g prettier

 注意⚠️：如果eslint是全局安装，那么prettier也需全局安装，否则会报错Failed to load plugin 'prettier' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-vue' 

8. 配置.prettierrc.js

module.exports = {
  "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为80
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行位是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}

9. 规则冲突
当 ESLint 的规则和 Prettier 的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错。prettier 官方提供了一款工具 eslint-config-prettier 来解决这个问题。本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。

安装依赖：

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

修改 eslintrc 文件

// 在 extends 部分加入 prettier 即可
{
  "extends": [
    "...",
    "prettier"
  ]
}

10. 整合使用
上面介绍的工具，仅仅只是将部分 ESLint 规则给禁用了，避免 Prettier 格式化之后的代码导致 ESLint 报错而已，如何将两者结合起来使用呢？prettier 官方提供了一个 ESLint 插件 eslint-plugin-prettier。这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。

这样就相当于将 Prettier 整合进了 ESLint 中。

安装依赖：

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

修改 eslintrc 文件

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

原理是 以 ESLint 规则的方式运行 Prettier，通过 Prettier 找出格式化前后的差异，prettier进行差异标记，借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix。

11. 简化配置
经过上面两步配置后， ESLint 的配置文件大概如下：

 {
  "extends": [
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

其实可以简化一下，直接 extend 一下 plugin:prettier/recommended 即可。如下：

{
  "extends": ["plugin:prettier/recommended"]
}

上面这行配置，实际上相当于：

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

12. Vscode配置

在vscode中安装Eslint和Prettier插件，然后打开设置-》工作区，按图示步骤打开settings.json，进行配置：

 settings.json配置

{
  "prettier.configPath": ".prettier.js",

  "eslint.workingDirectories": [
    ".prettier.js" // replace {PATH_TO_CLIENT} with you own path
  ],

  // 不允许eslint格式化
  "eslint.format.enable": false,
  //   // 打开保存格式化功能
  "editor.formatOnSave": true,
  //   // 使用prettier作为默认格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "eslint.run": "onType",
  // 在保存代码时自动格式化，
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}