React-Typescript配置ESLint-Prettier

创建项目

$ npx create-react-app app-react-ts --typescript

安装 ESLint 解析 TypeScript 的依赖

$ npm i eslint -D # eslint包
$ npm i @typescript-eslint/parser -D # 将 TypeScript 转换为 ESTree，使 eslint 可以识别 ts
$ npm i @typescript-eslint/eslint-plugin -D # 定义好的检测Typescript代码的规范

安装Prettier依赖

$ npm i prettier -D # prettier包
$ npm i eslint-config-prettier -D # 禁用任何可能干扰现有 prettier 规则的 linting 规则, 一定要把它放在 extends 中最后的位置, 避免再次被打开
$ npm i eslint-plugin-prettier -D # 将 Prettier 问题作为ESLint规则提示出来

配置ESLint

// .eslintrc.js
module.exports = {
    // 解析器
  parser: "@typescript-eslint/parser",// 使eslint识别ts
  // 现有规则的一系列预设
  extends: [
    "plugin:@typescript-eslint/recommended",// 启用@typescript-eslint/eslint-plugin建议规则
    "react-app",// CRA推荐规则
    "plugin:prettier/recommended",// 简化配置: eslint-config-prettier + eslint-plugin-prettier
  ],
  // 规则
  rules: {}
};

安装VSCode插件

• ESLint插件
• 注意: 不需要安装Prettier插件, 安装了也无妨

配置settings

// workspace settings.json
{
    // 老版只支持js文件校验, 所以需要配置"eslint.validate"
    // 新版不需要配置"eslint.validate", 增加ts, vue等支持
  // "eslint.validate": [
  //   "javascript",
  //   "javascriptreact",
  //   "typescript",
  //   "typescriptreact"
  // ],
  "editor.formatOnSave": false,// 保存时, 禁止触发其他扩展格式化代码, 如Prettier
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true// 保存时, 运行ESLint检测并格式化代码
  }
}