eslint 常用配置解析学习记录

介绍

lint是检验代码格式工具的统称，工具有 Jslint、Eslint等；
npm i eslint --save-dev
eslint --fix 可以自动修复基础错误，如符号缺失或丢失；

工作原理解析

两种方式配置：
1、comments
使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
2、files 使用
JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。
.eslintrc.* 文件，或者直接在 __package.json 文件里的 eslintConfig 字段__指定配置

配置详情

// 语言环境、解析器、处理器、规则、插件、全局变量设置、扩展

// 通过约束保持代码更改一致，增加可读性；（代码健壮、功能可靠）


/* eslint-disable no-alert, no-console */
/* eslint-disable-next-line */
/* eslint-disable-line example/rule-name */

// 配置文件不同格式优先级顺序：js - yaml - yml - json - package.json；
// 层级就近原则， "root": true，停止在父级目录中寻找
// .eslintignore 忽略文件；每一行都是一个 glob 模式表明哪些路径应该忽略检测

module.exports = {
    // 执行一个和eslint本身规则相同的对象；以 eslint 开头，说明使用eslint的推荐配置；plugin开头，使用第三方插件；
    "extends": "eslint:recommended", // 启用一系列核心规则，页面地址： https://cn.eslint.org/docs/rules/
    // extends: "standard", // 可共享的配置 是一个 npm 包，它输出一个配置对象
    // extends: "plugin:react/recommended", // 使用插件中的配置
    // extends: ["./node_modules/coding-standard/.eslintrc-jsx"], // 使用制定文件配置
    // extends: "eslint:all", // 启用当前安装的 ESLint 中所有的核心规则，有更改风险


    // env、parserOptions、plugins 三者均为告诉工具需要用到相关语法的配置
    "env": {
        "browser": true, 
        "commonjs": true,
        "es6": true,
        // browser - 浏览器环境中的全局变量。
        // node - Node.js 全局变量和 Node.js 作用域。
        // commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
        // shared-node-browser - Node.js 和 Browser 通用全局变量。
        // es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
        // worker - Web Workers 全局变量。
        // amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
        // mocha - 添加所有的 Mocha 测试全局变量。
        // jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
        // jest - Jest 全局变量。
        // phantomjs - PhantomJS 全局变量。
        // protractor - Protractor 全局变量。
        // qunit - QUnit 全局变量。
        // jquery - jQuery 全局变量。
        // prototypejs - Prototype.js 全局变量。
        // shelljs - ShellJS 全局变量。
        // meteor - Meteor 全局变量。
        // mongo - MongoDB 全局变量。
        // applescript - AppleScript 全局变量。
        // nashorn - Java 8 Nashorn 全局变量。
        // serviceworker - Service Worker 全局变量。
        // atomtest - Atom 测试全局变量。
        // embertest - Ember 测试全局变量。
        // webextensions - WebExtensions 全局变量。
        // greasemonkey - GreaseMonkey 全局变量。

        // 特定插件使用某种环境  不带前缀的插件名 + '/' + 环境名
        "aplugin/node": true,
    },
    "parserOptions": { // 支持的语言选项
    	"ecmaVersion": 6, // 默认支持ECMAScript 5 语法，使用版本号或是年份都支持： 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
        "ecmaFeatures": { // 额外语言特性
            "experimentalObjectRestSpread": true, // 有风险，启用实验性的 object rest/spread properties 支持
            "jsx": true, // 启用jsx
            "globalReturn ": false, // - 允许在全局作用域下使用 return 语句
			"impliedStrict": false, //  - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
        },
        "sourceType": "module" // 默认script，module表示代码是ECMAScript模块
    },
    "plugins": [ // 插件名称可以省略 eslint-plugin- 前缀。
        "react", "aplugin"
    ],
    // 插件 提供 处理器，可在预处理中 提取、检测、转换 js代码
    "processor": "aplugin/a-processor", // 插件名 + '/' + 处理器名
    "overrides": [ // 配合overrides制定特定文件
        {
            "files": ["*.md"],
            "processor": "aplugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": { // 附加配置
                "strict": "off"
            }
        }
    ],

    "parser": "Esprima", // 符合 parser interface的node模块 解析器，默认值 espree；
    // 在使用自定义解析器时，为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作，配置属性 parserOptions 仍然是必须的。解析器会被传入 parserOptions，但是不一定会使用它们来决定功能特性的开关。
    // 目前兼容的解析器：
    // Esprima
    // Babel-ESLint - 一个对Babel解析器的包装，使其能够与 ESLint 兼容。
    // @typescript-eslint/parser - 将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用。

    "globals": {
        "window": true, // 例如使用window对象，默认会报 no-undef ，如下配置即可解决
        //  "writable" 以允许重写变量，或 "readonly" 不允许重写变量，"off" 禁用全局变量
    },
    // rules 属性高于 配置通用规则，在应用规则里觉得有些不适用或不具备，可直接在此配置；0 - off, 1 - turn to warning, 2 - turn to error 报错终止程序
    // 对一类文件设置规则， overrides - files
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "off"
        ],
        "eol-last": [
            "error",
            "always"
        ],
        "no-multiple-empty-lines": [
            "error",
            {
                "max": 2,
                "maxEOF": 1
            }
        ],
        "no-multi-spaces": [
            "error",
            {
                "ignoreEOLComments": true
            }
        ],
    },
    "settings": { // 共享设置，会提供给每一个将被执行的规则
        "sharedData": "hello",
    },

}

常用配置文档

参考doc1
eslint通用规则

eslint 和 prettier 区别

前者重视质量，后者重视格式（如某行代码超长）；
ESLint+Prettier代码规范实践