ESLint

介绍

ESLint 是一个用于识别和报告 JavaScript 代码中的模式的工具。它可以帮助开发者保持代码质量和一致性，避免常见的编程错误。

快速开始

1. 安装

npm i -D eslint

2. 生成配置文件

npm init @eslint/config

支持的配置文件

• eslint.config.js
• ...

{
  extends: ['plugin:prettier/recommended'],
  files: ['src/*.ts', 'src/*.tsx'],
  rules: {
    'one-var': [0],
    semi: [2, 'always'],
    'max-params': ['error', 5],

     'prettier/prettier': ['error', { endOfLine: 'auto' }],
  },
},

配置项说明

• extends: 继承其他配置
• files: 指定 ESLint 检测的文件范围
• rules: 自定义规则配置
• ...

忽略代码

配置项 globalIgnores

// eslint.config.js
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
  globalIgnores([
    '!node_modules/', // unignore `node_modules/` directory
    'node_modules/*', // ignore its content
    '!node_modules/mylibrary/', // unignore `node_modules/mylibrary` directory
  ]),
])

忽略代码

在代码中通过注释让 ESLint 忽略某行或某段代码：

• 忽略下一行

  // eslint-disable-next-line
  const foo = 'bar'

• 忽略当前行

  const foo = 'bar' // eslint-disable-line

• 忽略一个代码块

  /* eslint-disable */
  // 这里的所有代码都会被忽略 ESLint
  const foo = 'bar'
  /* eslint-enable */

插件推荐

React

• eslint-plugin-react：React 相关的规则。
• eslint-plugin-react-hooks：React Hooks 相关的规则。
• eslint-plugin-react-refresh：React Fast Refresh 相关的规则。

Vue

• eslint-plugin-vue：Vue 相关的规则。
• @vue/eslint-config-typescript：Vue + TypeScript 相关的规则。
• @vue/eslint-config-prettier：Vue + Prettier 相关的规则。

常见示例

Vue + TS + Prettier

1. 安装依赖

pnpm add -D eslint eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript

2. 配置文件

eslint.config.js

import pluginVue from 'eslint-plugin-vue'
import vueTsEslintConfig from '@vue/eslint-config-typescript'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default [
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  ...pluginVue.configs['flat/essential'],
  ...vueTsEslintConfig(),
  skipFormatting,
]

3. 添加脚本

{
  "scripts": {
    "lint": "eslint . --fix"
  }
}