使用 ESLint + Prettier 美化代码

还没有来得及跟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

如果大家有更好的做法或是建议，欢迎留言告诉我。