js eslint从零使用

从官网抄些有用的话,介绍什么的建议右转百度,熟悉npm者直接拉到中间


安装

通过npm安装npm install -g eslint,详细右转百度

入门常见bug:
1.没用过nodejs,不知道npm中全局安装和本地安装有什么区别,导致一系列xxx找不到问题的,右转百度解决,与eslint关系不大
2.eslint以命令行运行。各种编辑器的eslint插件本质只是调用命令行执行eslint命令而已,eslint本体还是要在npm中安装的
3.命令行--fix或者插件自动修复无效?eslint基本只对各种空格、引号、分号有自动修复,其他的基本靠手动;或者没有搞好--ext参数没有检查某些文件等等


了解一下就算的使用

1.配置文件
.eslintrc.js.eslintrc.json.eslintrc.yml之类的,后缀名并不重要eslint都认,按照对应格式写就行。一个没有的话自己想办法搞个出来或右转百度,下面以.eslintrc.js格式为例

2.三个相对有用的参数
(1)parser,语法分析器

ESLint 默认使用Espree作为其解析器,你可以在配置文件中指定一个不同的解析器,只要该解析器符合下列要求:

  1. 它必须是本地安装的一个 npm 模块。
  2. 它必须有兼容 Esprima 的接口(它必须输出一个 parse() 方法)
  3. 它必须产出兼容 Esprima 的 AST 和 token 对象。

会用就行。目的在于前端框架如vue文件这些,肯定不能用默认parser的,默认parser只认识原生js相关文件。这个时候直接用第三方如parser: 'babel-eslint'

(2)env

env: {
    browser: false,
    node: true,
    es6: true
  }

告诉eslint你在什么环境下js开发。实际上主要是判断一些常规预定义的全局变量是否合法,如浏览器中windowlocation这些,然而由于node一般可兼容浏览器环境的js写法,所以即使上面设置了browser: false,使用这些全局变量时仍不会被eslint报错。

(3)extends
指定当前规则配置从哪里继承。

有两个来源:
规则包:eslint-config-xxx,基于已有规则,提供特定的代码风格检查
插件包:eslint-plugin-xxx,可提供新的规则

命名使用规律:

extends 属性值可以省略包名的前缀 eslint-config-。
extends 属性值可以由以下组成(指插件包):
plugin:
包名 (可省略前缀eslint-plugin-)
/
配置名称 (比如 recommended)

"extends": [
        "eslint:recommended",
        "standard",
        "plugin:vue/recommended"
    ],

数组形式,规则从左往右依次被覆盖。
eslint:recommended属于官方提供的最基本规则,命名不受上面约束,相对特殊。
standard即eslint-config-standard,注意npm install后才可用。
plugin:vue/recommended即eslint-plugin-vue下的recommended配置,同样的还有base、essential、strongly-recommended等配置,可直接查看源码或官网介绍。

注:一般而言直接去npm仓库查找后,直接npm install按照上述逻辑即可使用,但是不排除例外。如eslint-plugin-vue,官方文档指明需要额外的配置,即parser需要更改为vue-eslint-parser,若此时还想使用babel-eslint作自定义parser,则需要把它放到parserOptions.parser(非官方指定的属性,属于第三方自己的实现手段)。


关键使用

核心就是rules: {...},选择启用哪些规则。规则的中文文档:Rules
例子:

    "rules": {
       "quotes": "error"
    }
关于规则的值:

"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告(不会影响退出码)
"error" or 2 - 将规则视为一个错误 (退出码为1)
数组形式:
"quotes": ["error", "double"],第一个值是错误级别,后面的值是选项。注意选项有可能是一个对象选项而不一定是字符串,且具体可选项视乎规则而定,看文档查询即可

规则覆盖:

我们手动在rules定义的优先级最高,覆盖其他插件扩展的设置。
配置定义在插件中的一个规则的时候,你必须使用插件名/规则ID的形式。如:

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}
文件中例外地设置

可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告:

/* eslint-disable */
这里开始的代码不被eslint检查
/* eslint-enable */
这里开始的代码被eslint检查

你也可以对指定的规则启用或禁用警告:

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

插进中的自定义规则同理,插件名/规则ID放入注释中即可。

基本结束,下面是我的vscode和vue环节


vscode集成

其实就是装个ESLint扩展。


image.png

看图,vscode打开"问题",所有eslint报错都在这。鼠标移过去,能自动修复的图标会变成灯泡(上面那个错误也可修复,只是鼠标没有移过去),右键选择解决方案,自行看英文不翻译了。

Strings must use singlequote. eslint(quotes) [10,15]分析:
1.Strings must use singlequote.是提示信息,看不懂就继续
2.eslint(quotes),说明这是eslint报的问题,括号内是eslint的提示信息,意思为quotes这条规则不符合。然后你可以文档/百度查询这条规则要求的格式、默认值是什么,或者rules中直接关掉

  1. [10,15]这行错误的代码在10行15列

vue中使用eslint

使用第三方模板或者@vue-cli的常见问题:项目下有(新建)一个.eslintrc.js配置文件,然后百度再粘贴,导致覆盖默认设置产生各种报错,诸如:<template>的'<'报unexpected token、'const'报错、'import'动态引入的函数报错等等。

使用cli新建的项目一般默认配置好parser、extends这些参数,只去覆盖rules就行。如果你看懂了上面那个eslint-plugin-vue的使用说明,那么可以完全自己写一遍,最简单的常用结构应该是:

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: ['plugin:vue/essential'],
  rules: {}
}

注:eslint-plugin-vue与eslint-plugin-html存在冲突,具体请看文档。babel-eslint直接作parser也可以,但是效果一般,且不太支持eslint-plugin-vue

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容

  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,251评论 3 14
  • EsLint入门学习整理 这两天因为公司要求,就对ESLint进行了初步的了解,网上的内容基本上都差不多,但是内容...
    点柈阅读 26,010评论 3 42
  • 什么是 ESLint ESLint(中文站点)是一个开源的 JavaScript 代码检查工具,使用 Node.j...
    小肆逸阅读 1,494评论 0 3
  • ESLint 配置 中文官网 简介 ESLint 是在 ECMAScript/JavaScript 代码中识别和报...
    zcynine阅读 1,748评论 0 1
  • 今天来讲讲自我成长。 因为2017年经历了很多,加班、生病、争执、情感分离、欺骗、自我放纵......经历过怨恨、...
    六区少年阅读 308评论 0 0