【项目】React 代码规范配置

配置prettier

1.使用npx初始化一个项目，这里我使用typescript模板的方式构建项目

npx create-react-app react-demo1 --template typescript 

2.参考官方的方式配置，官方地址3.安装插件包```
npm install --save-dev --save-exact prettier

4.在根目录下创建一个`.prettierrc`和`.prettierignore`的文件

* `prettierrc`文件是配置`prettier`规则的
* `.prettierignore`是配置不需要`prettier`的文件，有点类似`.gitignore`的作用

5.在`.prettierignore`配置

build
coverage

6.在`.prettierc`中配置，以下是我自己项目中配置的，仅供参考

{“prettier.semi”: true,“singleQuote”: true,“trailingComma”: “es5”,“printWidth”: 100,“tabWidth”: 2,“endOfLine”: “auto”,“arrowParens”: “always”
}

[Options · Prettier](https://link.juejin.cn/?target=https%3A%2F%2Fprettier.io%2Fdocs%2Fen%2Foptions.html "https://prettier.io/docs/en/options.html")，以下是文字说明。

{“printWidth”: 100, // 超过最大值换行"tabWidth": 4, // 缩进字节数"useTabs": false, // 缩进不使用tab，使用空格"semi": true, // 句尾添加分号"singleQuote": true, // 使用单引号代替双引号"proseWrap": “preserve”, // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行"arrowParens": “avoid”, //(x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号"bracketSpacing": true, // 在对象，数组括号与文字之间加空格 “{ foo: bar }”“disableLanguages”: [“vue”], // 不格式化vue文件，vue文件的格式化单独设置"endOfLine": “auto”, // 结尾是 \n \r \n\r auto"eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验"htmlWhitespaceSensitivity": “ignore”,“ignorePath”: “.prettierignore”, // 不使用prettier格式化的文件填写在项目的.prettierignore文件中"jsxBracketSameLine": false, // 在jsx中把’>’ 是否单独放一行"jsxSingleQuote": false, // 在jsx中使用单引号代替双引号"parser": “babylon”, // 格式化的解析器，默认是babylon"requireConfig": false, // Require a ‘prettierconfig’ to format prettier"stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验"trailingComma": “es5”, // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）“tslintIntegration”: false // 不让prettier使用tslint的代码格式进行校验
}

7.由于`create-react-app`创建的项目自带了`eslint`的规范，我们又加一个`prettier`，自然会出现有冲突的时候，这时候我们就要告知使用谁的规范。可以简单的理解为优先级吧，[参考官网](https://link.juejin.cn/?target=https%3A%2F%2Fprettier.io%2Fdocs%2Fen%2Finstall.html%23eslint-and-other-linters "https://prettier.io/docs/en/install.html#eslint-and-other-linters")

* 安装依赖包

npm install eslint-config-prettier -D

* 在`package.json`中配置下

{ …“eslintConfig”: {“extends”: [“react-app”,“react-app/jest”,// 添加这行代码"prettier"]},…
}

配置`git`的钩子函数，对每次`commit`的时候就使用`prettier`格式化代码
---------------------------------------------

1.([参考官网](https://link.juejin.cn/?target=https%3A%2F%2Fprettier.io%2Fdocs%2Fen%2Fprecommit.html "https://prettier.io/docs/en/precommit.html")2.使用`npx`生成文件```
npx mrm lint-staged 

3.运行上面的命令会自动在package.json中添加配置

{"lint-staged":// 默认生成的// "*.{js,css,md}": "prettier --write"// 项目是要使用ts的话就要添加下"*.{ts,tsx,css,md}": "prettier --write"}
} 

4.在package.json中添加husky的提交钩子

{..."husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"*.{js,ts,tsx}": ["prettier --write",// 添加这行表示修复后会自动执行git add操作"git add"]}...
} 

5.修改下index.ts文件,将单引号改为双引号，把分号去掉，然后使用git提交代码查看文件是不是自动格式化了

配置git的提交规范

1.参考文档2.安装依赖包```
npm install --save-dev @commitlint/config-conventional @commitlint/cli

3.新建`commitlint.config.js`文件

module.exports = {extends: [‘@commitlint/config-conventional’],rules: {‘type-enum’: [2,‘always’,[‘upd’, ‘feat’, ‘fix’, ‘docs’, ‘style’, ‘refactor’, ‘test’, ‘chore’],],},
};

/**

• upd: 更新
• feat: 新增
• fix: 修复
• docs: 文档
• style: 样式
• refactor: 重构代码
• test: 单元测试
• chore: 构建过程或辅助工具的变动
  */

4.生成提示信息的

npx husky add .husky/commit-msg ‘npx --no-install commitlint --edit “$1”’

5.测试提交

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ed2912da391434fabdd0416e772c595~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image" style="margin: auto" />

6.每次提交代码的时候必须带上说明

git add .
git commit -m ‘feat: 新增代码’

配置`eslint`
----------

完成上面配置，每次提交代码都会自动帮我们格式化，但是我们更加希望在我们写代码的时候，每次保存代码的时候就能发现哪里不规范，这样提交代码的时候直接提交，不需要再来一个一个修改。

1.初始化`eslint`，等待一瞬间会在项目的根目录下生成一个`.eslintrc.js`的文件

npx eslint --init

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/858d87b47fcc4876a73ba0ae2b4e1991~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image" style="margin: auto" />

2.相对于的在项目的根目录下创建`.eslintignore`来忽视不需要检查的文件

注释，忽略文件

node_modules
src/serviceWorker.ts
src/react-app-env.d.ts
*.lock

3.我们配置的`prettier`那么我们就要对`eslint`和`prettier`兼容，[参考地址](https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Feslint-plugin-prettier "https://www.npmjs.com/package/eslint-plugin-prettier")

npm install eslint-plugin-prettiereslint-config-prettier -D

4.根据文档来配置5.现在`react`都是使用`hooks`开发了，自然也要配置这个规则，[参考地址](https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Feslint-plugin-react-hooks "https://www.npmjs.com/package/eslint-plugin-react-hooks")6.运行项目，手动删除一个分号或者单引号改为双引号7.参考一份`.eslintrc.js`配置文件```
module.exports = {env: {browser: true,es2021: true,},extends: ['react-app','eslint:recommended','plugin:react/recommended','plugin:@typescript-eslint/recommended','plugin:prettier/recommended','plugin:react-hooks/recommended',],parser: '@typescript-eslint/parser',parserOptions: {ecmaFeatures: {jsx: true,},ecmaVersion: 12,sourceType: 'module',},plugins: ['react', '@typescript-eslint', 'prettier', 'react-hooks'],rules: {'prettier/prettier': 'error','arrow-body-style': 'off','prefer-arrow-callback': 'off','react-hooks/rules-of-hooks': 'error','react-hooks/exhaustive-deps': 'warn',},
}; 

配置样式格式化

1.安装依赖包

npm install --save-dev stylelint stylelint-config-standard 

2.项目的根目录下创建文件.stylelintrc

{"extends": ["stylelint-config-standard"],"rules": {}
} 

3.在package.json中配置git钩子来格式化样式

{..."lint-staged": {"*.{js,ts,tsx}": ["prettier --write","git add"],// 针对css或者scss的样式格式化，如果你用less就继续加上"*.{css,scss}": ["stylelint src/**/*.css --fix","stylelint src/**/*.scss --fix"]}...
} 

4.在index.css中随便写点样式，然后使用git提交代码查看样式否格式化5.使用git提交代码的时候会比较慢，似乎还在拉取什么包，这时候建议删除node_modules然后重新安装编辑器规范

1.在项目下创建一个.editorconfig文件

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab 

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享