【项目】React 代码规范配置

最新推荐文章于 2024-08-09 22:49:36 发布

Web_boom

最新推荐文章于 2024-08-09 22:49:36 发布

阅读量708

点赞数

文章标签： react.js 代码规范 javascript

本文链接：https://blog.csdn.net/Android_boom/article/details/127396791

版权

本文介绍了如何在React项目中配置代码规范，包括使用Prettier进行代码格式化，设置Eslint规则，以及定义提交规范。通过安装相关依赖，配置`.prettierrc`和`.eslintrc`文件，以及启用`husky`和`commitlint`，确保每次提交都符合预设的代码风格。此外，还涉及到了如何忽略特定文件和配置样式格式化。

摘要由CSDN通过智能技术生成

配置`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"eslintInteg