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的文档，应该很快就能上手的。