给 eslint 写一个插件

更新日期: 2020-11-19阅读: 1.2k标签: eslint

eslint 是很有名的 linter,地球上每一个 JavaScript 程序员都应该知道。

linter 是一种代码静态分析工具,它可以帮你找到代码中可能存在的错误与 bug,也能找出代码风格的问题,不过因为只是静态分析,对 js 这种动态类型的语言所能做的就比较有限了,毕竟在 js 中,变量的类型如果不执行就不容易知道,有些错误就不那么容易被找出来,虽然如此,能做的检查还是很多了。


安装

安装 eslint 本身只需要安装 eslint 本身就够了,而且 eslint 自带一些规则,不安装任何插件就做到基本的检查,但一般还是需要安装一些插件。

$ yarn add --dev eslint

eslint 除了可以安装插件外,还可以安装另外两个东西,总共有 3 种:

  • plugin:eslint 的插件可以帮 eslint 增加规则,另外也可以通过配置文件让程序员添加自己的规则,插件可以提供一份默认的推荐配置
  • config:可以重复使用的规则配置文件,比较有名的是 standard 和 airbnb 的规则,配置文件有可能会有依赖的插件,需要自己去安装
  • parser:用来扩充 eslint 可以处理的语法,有用 babel 转换 js 的 babel-eslint ,让 eslint 可以处理实验性的语法;@typescript-eslint/parser 可以让 eslint 处理 Typescript;还有 vue-eslint-parser 用来处理 vue 代码。

使用

虽然安装很简单,但不对 eslint 进行配置是什么都不能做的,所以还要提供一个基本的配置,而 eslint 提供一个简单的初始化命令,通过执行这个命令并回答几个问题,eslint 就会产生一个基本的配置:

$ yarn eslint --init

eslint 的配置文件可以是 js、json 或 yml 的格式,在这里我们用 js 格式,文件要取名为 .eslintrc.js,这里就用基本的配置,即只用 eslint:recommended 这组设置,如果有其它的插件也像这样进行基本的设置:

module.exports = {
  extends: 'eslint:recommended',
}

eslint 的配置文件有几个基本的配置项,在这里也顺便说几个我常用的 config 的插件,首先是 config 的部分:

  • eslint-config-standard:很有名的配置,它还需要另外安装 4 个插件
  • eslint-config-prettier:用来关掉排版相关配置项的配置文件,因为要交给 prettier 处理,关掉就不会引发冲突了。

我还没有列出 standard 所相依的插件:

  • eslint-plugin-simple-import-sort:能够自动排序 import 的一个插件
  • eslint-plugin-eslint-comments:用来检查 eslint 的特殊注解的一个插件,eslint 可以用特殊的注解开关规则,这些等下会讲到,这个插件的用途是不允许关闭了规则后不再打开,以及关掉所有规则。

把上面的内容都写到配置文件中应该是这样:

module.exports = {
  extends: [
    'standard',
    // 加上 prettier 的配置,关掉部份样式检查,顺序很重要
    'prettier',
    'prettier/standard',
    // 如果是插件提供的配置项需要以 `plugin:` 开始
    'plugin:eslint-comments/recommended',
  ],
  // 额外的规则,这里也可以决定是否要关掉某些规则
  rules: {
    // 设置 plugin `eslint-plugin-simple-import-sort` 的 `sort` 规则是 `error`,也就是不符合时是会报错的
    // 另外还可以设置为 `warn` 只警告,或是 `off` 关掉
    // 有的规则也有选项,这是就要用 ['error', {<options>}] 这种像 babel 的格式了
    'simple-import-sort/sort': 'error',
  },
  // 配置指定的环境,这会影响到判断哪些是全局变量
  env: {
    browser: true
  },
  // 设置 eslint 自己的 parser 用的是哪一版本的 js ,一般设置为 eslint --init 就行了
  parserOptions: {
    ecmaVersion: 12,
  },
}

运作原理

eslint 跟 babel 很相似,都是先把文件转成 AST,如果想查看 eslint 转出来的 AST ,可以到 AST Explorer 选择 espree 解析器,这是 eslint 内置的解析器,它和 babel 的解析器不太一样,应该说是 babel 的解析器和别人不一样才对,ECMAScript 定义了一套 js 的 AST 该怎样定义的规则,是 babel 和别人不同,另外 eslint 的解析器需要很详细的信息,不能只有代码的同步而已,而这样才能做好 lint 的工作。

它的运作方式也像 babel 一样,让 plugin XML visitor 对特定的节点进行检查,如果发现有问题就通过它的 api 来报告,也可以通过它的 API 提供修正的程序。


写一个自己的 eslint 插件

接下来写一个 eslint 插件,虽说是写插件,但实际上写的是 eslint 的规则,假设我们希望 js 的对象是这样的(比如 vue 的 object):

export default {
  name: 'Foo',

  props: {},

  data: () => ({}),
}

像上面这样中间都有个空行,可以用两种很简单的方法来判断是不是 vue 的对象:

  • 在 export default 之后
  • 包含在 Vue.extend 中

eslint 的规则大致分为meta 和 create 两个部分:

  • meta:这个规则的描述,如果这个规则可以被自动修复,也必须要定义在这里
  • create:建立规则的 AST visitor,规则的检查是在这里做的

与 babel 插件很像,第一步是先打开 AST Explorer,选 eslint 用的解析器 espree,这里要替换的是 ObjectExpress

module.exports = {
  meta: {
    // 可以被修复的规则一定要定义,这里除了 'whitespace' 外还有 'code' ,不过知识分类上的问题
    // 这里因为是要加换行,所以选 'whitespace'
    fixable: 'whitespace',
    // 可以定义可能会出现的信息,这就可以进行统一管理。这是 eslint 的推荐做法
    // 你也可以直接把数据写在 context.report
    messages: {
      requireNewline: 'require newline between',
    },
  },
  create: function (context) {
    return {
      ObjectExpression(node) {
        if (
          // 判断副节点是否为 export default
          node.parent.type === 'ExportDefaultDeclaration' ||
          // 或父节点是 `Vue.extend`
          (node.parent.type === 'CallExpression' && isVueExtend(node.parent.callee))
        ) {
          // 得到 source code 对象,后面的 fixer 需要用到
          const sourceCode = context.getSourceCode()
          // 用 for 循环把对象的属性每两个氛围一组,检查中间有没有加空行
          for (let i = 0; i < node.properties.length - 1; ++i) {
            // 这里的判断方法很简单,上一个属性结尾的行号必须与下一个属性结尾的行号相差 2 以上
            // 也就是中间有两个以上的空行
            if (node.properties[i + 1].loc.start.line - node.properties[i].loc.end.line < 2) {
              context.report({
                // 用预先定义的数据
                messageId: 'requireNewline',
                // 或是你可以直接把数据写进来
                // message: 'require newline between',
                // 指定出错的位置,因为是在两个属性之间,所以就用上一个的 end 与后一个的 start 来指定
                loc: {
                  start: node.properties[i].loc.end,
                  end: node.properties[i + 1].loc.start,
                },
                // 如果出错的位置正好是某个 AST 的节点,那也可以传入节点
                // node: node
                fix(fixer) {
                  // 这里是自动修复的部分稍后再加上
                },
              })
            }
          }
        }
      },
    }
  },
}

正常来说 eslint 的插件需要照着 eslint 的命名规则才能加载,不过为了方便测试,就直接调用 eslint 的函数把自定义的规则加入:

// eslint 的 Linter
const { Linter } = require('eslint')
// 我们要定义的规则
const rule = require('./space-between-properties')

const linter = new Linter()

// 为规则设定一个 id
const id = 'space-between-properties'
// 加入规则定义,也就是上面的那个东西
linter.defineRule(id, rule)

// 执行规则
const res = linter.verify(
  `
export default {
  name: 'Foo',
  props: {},
}
`,

  {
    rules: {
      [id]: 'error',
    },
    parserOptions: {
      sourceType: 'module',
      ecmaVersion: 2015,
    },
  }
)

// 如果有错误的话就打印出来
if (res.length) {
  console.log(res)
}

不出意外的话应该会看到有内容输出,接着要加上自动修复的部分:

// 接上面的 fix 部份
fix(fixer) {
  // 取得两个节点中间的 token
  const tokens = sourceCode.getTokensBetween(node.properties[i], node.properties[i + 1])
  // “通常”中间只会有逗号,所以唯一的节点就是逗号
  const comma = tokens[0]
  // 要求 eslint 在都好后面加上换行
  return fixer.insertTextAfterRange(comma.range, '\n')
}

修复也很简单,就是在逗号后面加上换行而已,不过上面也特别说了是“通常”,其实这个插件你只要在 , 后面加上注解就会出现问题了

eslint 会在最后一次把修复加上去,然后再跑一次所有规则,如果还是有可以修复的问题就再跑一次,直到没有可以自动修复的问题为止,所以也不用担心会破坏其他插件所提供的规则。不过如果出现了规则互相冲突会怎样呢,如果有兴趣的话可以自己来试试。


    链接: https://www.fly63.com/article/detial/9959

    你不知道的Vuejs - 使用ESLint检查代码质量

    Javascript 是一门弱类型语言,所以语法检查变得尤为重要。因此对 Javascript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。

    vue中关于eslint,以及如何在vue项目中关闭或使用ESLint

    ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。 由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。 这篇文章主要讲解如何在vue项目中关闭或使用ESLint

    ESLint_JS代码检查工具

    ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。本文将详细介绍ESLint

    Eslint规则_ESLint常见命令

    详解 ESLint 规则,规范你的代码,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。

    ESLint规则配置说明

    有的时候多人开发,代码的风格,用的代码编辑器都各不相同,所以为了大家能保持一种统一的风格,ESLint就可以帮我们检查代码的格式,和风格。

    vue-cli3 取消eslint 校验代码

    vue create hello-world创建项目的时候选择了Linter / Formatter,所以写代码的时候会有代码规范检查,怎么才能关闭这个校验呢?

    如何在 React 项目中整合 Eslint 和 Prettier?

    首先,我们使用官方提供的脚手架 create-react-app 来创建一个项目:Eslint 是一个可以检验代码,并给出报告的工具。它的目标是保证代码的一致性,避免错误。Eslint 为我们提供了 ECMAScript/JavaScript 规范的代码校验

    webpack插件ProvidePlugin的使用方法和eslint配置

    配置 webpack.config.js文件里 plugins 属性,配置完以后就可以在代码里直接使用 _ ,而不再需要 import; 注意:(如果不配置eslint,浏览器就会报错:\\\\\\\'_\\\\\\\' is not defined no-undef)

    什么是ESLint?

    官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码

    项目常用eslint配置(Vue/React/TypeScript)

    Vue项目常用eslint配置需要安装依赖(Vue这里使用standard扩展和vue插件,所以需要安装);React项目常用eslint配置同样安装依赖,React这里使用的airbnb扩展。安装eslint-import-resolver-webpack用来解决webpack中设置的别名eslint无法识别报错的问题。

    点击更多...

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!