vscode保存时代码格式化时,eslint和pritter冲突
时间: 2025-04-07 20:14:07 AIGC 浏览: 129
在VSCode中保存文件时自动格式化代码是一项非常实用的功能,但如果配置不当可能会导致ESLint和Prettier之间发生冲突。这是因为两者都试图控制代码风格规则,当它们的要求不一致时就会出现问题。
#### ESLint简介:
ESLint是一个用于识别和报告JavaScript代码中的模式问题的强大工具,它可以根据特定规则集检查源码质量,并给出建议修正方案。除了基础校验外,还可以集成各种插件以适应React、Vue等框架下的语法需求。
#### Prettier概述:
Prettier被称为“观点强烈的代码格式化程序”,因为它强制采用统一的标准来美化所有支持的语言类型的代码片段。它的目标就是减少人为因素造成的差异性,专注于提供简单易用的解决方案。
#### 冲突原因:
1. **规则重叠**:部分功能如缩进宽度、逗号位置等方面,既可以通过ESLint设置也可以由Prettier处理。
2. **优先级不明晰**:如果未明确指定谁应该负责最终输出结果,则可能导致混乱甚至破坏原有的编码习惯。
#### 解决办法:
最推荐的方式是使用`eslint-config-prettier`包,该包会禁用掉那些与Prettier有潜在竞争的所有ESLint内置选项。步骤如下:
1. 安装必要依赖项:
```bash
npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev
```
2. 更新`.eslintrc.json`(或其他形式)配置文件,在plugins数组内加入"prettier",并在extends字段追加'eslint:recommended', 'plugin:react/recommended'(如果是针对React的话),最后加上'prettier'.
示例内容如下所示:
```json
{
"parser": "babel-eslint",
"plugins": [
"prettier"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"prettier"
]
}
```
3. 设置VSCode的相关配置(通常位于settings.json):
- `"editor.formatOnSave": true`
- `"eslint.autoFixOnSave": true`
- `"prettier.singleQuote": true //依据个人喜好调整具体参数`
完成以上操作之后再次尝试保存文档即可发现不再报错且满足预期效果啦!
阅读全文
相关推荐
















