HUA
首页/文章/eslint

eslint 9.x 升级或使用指南，eslint.config.js 配置，包含 react、typescript、prettier 等常用配置升级迁移

2024-09-11
967 字约 4 分钟
...
学习

不再支持 Node v19.x 和 LTS18.18.0 版本

名词解释：

  • LTS：Long-Term Support 是 Node 的长期支持版本（维护和安全更新），通常每隔两年发布一次，特点是稳定和可靠性，建议生产使用。
  • 非 LTS（current）：是 Node 的最新开发版本，通常每隔几个月发布一次，包含最新的功能和实验特性，缺乏稳定性。

Flat 配置文件取代 eslintrc 配置

新版 eslint.config.{js,cjs,mjs} 已经取代了 .eslintrc 配置文件，如果你是 “怀旧派” 可以将你的环境变量 ESLINT_USE_FLAT_CONFIG 设为 false，但 Implement Flat Config 中已经明确表示在下一阶段（10.x）中会移除对旧配置文件的兼容。

eslint.config.js

eslint 9 中支持 Common JS 和 ESM 两种配置文件格式，推荐使用 ESM。

eslint.config.js

const eslint = require('@eslint/eslint');

module.exports = [
  eslint.configs.recommended,
  
  {
    name: 'custom-lint-config',
    files: ['*.js'],
    rules: {
      'no-undef': 0,
    },
  },
];
eslint.config.mjs

`import eslint from '@eslint/eslint';

export default [
  eslint.configs.recommended,
  
  {
    name: 'custom-lint-config',
    files: ['*.js'],
    rules: {
      'no-undef': 0,
    },
  },
];`

新 Rule：no-useless-assignment

no-useless-assignment 规则用于检测无用的赋值操作，例如 let id = 1234; 中 1234 没有被使用。

let id = 1234; 
id = calculateId();

可无参数运行 eslint 命令

在 flat config 中，不向 CLI 中传入任何参数时，eslint 会默认对当前目录进行 lint 检查，如：npx eslint

npx eslint

使用 eslint 推荐配置来初始化 lint 规则。在 flat config 中，配置顺序也尤为重要，若规则相同，后面的配置会覆盖前面的配置。 或者定义全局生效的 rules 和 ignores, 来覆盖。

pnpm add eslint @eslint/js -D

若你的配置对象的 key 仅有 files 或 ignores 时，那么这些规则将全局生效。

eslint.config.mjs

import eslint from '@eslint/js';

const flatConfig = [
  {
    name: 'some global cofig here',
    languageOptions: {
      globals: {
        
      },
    },
    rules: {
      'no-unused-vars': 0,
    },
  },
  {
    name: 'some user comfig here',
    files: ['src/**.{ts, tsx}'],
    rules: {
      
    },
  },
  
  {
    files: ['src/**.{ts, tsx}'],
  },
  
  {
    ignores: ['dist'],
  },
];

export default [
  eslint.configs.recommended,
  
  ...flatConfig,
];

本文档包含 typescript、react、prettier、babel 等常用配置的升级迁移，更多配置请查看官方文档的迁移指南或查看仓库说明。

typescript-eslint

typescript-eslint 提供了在 flat config 中使用推荐配置来帮你快速开箱，该推荐配置默认包含 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin。

使用 typescript-eslint 推荐配置

若需要覆盖 rules，需定义 global rules

https://typescript-eslint.io/getting-started/ > https://github.com/typescript-eslint/typescript-eslint

pnpm add typescript typescript-eslint -D
eslint.config.mjs

`import eslint from '@eslint/js';
import tsEslint from 'typescript-eslint';

const flatConfig = [
  {
    name: 'some comfig here',
    rules: {
      
    },
  },
  
  {
    rules: {
      '@typescript-eslint/ban-types': 2,
    },
  },
];

export default tsEslint.config(
  eslint.configs.recommended,
  ...flatConfig,
  ...tsEslint.configs.recommended,
);`

使用 @typescript-eslint/parser 自定义

pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
eslint.config.mjs

`import eslint from '@eslint/js';
import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
import tsEslintParser from '@typescript-eslint/parser';

const flatConfig = [
  
];

const customTsFlatConfig = [
  {
    
    name: 'typescript-eslint/base',
    languageOptions: {
      parser: tsEslintParser,
      sourceType: 'module',
    },
    files: ['**/*.{ts,tsx}'],
    
    rules: {
      ...tsEslintPlugin.configs.recommended.rules,
      '@typescript-eslint/ban-types': 2,
      '@typescript-eslint/no-confusing-non-null-assertion': 2,
    },
    plugins: {
      
      '@typescript-eslint': tsEslintPlugin,
    },
  },
];

export default [eslint.configs.recommended, ...flatConfig, ...customTsFlatConfig];`

@babel/eslint-parser

@babel/eslint-parser 是 babel 官方提供的 parser，支持 babel 的所有语法特性，包括 jsx、flow、typescript 等。大部分情况下，你可能只需要 @typescript-eslint/parser 即可

pnpm add @babel/eslint-parser @babel/preset-env -D

配置时请注意多个 parser 之间顺序。

eslint.config.mjs

`import eslint from '@eslint/js';

import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
import tsEslintParser from '@typescript-eslint/parser';

import babelParser from '@babel/eslint-parser';

const flatConfig = [
  
];

const customTsFlatConfig = [
  
];

const bableConfig = {
  name: 'babel-parser',
  languageOptions: {
    parser: babelParser,
    parserOptions: {
      babelOptions: {
        babelrc: false,
        configFile: false,
        browserslistConfigFile: false,
        presets: ['@babel/preset-env'],
      },
      requireConfigFile: false,
    },
  },
};

export default [eslint.configs.recommended, ...flatConfig, bableConfig, ...customTsFlatConfig];`

eslint-plugin-react、eslint-plugin-react-hooks

同样，eslint-plugin-react 也提供了 flat config 的推荐配置，你可以直接使用它们。

https://github.com/jsx-eslint/eslint-plugin-react > https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks

pnpm add eslint-plugin-react eslint-plugin-react-hooks globals -D
eslint.config.mjs

`import eslint from '@eslint/js';

import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
import tsEslintParser from '@typescript-eslint/parser';

import babelParser from '@babel/eslint-parser';

import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';

import globals from 'globals';

const flatConfig = [
  
];

const customTsFlatConfig = [
  
];

const bableConfig = {
  
};

const reactConfig = {
  name: 'react-eslint',
  files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
  plugins: {
    react: reactPlugin,
    'react-hooks': reactHooksPlugin,
  },
  languageOptions: {
    ...reactPlugin.configs.recommended.languageOptions,
    
    
    
    
    
    globals: {
      ...globals.es2022,
      ...globals.browser,
      ...globals.node,
    },
  },
  rules: {
    ...reactPlugin.configs.recommended.rules,
    'react/react-in-jsx-scope': 0,
  },
  settings: {
    react: {
      
      version: 'detect',
    },
  },
};

export default [
  eslint.configs.recommended,
  ...flatConfig,
  bableConfig,
  reactConfig,
  ...customTsFlatConfig,
];`

或者直接使用 推荐配置

eslint.config.mjs

`import reactPlugin from 'eslint-plugin-react';

export default [reactPlugin.configs.recommended];`

eslint-plugin-prettier

eslint-plugin-prettier 用于将 prettier 的格式化规则转换为 eslint 的规则，以便在 eslint 中使用 prettier 的格式化规则。

https://github.com/prettier/eslint-plugin-prettier/tree/master

pnpm add eslint-plugin-prettier eslint-config-prettier -D
eslint.config.mjs

`import eslint from '@eslint/js';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default [eslint.configs.recommended, eslintPluginPrettierRecommended];`

使用 @eslint/config-inspector 来检测配置的规则或 parser 是否命中。match 的 config name 为每项 flat config 的 name

 

 

配置汇总

eslint.config.mjs

`import eslint from '@eslint/js';

import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
import tsEslintParser from '@typescript-eslint/parser';
import tsEslint from 'typescript-eslint';

import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';

import babelParser from '@babel/eslint-parser';

import globals from 'globals';

const customTsFlatConfig = [
  {
    name: 'typescript-eslint/base',
    languageOptions: {
      parser: tsEslintParser,
      sourceType: 'module',
    },
    files: ['**/*.{ts,tsx}'],
    rules: {
      ...tsEslintPlugin.configs.recommended.rules,
      '@typescript-eslint/ban-types': 2,
      '@typescript-eslint/no-confusing-non-null-assertion': 2,
    },
    plugins: {
      
      '@typescript-eslint': tsEslintPlugin,
    },
  },
];

const flatConfig = [
  
  {
    name: 'global config',
    languageOptions: {
      globals: {
        ...globals.es2022,
        ...globals.browser,
        ...globals.node,
      },
      parserOptions: {
        warnOnUnsupportedTypeScriptVersion: false,
      },
    },
    rules: {
      'no-dupe-class-members': 0,
      'no-redeclare': 0,
      'no-undef': 0,
      'no-unused-vars': 0,
    },
  },
  {
    name: 'react-eslint',
    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
    plugins: {
      react: reactPlugin,
      'react-hooks': reactHooksPlugin,
    },
    languageOptions: {
      ...reactPlugin.configs.recommended.languageOptions,
      
      
      
      
      
    },
    rules: {
      ...reactPlugin.configs.recommended.rules,
      'react/react-in-jsx-scope': 0,
    },
    settings: {
      react: {
        
        version: 'detect',
      },
    },
  },
  {
    name: 'babel-parser',
    languageOptions: {
      parser: babelParser,
      parserOptions: {
        babelOptions: {
          babelrc: false,
          configFile: false,
          browserslistConfigFile: false,
          presets: ['@babel/preset-env'],
        },
        requireConfigFile: false,
      },
    },
  },
  {
    ignores: ['dist'],
  }
];

export default [
  eslint.configs.recommended,
  eslintPluginPrettierRecommended,
  ...flatConfig,
  ...customTsFlatConfig,
];`

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
eslint2024-10-11
ESLint 正式支持 JSON 和 Markdown
ESLint 团队近日宣布，ESLint 现已支持对 JSON 和 Markdown 文件进行代码检查。这标志着 ESLint 向提供语言无关的源代码代码检查平台迈出了重要的一步。 背景 早在七月份，ESLint 团队就发布了未来发展计划，提到将 ESLint 转型为更通用的 Linter，能够支持多种编程语言。经过几个月的努力，团队成功地提取了与 JavaScript 特定相关的核心功能，使 ESLint 现在能够对 JSON 和 M...
学习
eslint2024-10-11
项目中既然有了 prettier 文件，为什么还需要 .editorconfig
文件用于设置代码格式化和文件风格的规则。这些规则可以让不同的开发者在使用不同的编辑器时，都能够保持一致的代码风格。.editorconfig 文件主要配置以下几类属性：缩进风格、缩进大小、换行符、字符编码、行末空白、文件末尾新行等。 下面是 .editorconfig 文件中可用的配置选项及其详细作用。 .editorconfig 文件详解 指定当前 文件为项目的根配置文件。如果设置为 ，编辑器在找到这个文件后不会继续向上层目录查找其他...
学习
eslint2024-09-14
eslint9+vite+vue3+prettier配置
eslint9+vite+vue3+prettier配置 今年更新eslint9之后，新建项目不再像之前那样的配置方式了，被整吐血的作者在尝试3小时之后，终于整合了eslint9+vite+vue3+prettier，完美运行，有问题可以评论，一起进步 安装插件 package.json截图 新建 ,内容如下 新建 ,内容如下 新建 ,内容如下 中的配置 最后再配置 好了，开始你的eslint9之路吧
学习
eslint2024-08-19
最全的 ESLint 配置流程来了
在前端开发中，代码质量和一致性至关重要。 「ESLint」 是帮助你提升代码质量的关键工具，尤其是在使用 「Vue」 和 「React」 进行开发时，合理配置和使用 ESLint 能够大幅提升开发效率和代码质量。但是，你知道如何在 「VSCode」 中无缝集成 ESLint，并让它自动为你提示和修复代码问题吗？如果还不清楚，赶紧学习，否则你可能已经落后了！ 目前您可能还用不到这篇文章，不过可以先收藏起来。希望将来它能为您提供所需的帮助！...
学习
eslint2024-08-09
还在复制粘贴 eslint 配置？封装个预置函数，彻底解放你的双手
阅读本文您将收获： 1. 了解 预置函数的设计思路。 2. 了解 预置函数实现的具体过程。 3. 了解 预置函数在实际项目中的应用。 预置函数基于 ，若版本在此之前，请查看 设计比较简单， 配置文件 中，直接调用预置函数 并导出其返回结果。 函数允许针对特定项目场景，传入自定义的配置规则，覆盖预置规则。 函数中预置了一系列 规则配置，主要分为两部分 默认启用配置 和 按需启用配置 。 默认启用配置 包括大多数项目都需要的基础配置，诸如...
学习
AI2026-09-01
Deep Agents 01：何为 Agent Harness，以及如何开始
1、本篇任务：完成一份多步骤、带证据的技术调研 普通客服 Agent 的问题短、工具少、输出即时。技术调研或编码任务会持续很久，产生计划、搜索结果、文件和中间结论。Deep Agents 在 LangChain/LangGraph 之上预装规划、虚拟文件系统、上下文压缩和子 Agent，适合这类开放任务。 本课让 Agent 比较两种向量数据库，并交付一份可验证报告。 2、什么时候需要 Deep Agent 满足以下两项以上再考虑：任务...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录