搭建环境 react + ts + sass + antd + eslint

使用npx创建项目

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

配置sass

yarn add node-sass sass-loader@7.3.1 --dev

有时因为 node-sass 被墙了，安装不上，可以用 cnpm

全局安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

再用cnpm安装 node-sass

cnpm node-sass

         //webpack.config.js,在file-loader之前加
        {
            test: [/\.scss$/],
            loaders: ["style-loader", "css-loader", "sass-loader"]
        },

安装 ESLint 解析 TypeScript 的依赖

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

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

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

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

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

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

1.告诉ESLint 怎样正确解析 TypeScript 代码，并且使用了一组推荐的插件规则

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

2.将为 React 添加基本规则, 由 Create React App 团队提供

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

安装 prettier 依赖

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

安装 prettier 依赖

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

1. prettier: 格式化规则程序
2. eslint-config-prettier: 将禁用任何可能干扰现有 prettier 规则的 linting 规则
3. 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: {},
};

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
}
]