React前端加速开发工具的学习笔记-一一网

最近入坑了React，并且学习了一些前端工程化的设置。在这里记录一下，从头开始。

在github上面创建一个新的仓库，并且用create-react-app脚手架搭建一个新的项目。并第一次把代码同步到git repo.
git remote add origin https://github.com
git branch -M main
git push -u origin main
设定绝对目录 这个是为了构建大型项目的工程化设置，首先要解决的第一个问题是文件引入的路径问题，当项目过大的时候，有时引入文件需要使用多层嵌套的相对路径，这有两个弊端，第一是容易出错，第二是当文件位置有调整的时候，很多引用了他的文件也需要调整引用的相对路径，所以我们设置一个绝对路径的入口，这样就可以根据路径的深度来选择相对路径或者绝对路径。
– 项目根目录创建或者打开 jsconfig.json文件并添加如下内容. 完成这一步设置之后，文件引用的默认初始位置为 src文件夹下。
```
{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}
复制代码
```
自动格式化，虽然 vs code提供了prettier插件，但是由于操作系统，版本等原因导致格式化的默认格式不同，所以我们希望一个team在代码提交时，可以做统一的自动代码格式化。prettier的连接在https://prettier.io/docs/en/install.html
安装 prettier

npm install --save-dev --save-exact prettier
装好之后
echo {}> .prettierrc.json

再创建一个 .prettierignore 文件，并添加

# Ignore artifacts: build coverage

现在prettier已经安装好了，我们已经有了格式化代码的能力，但是并没有自动化格式代码的能力，prettier提供了pre-commit hook这样一个方法来自动化格式提交的代码。
先安装 lint-staged
npx mrm@2 lint-staged
装好之后，打开项目的package.json文件可以看到

里面的文件格式代表当前prettier可以格式化的文件格式，添加其他希望格式化的文件格式，

为了防止 eslint与prettier出现兼容问题，还需要安装 eslint-config-prettier
npm install --save-dev eslint-config-prettier
装好之后，在package.json文件中在eslintConfig 选项里的extends数组里添加 “prettier”选项，添加在最后以确保prettier规则覆盖前面的其他规则。

全部配置好之后，代码就可以在提交时自动格式化了。
自动化import 项目开发过程中，引入其他文件是一个不必要但是又必须有的操作，好在可以通过一些设置自动引入。打开jsconfig.json，添加 “jsx”:”react”选项，

打开vs code设置，搜索框中搜索 trigger expansion 勾选 tab展开

搜索word based suggestion，勾选 Controls… 设置 suggestions mode 为 alldocuments

现在自动import就配置好了。
React片段插件 VS Code 里有一个 ES7 React/Redux 插件，可以自动补全大段的代码片段。根据首字母缩写补全片段，可以读一下手册

Commit Message 限制 提交代码时我们希望对message有一些限制，避免出现message信息过于简单以后无法辨认或者其他开发人员无法辨认的情况。使用 commitlint.
安装
npm install -g @commitlint/cli @commitlint/config-conventional
配置echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
配置 husky npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
配置完毕，测试提交message。提交不符合规范得到如下错误信息。

规则详情可以查看github.com/conventiona…