在前端协作开发中,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的快捷键进行格式化了。