VSCode 插件之 ESLint

科林-Colin 等级 507 0 0

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,如有侵权,请联系删除。

收藏
评论区

相关推荐

Mac安装Golang和vscode
Mac第一次安装golang和vscode一起使用,遇到了不少的坑,下面介绍一下正确的安装方式。 1、使用brew安装Golang 如果不知道brew是什么,或怎么安装请看这里 brew官网(https://brew.sh/index_zhcn) brew install golang 安装完成后可以使用
flutter -- dart基础之dart简介和安装
Dart介绍: Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。 Dart诞生于2011年,号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。 要学Flutter的话我们必须首先得会Dart。 da
每天学点 JS 编码规范(2):Objects
(给前端大全加星标,提升前端技能) 英文:AirBnB,翻译:Kakaka Hou 为什么要在前端大全推送这个系列? 前段时间有读者通过我的个人微信,提议能不能推送一些编程规范的文章。我们以前关注过 Airbnb 在 GitHub 上开源的 JS 编程规范(现在有10万 star,可见受欢迎程度),但因为篇幅太长,一直没有推送过。现在化整为零,设立这
【vscode折腾系列】更换vscode背景图
写前端代码时,用过webstorm,sublime,vscode,最终还是选择了vscode,主要原因是(好看)简洁的编程环境,丰富的插件功能,活跃的社区。不过无论是哪一个编辑器,长时间看着黑色/白色的背景难免单调,喜欢折腾(不专心写代码)的我开始想着给vscode换个背景,百度了一下,还真有人写了这样的一个插件background。     闲话少叙
安装vscode后电脑启动黑屏问题和vscode命令行无法输入
这个问题困然我好久,网上各种答案都是试了一遍,虽然暂时能用,但是vscode中的命令行无法输入一直就是我内心的痛,今天终于找到了 当我启动后发现出现黑屏,按照说法就是勾选兼容模式 (https://imghelloworld.osscnbeijing.aliyuncs.com/8ba961f252e0d5fface5234e51a6216
Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
这是我第4篇简书。   都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐的操作dom,注册事件、监听事件、取消事件。。。。(确实很烦)。vue的官方文档还是不错的,由浅到深,如果不使用
Dart教程(一):dart安装
一、安装dart sdk brew tap dartlang/dart brew install dart 二、安装VSCode 去官网下载即可 三、安装dart插件 (https://imghelloworld.osscnbeijing.aliyuncs.com/af7d1de25caf6599a4839b56f4f0d
VSCode 插件之 ESLint
vscodeeslint github.com/microsoft/v…(https://github.com/microsoft/vscodeeslint) 为了区分 npm ESLint 包和 VSCode 的 ESLint 插件,我把前者称为 npm ESLint,后者称为 vscodeeslint。 vscodeeslint 优先
使用 VS Code 来开发和调试 Python 程序
(简称 VSCode)是微软出品的一款支持多种语言的免费 IDE(集成开发环境)。VSCode 轻量而强大,支持 Windows、macOS 和 Linux。内置支持 JavaScript、TypeScript 和 Node.js,并且拥有一个丰富的插件生态系统来支持其它语言(C/C、C、Java、Python、PHP、Go 等)和运行时(.Net 和
安利一些强无敌的 NPM 软件包
实用工具 Lodashlodash是一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。 安装及示例yarn add lodash 不要滥用,尽量使用 ES 自带方法 。我常用的一些方法如下// 深度比较两个对象的值是否全相等 import isEqu
在vscode中go编码发生的问题整理
关于我 引言使用VsCode进行Go程序开发,我们肯定会碰到一些问题,这些问题有些是IDE的配置问题,有些是下载包的版本不一致问题,本文主要针对在开发过程中碰到的问题做一个简单的回顾和整理。 前期准备,必看在进行问题纠错前,先确保自己正确下载了golang的官方工具集gotool,如果不确定,就跟着我的步骤操作一遍,可能操作后,你的问题就解决了。1、配置go
Vscode个性化设置:让一个小萌妹陪你敲代码
前言大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点: 开源,免费; 自定义配置 集成git 智能提示强大 支持各种文件格式(html/jade/css/less/sass/xml) 调试功能强大 各种方便的快捷键 强大的插件扩展 对前端这么友好
electron:桌面应用程序的革命
“ 你也许不了解electron,但你应该了解或使用过atom、vscode、xmin zend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xmin zen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electro
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。