React项目工程化（二）集成Prettier实现代码格式化

这部分主要是基于eslint引入后，集成Prettier，达到可以使用eslint的同时，通过Prettier自动格式化代码。

Step 1、依赖安装

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

Step 2、修改.eslintrc.js文件

module.exports = {
  ...
  extends: ["plugin:react/recommended", "prettier"], // 加了prettier
  ...
}

Step 3、添加.prettierrc.js文件

// 根目录下，内容可配置，详细看官方文档 https://prettier.io/docs/en/options.html
module.exports = {
    printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
    tabWidth: 2, //一个tab代表几个空格数，默认为2
    semi: true, // 是否有冒号结尾，是
    singleQuote: false, // 是否单引号，是
    trailingComma: "none", 
}

Step 3、编辑器安装插件

image.png

在此，只要使用编辑器自带的格式化工具，比如右键 - 格式化文本，或者设置了编辑器auto format on save，就会按照要求自动格式化了

PS:
建议同级添加ignore文件.prettierignore，内容如下：

**/node_modules/*
build
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容