配置 React + TypeScript 开发环境

配置 React + TypeScript 开发环境

Tags
React
TypeScript
Published date
May 23, 2022
Description
快速搭建 React 开发脚手架

创建 React 工程

使用以下命令创建一个 React + TypeScript 工程:
yarn create react-app my-app --template typescript
为了便于资源引用,在 tsconfig.json 中加上 baseUrl 属性:
{ "compilerOptions": { "baseUrl": "src", "target": "es5", ...

配置 ESLint 和 Prettier

安装 ESLint

yarn add -D eslint
💡
ESLint 是一个代码检查工具,用来检查你的代码是否符合指定的规范。
ESLint 初始化:
yarn create @eslint/config
按需求设置,针对 React 和 TypeScript 配置。
因为 ESLint 配置使用一些变量和简单判断会让配置更简单,所以我选择了 JavaScript 配置。 使用流行的 Airbnb 规则:
√ How would you like to use ESLint? · style √ What type of modules does your project use? · esm √ Which framework does your project use? · react √ Does your project use TypeScript? · Yes √ Where does your code run? · browser √ How would you like to define a style for your project? · guide √ Which style guide do you want to follow? · airbnb √ What format do you want your config file to be in? · JavaScript Checking peerDependencies of eslint-config-airbnb@latest Local ESLint installation not found. The config that you've selected requires the following dependencies: eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest 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 @typescript-eslint/parser@latest √ Would you like to install them now? · Yes √ Which package manager do you want to use? · yarn
各个包的作用说明:
  • eslint-plugin-react:React 语法规则
  • @typescript-eslint/parser:TypeScript 语法解析器
  • @typescript-eslint/eslint-plugin:TypeScript 语法规则

安装额外的包

使用 TypeScript 进一步增强 Airbnb:
yarn add -D eslint-config-airbnb-typescript
自动删除未使用的导入:
yarn add -D eslint-plugin-unused-imports

安装 Prettier

yarn add -D --exact prettier
💡
Prettier 是一个代码格式化工具。 配合 ESLint 使用,可以按照 ESLint 设定的规则对代码进行格式化。
安装 ESLint 的 Prettier 相关依赖:
yarn add -D eslint-config-prettier eslint-plugin-prettier
各个包的作用说明:
  • eslint-config-prettier:禁用与 Prettier 有冲突的 ESLint 规则
  • eslint-plugin-prettier:将 Prettier 作为 ESLint 的规则来运行,这样就可以通过 ESLint 的 --fix 来自动修复代码了
创建配置文件 .prettierrc
{ "printWidth": 120, "singleQuote": true, "semi": false, "trailingComma": "es5", "tabWidth": 2, "useTabs": false }
.prettierrc.json
编辑 .eslintrc.js 来配置 ESLint:
完整的 ESLint 配置示例。
module.exports = { env: { browser: true, es2021: true, }, extends: [ 'airbnb', 'airbnb/hooks', 'airbnb-typescript', // 'plugin:react/recommended', // 因为 airbnb 规则已经包含了 react 规则,所以不需要再添加 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking', 'prettier', ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 'latest', sourceType: 'module', tsconfigRootDir: __dirname, project: ['tsconfig.json'], }, plugins: ['react', '@typescript-eslint', 'unused-imports'], ignorePatterns: ['build'], // 忽略指定目录 rules: { 'no-use-before-define': 'off', '@typescript-eslint/no-use-before-define': ['error'], 'import/prefer-default-export': 'off', '@typescript-eslint/no-unused-vars': 'off', 'unused-imports/no-unused-imports': 'error', 'unused-imports/no-unused-vars': [ 'warn', { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' }, ], 'react/function-component-definition': [ 'error', { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function', }, ], 'no-param-reassign': ['error', { props: false }], // 允许修改参数的属性 'import/extensions': [ // 允许忽略导入文件的后缀名 'error', { js: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'react/jsx-filename-extension': [ // 允许使用 JSX 的文件后缀名 'error', { extensions: ['.jsx', '.tsx'], }, ], 'react/react-in-jsx-scope': 'off', // 允许不写导入 React(version >= 17) 'react/prop-types': 'off', // 关闭 React 的类型检查规则,而使用 TypeScript 检查 'no-void': [ // 允许 void 运算符 'error', { allowAsStatement: true, }, ], }, settings: { 'import/resolver': { // 允许在 src 中导入扩展名为 js、jsx、ts、tsx 的文件 node: { paths: ['src'], extensions: ['.js', '.jsx', '.ts', '.tsx'], }, }, }, }
.eslintrc.js
添加 ESLint 例外 .eslintignore 来排除不需要 lint 的文件或目录:
build/ public/ **/node_modules/ *.config.js .*lintrc.js /*.*
.eslintignore

自动化

为了方便对代码批量格式化,可以在 package.json 加入自动格式化的脚本:
... "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint --ext src/**/*.{js,jsx,ts,tsx}", "format": "eslint --cache --fix src/**/*.{js,jsx,ts,tsx} && prettier --write src/**/*.{js,jsx,ts,tsx}" }, ...
package.json
之后使用 yarn run lintyarn run format 就可以批量检查和修复错误了。