ESLint使用文档

Freelander 发布于2019-08-20 14:41 / 2045人阅读

摘要：父级目录下的配置将使用于所有子目录，当子目录下的配置文件中的规则与父级配置发生冲突时，使用优先级高的，离的最近的一个优先。禁止检测父级配置为了将限制到一个特定的项目，在配置文件里设置。

依赖安装

ESLint 全局安装和项目根目录下安装都可以，只是应用起来稍微有些区别；
eslint-plugin-react是兼容React语义的插件；

以下安装选择一种即可，推荐局部安装，插件也根据项目安装；

全局安装

全局安装如下：

局部安装

进入项目根目录下安装：

区别：
在全局安装ESLint，所有的插件必须也全局安装；
在局部安装ESLint，插件不限制在哪里安装；

工具配置

IntelliJ IDEA、 Webstrom的配置一样，如果ESLint package没有自动填充，需要把node_modules中的eslint导入进去；

配置文件

经过以上步骤，随意打开一个.js文件会发现报错；

文件忽略

设置一些忽略检测的文件：

多配置 多配置检测顺序

如果同一目录下有多个配置文件，按以下顺序检测，使用第一个匹配到的文件：

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

多配置处理方式

如果项目下有多个结构层级不同的配置文件，会产生配置级联；

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。

父级目录下的配置将使用于所有子目录，当子目录下的配置文件中的规则与父级配置发生冲突时，使用优先级高的，离的最近的一个优先。

禁止检测父级配置

为了将 ESLint 限制到一个特定的项目，在配置文件里设置 "root": true。
ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。

內联注释配置

注释以指令(eslint/eslint-env/global/eslint-disable)开始，接下来是逗号分隔的规则列表；

作用：
会覆盖配置文件里的规则：禁用ESlint | 禁用某条规则 | 调整规则；

参考配置

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "globals":{
        "document": true,
        "$": true
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "indent": [
            "error",
            "tab",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    },
    "settings": {
        "react": {
            "createClass": "createClass",
            "pragma": "React"
        }
    }
};

使用的规则可在规则页面查看被标记为✓的规则；

注意：.gitignore中设置node_modules/

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81833.html

十分钟了解eslint配置 && 编写自定义eslint规则

摘要：的初衷是为了让程序员可以创建自己的检测规则。为了便于人们使用，内置了一些规则，当然，你可以在使用过程中自定义规则。所有的规则默认都是禁用的。在文件里的字段进行配置。如何编写一个知道了的原理，接下来可以自定义一个。 eslint介绍 ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用...

zqhxuyuan 2019-08-26 10:36 评论0 收藏0
前端代码质量进阶：自定义 eslint 规则校验业务逻辑

摘要：自定义规则校验代码业务逻辑是社区中主流的工具，提供的大量规则有效的保障了许多项目的代码质量。本文将介绍如何通过自定义检查规则，校验项目中特有的一些业务逻辑，如特殊作用域特殊使用规范性等。自定义 eslint 规则校验代码业务逻辑 eslint 是 JavaScript 社区中主流的 lint 工具，提供的大量规则有效的保障了许多项目的代码质量。本文将介绍如何通过自定义 eslint ...

Coly 2019-08-26 11:52 评论0 收藏0
eslint webpack2 vue-loader配置

摘要：使用或去定义配置的结构。在里创建一个属性，在那里定义你的配置。如果同一个目录下有多个配置文件，只会使用一个。 eslint是一个代码检测工具官网如下http://eslint.cn/ npm install eslint --save-dev 需要这几个npm包: eslint eslint-loader eslint-plugin-html (用以lint一些在html文件里面通...

junnplus 2019-08-01 17:18 评论0 收藏0
eslint webpack2 vue-loader配置

摘要：使用或去定义配置的结构。在里创建一个属性，在那里定义你的配置。如果同一个目录下有多个配置文件，只会使用一个。 eslint是一个代码检测工具官网如下http://eslint.cn/ npm install eslint --save-dev 需要这几个npm包: eslint eslint-loader eslint-plugin-html (用以lint一些在html文件里面通...

Null 2019-08-20 18:29 评论0 收藏0
ESLint简单操作

摘要：简介是由编写的一个可扩展每条规则独立不内置编码风格为理念的工具。在团队协作中，为避免低级产出风格统一的代码，会预先制定编码规范。使用工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。简介 ESLint 是由 Nicholas C. Zakas 编写的一个可扩展、每条规则独立、不内置编码风格为理念的 Lint 工具。在团队协作中，为避免低级 Bug、产出风格统一的代码...

liukai90 2019-08-19 18:09 评论0 收藏0