本节重点说明如何将 Prettier 集成到 Eslint 代码检测工具中。

eslint-config-prettier

首先要清楚的一点是，Prettier 与 Eslint 的部分 rules 设置是存在冲突的。

如果不作任何变更，那么在使用 Eslint 格式化成功的代码，往往在经过 Prettier 格式化后，又会重新变乱。

因此，我们需要利用eslint-config-prettier将 Eslint 中代码格式化的功能关闭。

也就是说，通过配置 eslint-config-prettier 能将代码格式化功能交给 Prettier 处理，Eslint 专心做静态代码检测即可。

eslint-plugin-prettier

通过 eslint-config-prettier 关闭了冲突 rules 还不够，我们还需要使用 Prettier 的自定义规则。

因此就需要利用eslint-plugin-prettier。

在 .eslintrc 中直接使用 plugin:prettier/recommended 即可：

module.exports = {
	root: true,
	env: {
		node: true
	},
	extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
	parserOptions: {
		// @babel/eslint-parser can transform new grammar better than default espree
		parser: '@babel/eslint-parser'
	},
	rules: {
		'no-unused-vars': [
			'error',
			{
				// Don't lint unused function params
				args: 'none'
			}
		]
	}
}

查阅 eslint-plugin-prettier 的 recommended 源码会发现，它的核心功能是：

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

也就说 eslint-plugin-prettier 已经自动帮助使用者引入了 eslint-config-prettier。