Eslint

在前端协作开发中，Eslint格外重要。在vscode中配合prettier使用时遇到一些问题，百度结果没有解决自己的问题，于是自己研究了一下。

Eslint和prettier结合使用

因为Eslint的格式化配置和prettier会有冲突，于是需要将它们结合起来使用
1. prettier优先
我们在项目根目录下创建一个.prettierrc.js的prettier配置文件。

在其中写好我们需要格式化的配置。
然后我们需要借助一个eslint-plugin-prettier 插件，他能使得eslint和prettier更好地配合使用。
但是这个插件不会帮我们安装eslint和prettier，所以需要我们手动安装。

yarn add -D eslint-plugin-prettier
yarn add -D -E prettier
yarn add -D eslint

eslint配置：
首先使用–init来初始化eslint配置，生成一个.eslintrc.js的配置文件

eslint --init

根据提示选择生成一份配置。
然后创建一个.eslintignore的配置文件，用来忽略对一些文件使用eslint

协调eslint和prettier配置：
在安装好eslint-plugin-prettier后，我们需要对他进行一些配置。
首先需要在。eslintrc.js的配置中加入prettier的相关配置

module.exports = {
	plugins: ["prettier"],   //使用prettier插件
	rules: {
		"prettier/prettier": ["error"]  //遇到prettier的格式化问题，直接报错
	}
};

然而，此时我们并没有解决eslint和prettier（这个时候prettier采用vscode的格式化配置）的格式化冲突的问题
比如我们使用prettier（vscode中使用shift+alt+f）格式化了js代码后，依然报错

可以发现eslint和prettier对于缩进的格式化有冲突。

eslint-plugin-prettier这个插件官方有个推荐配置：

要使得这个插件完美地运行，你可以禁止ESlint中关于代码格式化的配置
只保留语法检查（因为如果一个ESLint格式化规则和prettier不一致，还是有可能报错）。
你可以安装一个eslint-config-prettier来禁止ESLint关于格式化的规则。

所以我们还需要安装一个eslint-config-prettier插件

yarn add -D eslint-config-prettier

然后加入配置项 " plugin:prettier/recommended "

module.exports = {
	extends: ["standard", "plugin:prettier/recommended"],  //extends的最后加入
	plugins: ["prettier"],
	rules: {
		"prettier/prettier": ["error"]
	}
};

这个时候我们可以采用两种方式：

• 使得eslint和prettier的配置一样，比如在eslint配置中写入和vscode的prettier插件一样的配置

module.exports = {
	extends: ["standard", "plugin:prettier/recommended"],
	plugins: ["prettier"],
	rules: {  //第一种方式
		"prettier/prettier": [
			"error",
			{	//“prettier/prettier”的第二个数组成员可以写个prettier配置对象
				"tabWidth": 4,   //这里我们对缩进进行了配置
				"useTabs": true
			}
		]
	}
};

这样我们可以解决两边配置不一样的问题，但是太麻烦（要保证两边的配置一样）

• 第二中方式就是写一个.prettierrc.js的prettier配置文件，使得 eslint-plugin-prettier和vscode自带的prettier同时读取这一个prettier配置，然后我们就可以愉快地使用prettier的快捷键进行格式化了。