立诚勿怠,格物致知
It's all about connecting the dots

几个eslint插件的介绍

ESLint支持第三方插件。在使用这些第三方插件前,你需要先使用npm来安装它们。要在eslint配置文件中配置这些插件,需要在配置文件中添加一个“plugins”根属性,其值即为由这些插件名(插件名前面的“eslint-plugin-”前缀可以省略)构成的字符串数组。

说明:由于Node里require函数的限制,全局安装的ESLint只能使用全局安装的ESLint插件,项目里安装的ESLint只能使用项目里安装的ESLint插件。

下面是对一些eslint插件的概述:

eslint-plugin-html插件

通过这个插件你可以让eslint去检测html文件script标签里的js代码。使用示例:

// .eslintrc.js

{
    "plugins": [
        "html"
    ]
}

注意:在eslint-plugin-html的文档里我们可以看到这么一句话:

Note: by default, when executing the eslint command on a directory, only .js files will be linted. You will have to specify extra extensions with the –ext option. Example: eslint –ext .html,.js src will lint both .html and .js files in the src directory.

然后我们到eslint官方文档里看到了这么一句话:

Specifying File extensions to Lint

Currently the sole method for telling ESLint which file extensions to lint is by specifying a comma separated list of extensions using the –ext command line option. Note this flag only takes effect in conjunction with directories, and will be ignored if used with filenames or glob patterns.

划重点,这里重要的是这句:Note this flag only takes effect in conjunction with directories, and will be ignored if used with filenames or glob patterns。所以,如果你是通过gulp.src把文件流pipe进gulp-eslint的话,只要你gulp.src引进来的文件包括那些.html文件就可以了。

eslint-plugin-import插件

这个插件意在提供对ES6+ import/export语法的支持,有助于防止你写错文件路径或者引用的变量名。使用示例:

{
    "plugins": [
    ],
    "rules": {
        "import/no-unresolved": [2, { "commonjs": true, "amd": true }],
        "import/named": 2,
        "import/namespace": 2,
        "import/default": 2,
        "import/export": 2,
        // # etc...
    }
}

或者使用现成的推荐规则:

{
    "extends": {
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings"
    }
}

eslint-plugin-node插件

添加对node的eslint支持。使用示例:

{
    "plugins": ["node"],
    "extends": ["eslint:recommended", "plugin:node/recommended"],
    "rules": {
        "node/exports-style": ["error", "module.exports"],
    }
}

eslint-plugin-promise插件

这个插件意在通过代码风格检测让开发者养成较好地使用promise的方式(最佳实践,best practices)。比如在对promise使用了then之后会要求你加一个catch捕获下异常,当然如果你的方法是直接return返回了这个promise的话则不会要求你马上加catch(因为毕竟当然你可以稍后在其他地方拿到这个promise后再catch)。使用示例:

{
    "plugins": [
        "promise"
    ],
    "rules": {
        "promise/always-return": "error",
        "promise/no-return-wrap": "error",
        "promise/param-names": "error",
        "promise/catch-or-return": "error",
        "promise/no-native": "off",
        "promise/no-nesting": "warn",
        "promise/no-promise-in-callback": "warn",
        "promise/no-callback-in-promise": "warn",
        "promise/avoid-new": "warn",
        "promise/no-return-in-finally": "warn"
    }
}

或者直接使用现成的推荐规则:

{
    "extends": [
        "plugin:promise/recommended"
    ]
}

eslint-plugin-standard插件

这是一个为Standard Linter而做的补充插件,一共就扩展了4个规则,使用示例如下:

{
  rules: {
    'standard/object-curly-even-spacing': [2, "either"]
    'standard/array-bracket-even-spacing': [2, "either"],
    'standard/computed-property-even-spacing': [2, "even"]
    'standard/no-callback-literal': [2, ["cb", "callback"]]
  }
}

 

赞(3) 打赏
文章名称:《几个eslint插件的介绍》
文章链接:https://www.orzzone.com/introduction-eslint-plugins.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册