一、安装react+ts

npx create-react-app my-app --template typescript

二、安装eslint代码检测

一个好的项目必须有一个规范，所以得安装eslint代码检测

yarn add eslint
npx eslint --init

eslint初始化后会出现三个项目，根据项目而定

1、使用什么样的eslint？(这里我选择3)

To check syntax only // 只检测语法性错误
To check syntax and find problems // 检查语法错误并发现问题代码
To check syntax, find problems, and enforce code style // 检查语法错误，发现问题代码，校验代码风格

2、项目使用什么类型的模块？(这里我选择1)

JavaScript modules (import/export) // 允许import/export
CommonJS (require/exports) // 允许require/exports
None of these // 没有任何模块化

3、项目使用哪个框架？(选择1)

React
Vue.js
None of these

4、项目使用Ts？(Yes)

Does your project use TypeScript? › No / Yes

5、代码运行环境？(浏览器)

Browser // 浏览器
Node // node环境

6、如何定义项目定义样式？(使用流行的风格指南)

Use a popular style guide // 使用流行的风格指南
Answer questions about your style // 问答定义形成一个风格

7、遵循哪一种流行风格？(可以根据自己项目所需定义，我选Airbnb)

Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo

8、你希望你的配置文件是什么格式的？(JavaScript，其它的可以自行百度)

JavaScript
YAML
JSON

9、你现在就安装他们吗？(Yes，yarn)

npm
yarn
pnpm

安装完成后会在项目根目录生成.eslitrc.js文件，然后改一下规则(可以根据自己需求增减规则)

module.exports = {env: {browser: true,es2021: true,},extends: ['plugin:react/recommended','airbnb',],parser: '@typescript-eslint/parser',parserOptions: {ecmaFeatures: {tsx: true,},ecmaVersion: 'latest',sourceType: 'module',},plugins: ['react','@typescript-eslint',],rules: {'react/jsx-filename-extension': [2,{ 'extensions': ['ts', 'tsx'] }],'import/no-unresolved': 0,'import/extensions': 0,// 最后一个对象属性要有逗号'comma-dangle': 1,// 定义但从未使用的变量'no-unused-vars': 1,// 赋值但从未使用'react/jsx-no-bind': 1,// 空标签'react/self-closing-comp': 0,// 具有单击处理程序的可见非交互元素必须至少有一个键盘侦听器'jsx-a11y/click-events-have-key-events': 0,// 具有“按钮”交互作用的元素必须是可聚焦的'jsx-a11y/interactive-supports-focus': 0,// 带有事件处理程序的静态HTML元素需要一个角色'jsx-a11y/no-static-element-interactions': 0,// return ;'semi-spacing': 0,// <>只包含不能只包含一个标签'react/jsx-no-useless-fragment': 0,// 值对于布尔属性必须省略'react/jsx-boolean-value': 0,// 必须默认导出'import/prefer-default-export': 0,// 默认变量放到最后一个'default-param-last': 0,// 对参数进行赋值'no-param-reassign': 0,// 使用未声明的函数'no-use-before-define': 0,'no-new': 0,// 不能使用自增'no-plusplus': 0,// button必须是静态type'react/button-has-type': 0,},
};

三、安装customize-cra

customize-cra是依赖于react-app-rewired的库，通过config-overrides.js来修改底层的webpack，label配置。

1、安装依赖

yarn add react-app-rewired customize-cra --save-dev

四、安装node-sass

1、安装node-sass插件并安装资源加载器(做全局scss引用)

yarn add node-sass
yarn add sass-resources-loader // 资源加载器

2、先改package.json文件(找到scripts改为如下代码)

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"
},

3、根目录下创建config-overrides.js文件(此时我的项目文件结构如下图)
在这里插入图片描述

4、添加全局scss(在config-overrides.js文件下添加如下代码)

const {override,addWebpackModuleRule,
} = require('customize-cra');module.exports = override(// scss全局变量addWebpackModuleRule({test: /\.scss$/,use: ['style-loader','css-loader','sass-loader',{loader: 'sass-resources-loader',options: {// 注意在项目中新增/src/assets/scss/varable.scss文件resources: ['./src/assets/scss/varable.scss'],},},],}),
);

5、添加@别名指向src目录(React默认没有像vue有@别名)修改config-overrides.js文件，代码如下

const {override,addWebpackAlias,addWebpackModuleRule,
} = require('customize-cra');
const path = require('path');module.exports = override(// @别名addWebpackAlias({'@': path.resolve('./src'),}),// scss全局变量addWebpackModuleRule({test: /\.scss$/,use: ['style-loader','css-loader','sass-loader',{loader: 'sass-resources-loader',options: {resources: ['./src/assets/scss/varable.scss'],},},],}),
);

然后在根目录下tsconfig.json文件更改代码如下

{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["./src/*"]},"target": "es5","lib": ["dom","dom.iterable","esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx"},"include": ["src"]
}

6、开发环境打开devloop配置，为了更好定位代码中报错(修改config-overrides.js)，代码如下

const {override,addWebpackAlias,addWebpackModuleRule,
} = require('customize-cra');
const path = require('path');module.exports = override((config) => {config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;return config;},// @别名addWebpackAlias({'@': path.resolve('./src'),}),// scss全局变量addWebpackModuleRule({test: /\.scss$/,use: ['style-loader','css-loader','sass-loader',{loader: 'sass-resources-loader',options: {resources: ['./src/assets/scss/varable.scss'],},},],}),
);

五、项目运行

因为直接开启eslist的缘故，所以直接运行会报eslist，默认的项目这里需要更改两个地方

1、App.tsx文件更改为

import React from 'react';
import logo from './logo.svg';
import './App.css';function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}export default App;

2、reportWebVitals.ts

import { ReportHandler } from 'web-vitals';const reportWebVitals = (onPerfEntry?: ReportHandler) => {if (onPerfEntry && onPerfEntry instanceof Function) {import('web-vitals').then(({getCLS,getFID,getFCP,getLCP,getTTFB,}) => {getCLS(onPerfEntry);getFID(onPerfEntry);getFCP(onPerfEntry);getLCP(onPerfEntry);getTTFB(onPerfEntry);});}
};export default reportWebVitals;

3、之后直接yarn start运行项目即可，如果发现有不合适的地方欢迎大家指出，共同学习