create-react-app集成Prettier

脚手架带来的便捷

进入前端工作也有一些时间了，我们的前端开发也从必须经过千千万万的配置到执行某某一切就可以开始工作了。

我想每个人接触到create-react-app的时候都是惊讶的，原来开始一个应用可以这么简单。

你可以完全不用理会webpack和babel的安装和配置

你只需要专注于react和应用本身

问题

虽然creact-react-app内置了eslint，但是这个对于我们编码已经足够了么？

我曾经写过好几页的wiki，上面写满了各种编码规范，甚至常见的情况似乎是通过会议以提出公司编码标准，但是收效微乎其微，团队产生的代码还是具有强烈的个人特色。如果你发现了这个问题，我们必须通过工具来约束人。

声明

这不是一篇create-react-app和prettier的入门教程，如需相关内容，请自行查找。

Periiter官网

1. 编辑器

因为我自己用的就是VS code，这里以它为例，其他编辑器可以找到相关的解决方案，安装相关扩展：

Eslint

Prittier

2. 安装依赖

需要安装 prettier package和ESLint Prettier插件。这个插件是当代码不符合prettier的规则时会通过eslint报错，在编辑器上会出现红色的小波浪线。

yarn add  prettier
yarn add  eslint-plugin-prettier
复制代码

3. 创建eslint配置文件，很简单

在根目录下创建.eslintrc文件，内容如下：

{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
复制代码

你如果需要自定义Prettier，创建prettier.config.js，我的配置如下：

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  parser: 'babylon',
  semi: true,
};

复制代码

总结

可配置的自动代码格式化可以节省很多开发时间，对代码的后期维护更有帮助，而且这个过程确实很简单。个人觉得能用工具完成的任务比用文字规范会更好，但是这一套不一定是必需的或者是最好的，如果你发现这个不适合你，你可以自己找一个适合项目或者开发环境的，欢迎留言。

个人爱好：前端自动化，工程化。

注：这一篇不是入门级别的，但是只要稍微去看一下prettier的文档，应该很快就能上手的。