在vscode里配置ESLint和Prettier

文章目录

在vscode里配置ESLint和Prettier
- vscode插件和npm包区别
- 解决ESLint和Prettier冲突
- - vscode环境
  - 非vscode环境
- Vetur插件

使用vscode进行前端开发时，我们可能都安装了Prettier和ESLint插件，Prettier插件用来格式化代码，支持html、css(sass/less)、js和ts文件；ESLint则是用于代码质量检查，可以提示和更正代码错误，我主要是用在js和ts代码上；

但是，如果我们进行工程化开发的话，通常还会在项目里使用npm来安装ESLint或者Prettier依赖，那这两个npm包和相应的vscode插件，会有冲突吗？

vscode插件和npm包区别

我读了ESLint插件文档后，发现ESLint插件和ESLint npm包是相辅相成的，ESLint插件首先调用的，就是当前项目目录下的ESLint包，如果没有，就会去查找有没有全局安装的ESLint包。

所以，以ESLint为例，vscode插件和npm包的区别：

vscode中的ESLint插件，需要项目里或者全局安装ESLint包，插件检查代码时，还是在调用ESLint包来进行检查，然后将报错反馈给vscode，这样我们才能在vscode编辑器里，直接看到代码里的红色波浪线等错误提示；
如果只安装了ESLintnpm包，没有安装ESLint插件，那在vscode中，代码不会有红色波浪线等警告提示，我们要进行代码质量检查的话，需要在终端里通过./node_modules/.bin/eslint xx.js命令，在终端中来查看xx.js文件的ESLint报错信息：

   1:22  error    Strings must use singlequote  quotes3:18  error    Strings must use singlequote  quotes8:16  error    Strings must use singlequote  quotes10:17  error    Strings must use singlequote  quotes10:33  error    Strings must use singlequote  quotes15:3   warning  Unexpected console statement  no-console✖ 6 problems (5 errors, 1 warning)5 errors and 0 warnings potentially fixable with the `--fix` option.

包括fix修复，也是在终端中输入命令来执行；

两者相结合的话，我们就可以在vscode的settings.json中配置代码的“保存时格式化”和“保存时自动fix”等功能，这样书写代码时，编辑器会根据项目下的.eslintrc.js规则，实时给出lint提醒，并且在保存代码的时候，自动修复简单错误：

"[javascript]": {"editor.formatOnSave": true,"editor.formatOnPaste": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true}},

解决ESLint和Prettier冲突

首先，Prettier的vscode插件和npm包，区别和ESLint差不多，不同的地方在于，Prettier的Prettier插件里面本身捆绑了一个Prettier版本包，如果项目本地和全局都没装Prettier包的话，就会用这个捆绑包来解析，官方还是推荐在项目本地安装Prettier包，以供vscode插件调用。

vscode环境

如果是在vscode环境里同时使用Prettier和ESLint，像我就习惯用Prettier来格式化html、scss和jsx，用ESLint来检查js，那么就可以在vscode的settings.json里面，针对不同类型文件来配置规则：

"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true,"editor.formatOnPaste": true
},
"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true,"editor.formatOnPaste": true
},

这里，我就指定了Prettier来格式化html和scss文件，配置文件的话，我习惯在项目里使用.eslintrc.js和.prettierrc.js来分别进行格式配置。

非vscode环境

像我们协同开发的话，别人用的编辑器可能不是vscode，那就还是要靠ESLint和Prettier包来控制代码风格，那就可能会碰到ESLint和Prettier规则冲突的情况，可以通过安装eslint-config-prettier来解决冲突；

eslint-config-prettier是在碰到规则冲突时，以Prettier为准，安装完eslint-config-prettier后（npm install --save-dev eslint-config-prettier），在.eslintrc.js的extends字段里，进行声明：

{"extends": ["some-other-config-you-use",// 其他的一些eslint配置，比如"eslint:recommended""prettier"]
}

注意要把prettier放到最后，这样才能保证覆写。

Vetur插件

这里提一下vscode里的Vetur插件，如果大家用vscode开发Vue项目的话，可以安装Vetur插件，想详细了解该插件使用的话，可以去看下该插件的官方文档Vetur文档。

Vetur提供了对.vue文件的支持，提供了语法高亮和代码格式化；

比如一个新的vue组件，输入<v就会提示：

选择<vue> with default.vue,就能快速生成vue单文件组件的初始结构：

<template></template><script>
export default {}
</script><style></style>

Vetur也内嵌了很多格式化工具：

内嵌了Prettier，可以在vscode的settings.json里，用vetur.format.defaultFormatter进行格式化指定：

{"vetur.format.defaultFormatter.html": "prettier","vetur.format.defaultFormatter.css": "prettier","vetur.format.defaultFormatter.scss": "prettier","vetur.format.defaultFormatter.less": "prettier",
}

不过项目本地安装了Prettier包的话，会优先使用本地安装的版本，ESLint也一样；

内嵌了eslint-plugin-vue这个vue插件，来进行代码质量控制，默认有一套代码规则，根据Vue版本不同而切换：Vue2项目规则集和Vue3项目规则集；
如果想自定义ESLint规则的话，需要先关闭Vetur的lint校验：vetur.validation.template: false，然后在项目下安装ESLint包和eslint-plugin-vue，编写ESLint规则文件，在里面设定一下rules：

{"extends": ["eslint:recommended","plugin:vue/recommended"],"rules": {"vue/html-self-closing": "off"}
}

Vetur暂时不支持TypeScript的校验，不过会把ts的编译错误在“问题”窗口显示出来。