Eslint9发布都一年了，你确定还不了解下？

背景

eslint官方宣布2024 年 4 月起，所有新规则、新选项只合入 9.x 分支，意味着eslint9成为主要版本。而eslint9相对于eslint8做了破坏性的更改。主要更改包括：

• 对Node.js < v18.18、v19 不再受支持
• 新的默认配置格式 （eslint.config.js），并且只支持eslint.config.js/mjs/cjs。
• 扁平化的配置不仅仅提升了性能，也减少了使用者的负担，毕竟eslint8的"对象+字符串魔法+级联合并"格式导致配置一旦复杂就不可预测

使用

我们可以根据官方文档的指引，直接在终端执行：

npm init @eslint/config@latest -D

此时，只要根据命令行中的提示选择对应的操作，就能得到如下的一个比较完整的配置：

import js from "@eslint/js"
import globals from "globals"
import pluginVue from "eslint-plugin-vue"
import { defineConfig } from "eslint/config"

export default defineConfig([
  { 
    files: ["**/*.{js,mjs,cjs,vue}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: { globals: globals.browser }
  },
  pluginVue.configs["flat/essential"],
])

配置解析

但是，如果只是这样，我们根本不知道每个配置的含义，如果要做一些个性化设置，比如关闭和prettier冲突的规则或者改写某个规则，这时我们就会一脸懵了。

所以，我们接下来从0开始构建一个eslint配置

初始化项目

直接在终端执行

pnpm init

然后安装eslint9

pnpm i eslint@latest -D

在package.json中配置校验脚本

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint ."  //使用eslint校验
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "eslint": "^9.37.0"
  }
}

配置文件

新建一个demo文件

console.log(111)
const a  = 1

突然有一天，领导过来语重心长的说：现在要做两件事

1、基于安全考虑，不允许在控制台输出

2、做性能优化，对于项目中没有使用的变量，让它永远的消失

基于以上两点我们就可以使用eslint限制开发者。

首先，让我们愉快的使用eslint

pnpm lint

哦豁，翻车了

不慌，阅读报错信息发现，只是缺少一个配置文件。那就在项目根目录下新建一个elsint.config.js文件。并且配置导出一个数组

export default [
  {
    ignores: [
      'node_modules',
      'dist',
      'public',
    ],
  },
]

前面我们package.json中配置了eslint需要检查所有文件，但是实际上有些文件我们是不需要eslint扫描检测，毕竟eslint的检查也是需要耗时的，上面的配置就是告诉eslint：这些文件，不需要你插手。当然你也可以写在命令那里，但是不建议这样做(非常的凌乱)

再次运行就可以了。

配置规则

接下配置对应的规则，我们可以在eslint官网找到所有规则，然后配置一下规则

export default [
  {
    rules: {
      'no-console': 'error'
    }
  }
]

再执行下lint，此时，就能看到下面的报错了：

  9:1  error  Unexpected console statement  no-console

✖ 1 problem (1 error, 0 warnings)

 ELIFECYCLE  Command failed with exit code 1.

如果在vscode中，装了eslint扩展，甚至都不需要执行lint，直接在文件中就能标红告诉你这有问题，不得不说，方便之极。

然后在vscode的settings.json中配置：

{
  "eslint.validate": [
    "javascript",
    "vue",
    "vue-html",
    "typescript",
    "typescriptreact",
    "html",
    "css",
    "scss",
    "less",
    "json",
    "jsonc",
    "json5",
    "markdown"
  ],
}

配置预设

搞懂规则的配置后，可能有同学就会立马一个一个的配置所有的规则，在这里可以放心大胆的告诉大家：大可不必。因为我们有预设。所谓预设，就是预先设定一系列规则，只要我们使用某个预设，我们就得遵循这个预设当中的所有规则。

eslint中的预设配置也是极其简单，用到了@eslint/js这个依赖

pnpm i @eslint/js -D

然后在配置文件中引入并使用

import eslint from '@eslint/js'
export default [
  {
    ignores: [
      'node_modules',
      'dist',
      'public',
    ],
  },
  eslint.configs.recommended
]

全局变量

到这里我们会发现又有如下报错：

这个报错显示：console未被定义。简直是离谱妈妈给离谱开门--离谱到家了，码了那么多年的代码，从来没见过要定义console变量的。为啥会这样呢？这是因为console是全局变量，默认就可以直接使用，而对于eslint来说，任何变量都需要定义，不管是否全局变量。

那很好办，我们只需要和eslint打声招呼就行了，这个时候，就需要用到另一个库了：

pnpm i globals -D

然后配置一下

import eslint from '@eslint/js'
import globals from 'globals'
export default [
  {
    ignores: [
      'node_modules',
      'dist',
      'public',
    ],
  },
  eslint.configs.recommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        
        // 追加项目中使用到的其他的全局变量
        wx: true
      }
    }
  }
]

这就可以解决全局变量报错的问题了。当然这里必须得强调一下，globals配置只是告诉eslint项目中有这些全局变量，但是eslint是不会去帮你引入这些全局变量的，我们还是得通过cdn等方式注入全局变量。

支持vue

elsint只支持JavaScript，也就是说，其他文件中的语法错误它是不会识别的。而对于vue文件，我们使用的是一个叫eslint-plugin-vue的插件，当然，如果你是使用vue + typescript的技术栈，还需要一个解析：typescript-eslint，它会帮忙eslint在识别期间将ts转换成js。

pnpm i eslint-plugin-vue typescript-eslint -D

import eslint from '@eslint/js'
import globals from 'globals'
import tsEslint from 'typescript-eslint'
import eslintPluginVue from 'eslint-plugin-vue'
export default [
  {
    ignores: [
      'node_modules',
      'dist',
      'public',
    ],
  },

  // js相关预设
  eslint.configs.recommended,
  // vue相关的预设
  ...eslintPluginVue.configs['flat/recommended'],
  //ts相关的预设
  ...tsEslint.config.recommended

    // 全局变量
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,

        // 追加项目中使用到的其他的全局变量
        wx: true
      }
    }
  },

  //javascript 规则
  {
    rules: {
      'no-console': 'error',
    }
  },

  //vue 规则
  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        // typescript项目中需要
        parser: tsEslint.parser,
        ecmaVersion: 'latest',
        // 允许.vue文件中有jsx
        ecmaFeatures: {
          jsx: true
        }
      }
    },
    // 这里可以追加vue的规则
    rules: {

    }
  }

]

这一步，我们使用了eslintPluginVue.configs['flat/recommended']作为vue的推荐规则配置。如果是typescript项目，需要在languageOptions.parserOptions中配置解析器来支持typescript。

规则中的files属性则用于指定匹配的后缀文件或者目录用此规则或者解析器。如果不写files，则该规则配置对所有文件起作用。

这里还要注意规则的优先级问题，后面的规则会覆盖前面的规则，所以一般会把recommended写在最前面，然后后面再去关掉/启用一些其他规则。

prettier

很多同学对prettier和eslint两者傻傻分不清。其实两者的职责是完全不同的：prettier只会检查代码格式是否符合规范；而eslint更多的是注重代码质量的检测和修正。

当然eslint也有部分格式类的规则，而且往往这些格式类的规则会和prettier冲突，这个时候就需要我们去处理两者的规则冲突问题，这里给个结论："Eslint管对错，Prettier管好看"即，代码质量问题交给eslint，代码格式一律由prettier决定。

为了解决两者之间的冲突，我们需要引入一个插件：eslint-plugin-prettier

pnpm i eslint-plugin-prettier -D

import eslint from '@eslint/js'
import globals from 'globals'
import tsEslint from 'typescript-eslint'
import eslintPluginVue from 'eslint-plugin-vue'
import prettierPlugin from 'eslint-plugin-prettier/recommended'
export default [
  {
    ignores: [
      'node_modules',
      'dist',
      'public',
    ],
  },

  // js相关预设
  eslint.configs.recommended,
  // vue相关的预设
  ...eslintPluginVue.configs['flat/recommended'],

    // 全局变量
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,

        // 追加项目中使用到的其他的全局变量
        wx: true
      }
    }
  },

  //javascript 规则
  {
    rules: {
      'no-console': 'error',
    }
  },

  //vue 规则
  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        // typescript项目中需要
        parser: tsEslint.parser,
        ecmaVersion: 'latest',
        // 允许.vue文件中有jsx
        ecmaFeatures: {
          jsx: true
        }
      }
    },
    // 这里可以追加vue的规则
    rules: {

    }
  },
  // 这个配置一定要放到最后
  prettierPlugin
]

eslint-plugin-prettier/recommended配置其实是集成了eslint-config-prettier和eslint-plugin-prettier两个配置。

eslint-config-prettier是一个函数，它会关闭eslint中和prettier冲突的规则。

eslint-plugin-prettier是一个插件对象，告诉eslint要把prettier当做规则来跑。

也就是说eslint-config-prettier是减法，会去除eslint中原有的规则，而eslint-plugin-prettier是加法，会将prettier当做其中的一条规则。

好了，至此eslint9相关的使用就介绍完毕了，大家可以尽情的去项目中实战了。