# Eslint_test

**Repository Path**: webmx/eslint_test

## Basic Information

- **Project Name**: Eslint_test
- **Description**: student eslint
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-01-27
- **Last Updated**: 2024-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## ESLint的配置

### 项目初始化
```js
    // 1.项目初始化
    npm init -y

    // 2.安装ESLint包
    yarn add eslint -D

    // 3.配置ESLint
    npx eslint --init

    // 4.校验
    npx eslint `src/fileName`
    // 检验所有文件
    npx eslint `src`
    npx eslint `src/fileName1 src/fileName2`
    // 检验文件目录下某一类型文件，可以配置到package.json中
    npx eslint --ext .js,.jsx `src`

    // 5.修复
    // 单个文件
    npx eslint `src/fileName` --fix
    // 所有文件
    npx eslint `src/**` --fix
    // 修复文件中某一类型文件，可以配置到package.json中
    npx eslint --ext .js,.jsx `src` --fix

    // 6. 取消所有内联注释
    npx eslint 'src' --no-inline-config

```
```js
    // 命令行 https://zh-hans.eslint.org/docs/latest/use/command-line-interface
    // --ext在目录中匹配目标文件中所有扩展
    --ext

    // 安装eslint插件时配置vscode
    // 保存时自动格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

    // 如果在同一目录下存在多个配置文件，ESLint 将按照以下优先顺序以此使用其一：
        // .eslintrc.js
        // .eslintrc.cjs
        // .eslintrc.yaml
        // .eslintrc.yml
        // .eslintrc.json
        // package.json

    // 使用配置注释
    // 单行注释
        /* eslint-disable-next-line eqeqeq -- 下一行禁用eqeqeq */
    // 全文注释，只应用于当前页面 
        /* eslint-disable eqeqeq -- 全文禁用=== */
    // 换行注释
        /* eslint eqeqeq:2
            ---
            校验eqeqeq报错
        */

    // 1.字符制定规则
        // 0表示关闭off / 1表示警告warn / 2表示错误error
        /* eslint eqeqeq:"warn", curly:2  --- 多个规定 */
        /* eslint quotes:["error", "double"] -- 设置规则 */
        /* eslint quotes:["error", "double", { "avoidEscape": true }] -- 规定规则的多个属性 */

    // 禁用
        /* eslint-disable -- 下面的代码不受规则约束 */
        /* eslint-disable eqeqeq -- 下面的代码不受eqeqeq规则约束 */
        /* eslint-enable -- 下面的代码受规则约束 */
        /* eslint-enable eqeqeq -- 开启规则eqeqeq */

        /* eslint-disable-line -- 当前行不受规则约束 */
        /* eslint-disable-line no-alert -- 当前行不受no-alert规则约束 */
        /* eslint-disable-line no-alert, quotes -- 当前行不受no-alert, quotes规则约束 */
        /* eslint-disable-next-line -- 下面一行不受规则约束 */
        /* eslint-disable-next-line no-alert -- 下面一行不受no-alert规则约束 */
```

### ESLint配置文件入门

- 配置文件格式
    + .eslintrc.js
    + eslint加载优先级， js > yaml > json, 最好是js

- JS格式使用模式
    + CommonJS
    + 使用脚手架中webpack打包默认使用的是CommonJS
    + 配置ESLint文件 应尽可能与它保持一致

- env节点
    ```js
        env: {
            browser: true,
            commonjs: true,
            es2021: true
        }
    ```
    + 在ESLint的各种规范中，一般都不允许使用`未在页面内声明的成员`
    + 而在开发中经常会用到一些环境自带的API
        - 浏览器中的window / document
        - nodejs的 __dirname
        - es2021的WeakRef
    + 所以要告诉eslint，当前代码是在哪些环境中运行，这样检查时就不会报错了

- extends
    ```js
        extends: {
            'standard',  // eslint-config-standard
            // 'eslint:all' // 内置：所有
            // 'eslint:recommended' // 内置：推荐规则
        },
    ```
    + 检查时使用哪些规范？通过这个节点可以配置使用 内置规范 还是 第三方规范
    + 配置 extends 时，可以省略 eslint-config- ，直接写成standard


- globals节点
    ```js
        globals: {
            '_': true,  // 可以读取，可以修改
            '$': false, // 可以读取，不可以修改
        },
    ```
    + 可以使用 `globals` 节点来手动配置全局成员
    + 这个节点需要手动添加，默认是没有的

- overrides
    + 在配置文件中禁用一组文件的规则
    ```js
        overrides: [
            {
                "files": [".test.js", "*-02.js"],
                "rules": {
                    "no-console": "off"
                }
            },
        ]
    ```

- ignorePatterns
    + 忽略校验文件
    ```js
        ignorePatterns: ['02.js']
    ```

- noInlineConfig
    + 禁用文件内所有注释语句
    ```js
        noInlineConfig: true
    ```

- parserOptions
    ```js
        parserOptions: {
            ecmaVersion: 'latest'
        },
    ```
    + ESLint解析器解析代码时，可以指定使用哪个js版本
    + 注意：这里指定检查时按照哪个js版本语法检查，但这里不包含 全局变量
    + 全局变量需要通过前面的 `env` 节点配置

- rules
    ```js
        rules: {
        }
    ```
    + 不使用 extend 节点配置 `整套的规范`，而是在rules节点中直接配置
    + 使用 extend 节点配置 `整套的规范`，在rules节点中修改部分规范的配置


### ESLint语法规范本质
- 本质是`函数`
- ESLint内置285个规则，每条规则都是一个create函数
- 在进行语法检查时，会将代码传入这些函数内做检查


### 语法规范包类型
- ESLint内置规范包
    + eslint-all（280多）  / eslint-recommended （50多）
- 标准规范包（需要下载）
    + eslint-config-standard
- 第三方规范包
    + google/airbnb/facebook