一、项目搭建
1、构建命令行
npx create-react-app create-react --template typescript
生成目录结构:
2、项目基础配置
(1)craco配置webpack
为什么使用craco
使用create-react-app
创建的项目默认是无法修改其内部的webpack
配置的, 只能使用eject
命令将配置完全暴露出来,但这是一个不可逆的操作,复杂的webpack
等配置将由框架本身转交给用户自己进行维护。但实际需求中我们还是需要更新webpack
、babel
的配置,此时我们就能借助craco
来覆盖webpack
的配置。
配置步骤
- 安装
craco
依赖
npm install --save @craco/craco
npm install --save craco-less
- 在项目根目录下创建配置文件
craco.config.js
const CracoLessPlagin = require('craco-less')
const path = require('path')
const resolve = (dir) => path.resolve(__dirname, dir)
module.exports = {
plugins: [{
plugin: CracoLessPlagin }],
// 修改 webpack 配置
webpack: {
alias: {
'@': resolve('src'),
}
},
// 修改 babel 配置
babel: {
// ...
},
// 修改 eslint 配置
eslint: {
// ...
},
devServer: {
proxy: {
}
}
};
- 修改
package.json
中的scripts
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
(2)配置@快捷路径导入
在tsconfig.json
文件中加:
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
此时启动项目可能出现报错
“@babel/plugin-proposal-private-property-in-object” package without
declaring it in its dependencies. This is currently working because
“@babel/plugin-proposal-private-property-in-object” is already in your
node_modules folder for unrelated reasons, but it may break at any time.
解决:
npm install --save-dev @babel/plugin-proposal-private-property-in-object
二、项目内容配置
1、配置Eslint和Prettier
(1)配置Eslint
Eslint
是一个在 JavaScript
代码中通过规则模式匹配作代码识别和报告的插件化的检测工具,它的目的是保证代码规范的一致性和及时发现代码问题,提前避免错误发生。使用Eslint
可以极大的提高项目中多人协作开发时的效率、代码的可读性以及可维护性。
- 安装Eslint
npm install eslint --save-dev
- 初始化
npx eslint --init
install
相关插件
npm install @typescript-eslint/eslint-plugin eslint-plugin-react @typescript-eslint/parser --save-dev
- 生成
.eslintrc.js
文件并修改:
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
root: true,
extends: [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:@typescript-eslint/recommended",
],
overrides: [],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
plugins: ["react", "@typescript-eslint"],
rules: {
"no-undef": 2,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-non-null-assertion": 0,
"@typescript-eslint/no-var-requires": 0,
},
};
此处如果出现插件@typescript-eslint
冲突情况,记得检查package.json和.eslintrc.js文件内容是否有引入版本不同导致的冲突情况。
.eslintrc.js
文件中第一行有报错或警告,需要添加一个.eslintignore
文件,把.eslintrc.js
添加到忽略文件即可:
.eslintignore
文件内容:
.eslintrc.js
build/*.js
coverage
.vscode/*
public/*
- 在
vscode
中安装eslint
插件
(2)配置Prettier
Prettie
在美化代码方面有很大的优势,并不具有lint检查语法等能力,配合ESLint
可以对ESLint格式化基础上做一个很好的补充。
- 安装
Prettier
npm install prettier --save-dev
- 配置
Prettier
规则
在项目根目录新建.prettierrc.js
:
module.exports = {
// 1.一行代码的最大字符数,默认是80(printWidth: <int>)
printWidth: 120,
// 2.tab宽度为2空格(tabWidth: <int>)
tabWidth: 2,
// 3.是否使用tab来缩进,我们使用空格(useTabs: <bool>)
useTabs: false,
// 4.结尾是否添加分号,false的情况下只会在一些导致ASI错误的其工况下在开头加分号,我选择无分号结尾的风格(semi: <bool>)
semi: true,
// 5.使用单引号(singleQuote: <bool>)
singleQuote: true,
// 6.object对象中key值是否加引号(quoteProps: "<as-needed|consistent|preserve>")as-needed只有在需求要的情况下加引号,consistent是有一个需要引号就统一加,preserve是保留用户输入的引号
quoteProps: "as-needed",
// 7.在jsx文件中的引号需要单独设置(jsxSingleQuote: <bool>)
jsxSingleQuote: false,
// 8.尾部逗号设置,es5是尾部逗号兼容es5,none就是没有尾部逗号,all是指所有可能的情况,需要node8和es2017以上的环境。(trailingComma: "<es5|none|all>")
trailingComma: "es5",
// 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
bracketSpacing: true,
// 10.jsx标签多行属性写法时,尖括号是否另起一行(jsxBracketSameLine: <bool>)
jsxBracketSameLine: false,
// 11.箭头函数单个参数的情况是否省略括号,默认always是总是带括号(arrowParens: "<always|avoid>")
arrowParens: