还没有来得及跟2018年说声再见，2019年的第一个工作周也结束了。原本打算在18年末就应该完成的React项目升级，因为种种原因，导致现在才开始。将React从15.4升级到16.7的过程掉进了不少坑，但是最头痛还是杂乱无章的代码。由于项目前期并没有使用 ESLint 等约束，因此导致代码风格是千姿百态，分号忽隐忽现、tab和空格、2个空格和4空格等。
为了快速解决这些代码风格差异，我选择使用 ESLint 和 Prettier。搭配 VS Code 编辑器的“保存自动修复”功能，可谓是美化代码的神器。
ESLint
ESLint 是一个开源的 JavaScript 代码检查工具，能让我们在开发的过程中及时发现问题，同时也提供了根据 ESLint 规则来格式化代码的CLI命令。因此我们在配置好规则后可以通过 --fix 命令自动修复代码风格。
eslint --fix *.js
复制代码Prettier
Prettier 与 ESLint 不同，ESLint 主要的目的是代码检查。而 Prettier 是为了让代码风格“更漂亮”。Prettier 并不局限于 JavaScript 代码的格式化。还支持 TypeScript 、 Flow 、 CSS 、JSX 、 HTML 、 GraphQL 、 JSON等。
使用 Prettier 也很简单：
1、安装 Prettier
npm install --global prettier
复制代码2、配置 Prettier
支持 .js|.json|.yaml|.yml 等后缀，具体配置信息可查阅官网
// prettier.config.js or .prettierrc.js
module.exports = {
trailingComma: 'es5',
singleQuote: true,
printWidth: 200,
};
复制代码3、格式化代码
通过 CLI 命令 prettier [opts] [filename ...] 来指定需要格式化的文件夹或是文件。具体参数请查阅官网
prettier --write [filename ...]
复制代码如果需要与 ESLint 一起使用，只需使用 eslint-plugin-prettier 将 Prettier 添加为 ESLint 规则。
npm install --save-dev eslint-plugin-prettier
复制代码.eslintrc.json：
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
复制代码VS Code 配置
首先安装 ESLint 扩展，然后修改用户设置 首选项 -> 设置
关键配置如下：
"eslint.autoFixOnSave": true
复制代码总结
虽然可以将 Prettier 添加为 ESLint 规则。但是两者搭配一起使用可能会存在冲突。由于 Prettier 的可配置项比 ESlint 少太多了，所以冲突发生时，往往是通过修改 ESLint 规则（eslint-config-prettier）来避免错误的出现，这点并不是我想要的。为了解决这个冲突问题，目前我的做法是：
1、先使用 Prettier 格式化整个项目
prettier --write [filename ...]
复制代码2、使用 ESLint 的 --fix 命令来修复 Prettier 带来的冲突。
eslint --fix *.js
复制代码如果大家有更好的做法或是建议，欢迎留言告诉我。