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