还没有来得及跟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
复制代码
支持 .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
复制代码
如果大家有更好的做法或是建议,欢迎留言告诉我。