阅读 6150

VSCode合理配置ESLint+Prettier

前言

昨天,我的开源项目成员给我提交了代码,我在用webstorm看他的代码时发现了一堆跟代码格式相关的黄色报错,我就问他这一堆黄色报错你的编辑器就没给你提示吗?他说他用的vscode没有提示这些报错。

于是,我就亲自下载了vscode搞了下发现真没提示,在百度和掘金搜了下vscode配置eslint+prettier的文章没有一个好使的,终于在踩了很多坑后,配置成功了。

本文就跟大家分享下如何在vscode上配置Eslint+Prettier,欢迎各位感兴趣的开发者阅读本文。

写在前面

本文中所使用的项目在package.json中已经装了相关依赖包,在项目根目录也有其对应的配置文件。webstorm是可以正确识别我的配置文件在保存时进行格式化的,vscode就不行了,本文的目的就是解决这个问题。

本文中使用的项目地址:chat-system

插件安装

我们先需要为vscode安装相关插件。

  • 安装eslint、prettier插件

插件使用

这里你可以选择直接修改vscode的settings.json文件,这样的修改是本地的,无法做到同步,如果有其他人也是用的vscode,那么你要告诉他改什么改什么,他在去改,甚是麻烦。

我这里选择在项目的根目录创建.vscode文件夹, 然后再在其下面创建settings.json文件,将这个文件夹同步到git,这样做vscode就会优先读取项目根目录下的配置文件了,完美的解决了刚才那个痛点。

创建好文件后,添加下述配置:

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.packageManager": "yarn",
  "eslint.run": "onSave",
  "prettier.packageManager": "yarn",
  "eslint.validate": [
    "vue",
    "javascript",
    "javascriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vetur.validation.template": false,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "files.eol": "\n"
}
复制代码

注意:如果你启用了prettier,但是没有相关配置文件,editor.formatOnSave选项就要设置为false。不然会与vscode自身的保存起冲突

接下来,我们来配置prettier,同样的在项目根目录创建.prettierrc.json文件,添加下述配置:

{
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "auto",
  "singleQuote": false,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true
}

复制代码

上述配置是我项目的相关规范,你可以按照你的实际需求去弄,对此不了解的可以去查阅官方文档。

做完上述配置后,vscode就已经可以按照我们的规范来进行相应的提示了,按ctrl+s保存代码时其也会按照我们自定义的的规范进行格式化。

Windows下的坑

做完上述配置后,mac下没有任何问题,一切按照我的配置规则走了,然而我的用windows的项目成员说注释格式化没生效,我是配置了注释必须有一个空格,按ctrl+s时会自动格式化。

为了解决这个问题,找了很多方案,没有一个好使的,当我快要放弃时,无意间发现vscode下面的eslint有个禁用的标志(如下图所示)。

此时,我觉得我好像知道啥问题了,应该是启用prettier后,vscode默认就把eslint给禁用了,我尝试的点了两下禁用图标,出现了如下图所示的界面,选择第一个。

果然如我所料,做完上述操作后,eslint哪个标志打了个勾,我再次尝试了下Ctrl+s,成了,注释也按照我的规则自动格式化了。

写在最后

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
  • 本文首发于掘金,未经许可禁止转载💌
文章分类
前端
文章标签