CreateReactApp 是學(xué)習(xí) React 的必經(jīng)之路锌雀，其本身也值得深入學(xué)習(xí)，本文記錄了如何給該腳手架添加一些額外功能
修改啟動(dòng)端口
根目錄創(chuàng)建 .env.development 文件优幸，寫(xiě)入
PORT=4000
代碼包體積分析
安裝插件
npm install --save source-map-explorer
// 或
yarn add source-map-explorer
添加配置命令：在 package.json 中添加以下命令
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
}
執(zhí)行打包命令后就可以使用命令分析打包后的代碼包了
npm run build
npm run analyze
集成 Eslint 和 Prettier
使用前提：VSCode 安裝并啟用了 Eslint 和 Prettier 插件涂滴，才會(huì)在編輯器中顯示提示信息
配置 Eslint
安裝并初始化配置
// 安裝 eslint 插件
npm install eslint --save-dev
// 初始化 eslint 配置
npm init @eslint/config
執(zhí)行初始化命令后，根據(jù)提示和需要選擇自己想要的配置，選在配置文件類(lèi)型時(shí)
What format do you want your config file to be in?
建議選擇 JacaScript一疯，方便寫(xiě)注釋。上述所有命令執(zhí)行完成后會(huì)自動(dòng)安裝以下幾個(gè)插件（版本可能會(huì)有變動(dòng)）, 并生成一個(gè) .eslintrc.js 文件
// 安裝的插件
eslint-plugin-react@^7.28.0
eslint-config-airbnb@latest
eslint@^7.32.0 || ^8.2.0
eslint-plugin-import@^2.25.3
eslint-plugin-jsx-a11y@^6.5.1
eslint-plugin-react-hooks@^4.3.0
附上生成的 .eslintrc.js 作參考：
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
// rules 根據(jù)自己的需要配置
},
};
配置 Prettier
安裝 prettier 插件
// 安裝 prettier
npm install --save-dev prettier
根目錄創(chuàng)建 prettier.config.js 配置文件夺姑，根據(jù)自己的需要配置格式化的規(guī)范墩邀，如：
// prettier.config.js
module.exports = {
printWidth: 180, // 代碼換行的字符長(zhǎng)度
tabWidth: 2,
};
同時(shí)使用
由于 Eslint 和 Prettier 對(duì)會(huì)檢測(cè)代碼語(yǔ)法，同時(shí)使用時(shí)有可能造成規(guī)則沖突盏浙，因此需要額外安裝一些 插件眉睹，從而避免兩者的語(yǔ)法檢查產(chǎn)生沖突
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
安裝完成后，在 eslint 的配置文件中加入 "plugin:prettier/recommended"
// .eslintrc.js
{
"extends": [
"plugin:prettier/recommended"
]
}
到這里就已經(jīng)配置好了废膘，可以放手開(kāi)擼了竹海，最好是重啟一下編輯器，部分沖突的配置需要重啟后才會(huì)生效丐黄。
常見(jiàn)錯(cuò)誤解決
Delete ? eslint prettier/prettier
以上錯(cuò)誤是由于行尾序列不一致導(dǎo)致的斋配，只需要在 .prettier.config.js 中加入
{
endOfLine: 'auto'
}
其他解決辦法可根據(jù)報(bào)錯(cuò)信息自行搜索。
'React' must be in scope when using JSX react/react-in-jsx-scope
解決方案一：在所有使用到 react 語(yǔ)法的文件頂部引入 React
import React from 'react';
解決方案二：在 .eslintrc.js 配置文件中灌闺，給 extends 字段添加 plugin:react/jsx-runtime 表示兼容 jsx 新的語(yǔ)法
extends: [
'eslint:recommended',
'plugin:react/jsx-runtime', // 兼容 jsx 新的語(yǔ)法
]
