VSCode 插件之 ESLint

科林-Colin
• 阅读 2360

vscode-eslint

github.com/microsoft/v…

为了区分 npm ESLint 包和 VSCode 的 ESLint 插件,我把前者称为 npm ESLint,后者称为 vscode-eslint。

vscode-eslint 优先使用安装在当前项目中的 npm ESLint,如果当前项目中没有提供,它会使用全局安装的 npm ESLint,然后看是否存在 ESLint 配置文件,如果没有的话就不会去校验,有的话如果待校验的文件属于 "eslint.validate" 或者属于 "eslint.probe" 且探测成功,开始 ESLint 校验。

注意:

  • ESLint 将自动在待校验的文件目录里寻找 ESLint 配置文件,紧接着是父级目录,一直到文件系统的根目录,除非在 ESLint 配置文件中指定 root: true 停止向上寻找。
  • ESLint 插件并没有像 Prettier 插件那样自身有一个捆绑的 ESLint 版本。

示例

  • 全局安装 npm ESLint,vue-cli-demo 项目下没有本地安装 npm ESLint,项目根目录下有 ESLint 配置文件。可以从输出中看到使用的是全局的 npm ESLint。

    VSCode 插件之 ESLint

  • 全局安装 npm ESLint,vue-cli-demo 项目下本地安装 npm ESLint,项目根目录下有 ESLint 配置文件。可以从输出中看到使用的是本地安装的 npm ESLint。

    VSCode 插件之 ESLint

  • vue-cli-demo 项目下本地安装 npm ESLint,项目根目录下没有 ESLint 配置文件。可以从输出中看到报错了,所以 ESLint 不会校验。

    VSCode 插件之 ESLint

Settings Options

  • "eslint.enable" - 启用/禁用 vscode-eslint。默认情况下是启用的。

  • "eslint.validate" - 一个语言标识符数组,指定要执行验证的文件,默认为 ["javascript", "javascriptreact"]。如果待校验的文件类型属于 "eslint.validate",vscode-eslint 会开启 ESLint 校验,如果 ESLint 配置文件中没有引入相应的插件,那么 ESLint 会报错。这是一个旧的设置。

  • "eslint.probe" - 一个语言标识符数组,指定要执行验证的文件,默认值为 ["javascript"、"javascriptreact"、"typecript"、"typecriptreact"、"html"、"vue"、"markdown"]。如果待校验的文件类型属于 eslint.probe,且 ESLint 配置文件中没有引入相应的插件,那么 probe(探测) 失败, vscode-eslint 不会开启 ESLint 校验;如果待校验的文件类型属于 eslint.probe,且 ESLint 配置文件中引入了相应的插件,那么 probe 成功, vscode-eslint 会开启 ESLint 校验。

    例如开发 Vue ,需要在 "eslint.probe" 中添加 ["html", "vue"],在项目中安装 eslint-plugin-vue, eslint-plugin-html ,这样才会在 .vue 单文件中开启 ESLint 检测,VSCode 才会在代码编辑器中正确的高亮错误的语法,并且会在窗口中输出错误信息。

    为了更好的了解 vscode-eslint 的运行,我们可以在 settings.json 中设置 "eslint.trace.server": "verbose",这样就可以在输出中看到更多日志。

    示例:

    • "eslint.validate""eslint.probe" 中都添加了 vue,从图中看到报了 Parsing error,表明已经开始 ESLint 校验。报错是因为使用的是 ESLint 默认的 parser - Espree,它无法正确的解析 .vue 文件。

      VSCode 插件之 ESLint

    • "eslint.validate" 中没有添加 vue,"eslint.probe" 中添加了 vue,从图中看到没有报错。注意:从 "eslint.validate" 中删除 vue 保存之后,App.vue 中的报错不会立马消失,需要重新启动 VSCode 后,App.vue 中的报错才会消失。

      VSCode 插件之 ESLint

    • 在上例的基础上,在 ESLint 配置文件中引入 eslint-plugin-vue,可以看到开始了 ESLint 校验。

      VSCode 插件之 ESLint

  • "editor.codeActionsOnSave" (@since 2.0.0) - 支持 source.fixAll.eslint。如果设置为 "true",所有 ESLint/ESLint 插件(@typescript-eslint/eslint-plugin, eslint-plugin-vue, eslint-plugin-react 等)的可自动修复的错误都将在保存时被修复。你也可以选择性地启用和禁用特定的语言。

    // 保存的时候自动修复 ESLint/ESLint 插件中可自动修复的错误
    {
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
    }
    // 禁用 HTML 文件的 codeActionsOnSave
    {
     "[html]": {
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": false
        }
      }
    } 
  • "eslint.alwaysShowStatus" - 是否总是在状态栏显示 ESLint 标志,默认是 false。

    VSCode 插件之 ESLint

  • "eslint.trace.server": "verbose" - 查看更多 vscode-eslint 详细日志。

如何在 VSCode 中配置 ESLint ?

目前针对项目代码的校验和格式化通常是采用 ESLint 和 Prettier 配合实现的,那么如何在 VSCode 中配置才能实现保存的时候按照 Prettier 的规则自动格式化代码并且修复 ESLint/ESLint插件中 fixable 的规则,同时在编辑器中提示警告和错误呢?

  • 首先在 VSCode 安装 vscode-eslint,安装后默认是启动的。

  • 项目中下载 eslint, prettier, eslint-config-prettier, eslint-plugin-prettier。

    npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier 
  • 项目根目录添加 .eslintrc.js 和 .prettierrc

    // .eslintrc.js
    {
      "extends": ["plugin:prettier/recommended"]
    }
    // .prettierrc
    {
      "singleQuote": true
    } 
  • settings.json 中配置。

    {
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
    } 

    注意:在 VSCode 插件之 Prettier 中写到使用 Prettier 格式化代码的配置如下,那为什么上面 settings.json 的配置中没有添加 prettier-vscode 的配置呢?因为我们在 .eslintrc.js 中引入了 eslint-plugin-prettier,它以 ESLint 规则的方式运行 Prettier,所以不需要在 VSCode 中再去配置。具体可参考 ESLint 之与 Prettier 配合使用

    // settings.json
    {
     "[javascript]": { // 根据语言设置其对应的默认格式化工具
          "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置 javascript 的默认格式化工具为 prettier
          "editor.formatOnSave": true, // 保存的时候自动格式化
      },
    } 

本文转自 https://juejin.cn/post/6926456864276873230,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这