一. 添加typescript
用 yarn create react-app my-app --typescript 創建基礎項目，
用 yarn add typescript @types/node @types/react @types/react-dom @types/jest 添加typescript，
將所有的js文件改為ts或tsx文件，添加相應的類型，
在src中添加types文件夾用來放.d.tsw文件
運行yarn start即可自動生成 tsconfig.json 等ts配置
二. 添加sass支持
將css文件改為scss文件，安裝node-sass依賴，
安裝@craco/craco依賴支持自定義webpack配置，更改package.json中scripts命令為craco，如
"scripts": { "start": "craco start", "build": "craco build", "test": "craco test" },
添加craco配置文件craco.config.js，安裝craco-sass-resources-loader依賴支持全局scss變量，如
const sassResourcesLoader = require('craco-sass-resources-loader')
const path = require("path")
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
webpack: {
// 配置別名
alias: {
"@": resolve("src"),
}
},
plugins: [
// 添加scss全局變量
{
plugin: sassResourcesLoader,
options: {
resources: [
'./src/assets/sass/global.scss',
],
},
},
],
}
三.添加eslint支持，提交前檢查
安裝依賴：
module.exports = { // 以當前目錄為根目錄，不再向上查找 root: true, // 運行環境 env: { browser: true, // 支持瀏覽器全局變量 es6: true, // 支持es6全局變量 node: true, // 支持node環境全局變量 jest: true, // 支持jest測試全局變量 }, // 使用的擴展庫 extends: [ 'react-app', // eslint-config-react-app create-react-app使用的可共享配置 'react-app/jest', // eslint-config-react-app支持eslint-plugin-jest 'standard', // eslint-config-standard ], // 配置全局變量，值為 false 表示這個全局變量不允許被重新賦值 globals: { Atomics: 'readonly', SharedArrayBuffer: 'readonly' }, // 指定eslint解析器 parser: '@typescript-eslint/parser', // // 解析器配置 // parserOptions: { // }, // 第三方插件 plugins: [ 'react', // react語法檢查 'react-hooks', // hooks語法檢查 'jest', // jest語法檢查 '@typescript-eslint', // ts語法檢查 ], // 共享設置 settings: { react: { version: 'detect' // 自動檢測當前安裝的react版本 } }, // 規則 rules: { 'eol-last': 0, // 關閉文件末尾強制換行 'no-multiple-empty-lines': [1, { 'max': 3 }], // 空行最多不能超過3行 'indent': [1, 2], // 縮進2個空格 'import/first': 1, // import必須在文件頂端 'spaced-comment': 1, // 注釋符號后必須有空格 'no-trailing-spaces': 0, // 關閉尾隨空白限制 'space-before-blocks': [1, 'always'], // 不以新行開始的塊{前面要有空格 'space-before-function-paren': [1, 'always'], // 定義函數時括號前面要有空格 'object-curly-spacing': [1, 'always'], // 大括號內總是有空格 'padded-blocks': 0, // 關閉塊內上下空行限制 'comma-dangle': [1, { // 當最后一個元素或屬性與閉括號 ] 或 } 在 不同的行時，允許（但不要求）使用拖尾逗號 'arrays': 'only-multiline', 'objects': 'only-multiline', 'imports': 'only-multiline', 'exports': 'only-multiline', 'functions': 'never' }], 'operator-linebreak': [1, 'after'], // 語句太長時，運算符放在行位 'react/display-name': 0, // 關閉組件名檢查 'no-unused-vars': 0, // 關閉未使用變量，typescript中已有規則 'quote-props': 0, // 關閉判斷是否使用引號 'jest/valid-describe': 0, // 報錯該規則找不到，臨時關閉 'no-use-before-define': 0, // @typescript-eslint/eslint-plugin和react-scripts所用eslint版本沖突，臨時關閉 } }
添加腳本命令，如
"lint": "eslint --ext .js,.ts,.tsx .",
"lint-fix": "eslint --fix --ext .js,.ts,.tsx ."
安裝pre-commit依賴，在package.json中添加
"pre-commit": [ "lint" ],
遇到問題：
1.開始安裝了eslint依賴，但是與react-scripts中eslint版本沖突，解決方法刪除自己安裝的eslint依賴
2.運行yarn lint 后報React在未定義前使用，@typescript-eslint/eslint-plugin和react-scripts所用eslint規則沖突，解決方法臨時關閉no-use-before-define規則，等待react-scripts升級
三.添加stylelint支持
安裝依賴：
postcss
postcss-scss
stylelint
stylelint-config-recess-order
stylelint-config-standard
stylelint-scss
添加.stylelintrc.js配置文件，如
/**** * stylelint配置 ****/ module.exports = { // 使用的擴展庫 extends: [ 'stylelint-config-standard', // 標准的規則配置 'stylelint-config-recess-order', // css屬性書寫順序規則 ], // 第三方插件 plugins: [ 'stylelint-scss', // 支持scss ], overrides: [ { files: ["src/**/*.scss"], customSyntax: "postcss-scss" } ], rules: { 'selector-max-id': 0, // id選擇器最多嵌套層數 'max-empty-lines': 3, // 最多空行 'rule-empty-line-before': null, // 去掉規則塊前空行的規則 'selector-list-comma-newline-after': 'always-multi-line', // 選擇器列表多行時，在逗號后面總是新行 'at-rule-no-unknown': null, // 屏蔽原生未知規則檢查 'scss/at-rule-no-unknown': true, // 使用scss插件中未知規則檢查 'declaration-block-trailing-semicolon': null, // 代碼塊中最后一項聲明的分號限制，在jsx語法style屬性中和eslint沖突 'no-descending-specificity': null, // 優先級更高的允許寫在前面 'font-family-no-missing-generic-family-keyword': null, // 允許font-family缺少泛型系列 'value-keyword-case': null, // 會改變js中style屬性的值，因此關閉 'color-function-notation': null, // 關閉顏色函數檢查 'selector-class-pattern': null, // 關閉指定類名格式 'font-family-name-quotes': null, // 關閉指定字體名引號規則 'alpha-value-notation': null, // 關閉透明度值格式指定 'value-no-vendor-prefix': null, // 關閉沒有供應商前綴限制 } }
添加腳本命令，如
安裝pre-commit依賴，在package.json中添加
四.添加react-router，redux，antd，axios，反向代理，ahooks
問題：
1、別名路徑找不到，解決方法
// 在tsconfig.json中設置compilerOptions.paths，但是每次運行start命令會被刪除，需要額外添加tsconfig-paths.json文件，內容如下 "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], } } 在tsconfig.json中添加 "extends": "./tsconfig-paths.json"
但是運行start命令還會報 compilerOptions.paths must not be set (aliased imports are not supported)，
如果想去掉這個警告，那只有舍棄別名
// 在tsconfig.json中添加 "baseUrl": ".", // 然后在所有使用別名的地方修改，如 import Home from '@/pages/home' // 改為 import Home from 'src/pages/home'