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

使用npx創建項目

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

配置sass

yarn add node-sass [email protected] --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
}
]