eslint 生态

• eslint 官方文档
• eslint 中文文档
• typescript-eslint 官方文档
• typescript-eslint 中文文档
• @unocss/eslint-config

安装

pnpm add eslint -D

配置文件

• 根目录下创建 eslint.config.mjs,
• 支持类型提示 /** @type {import('eslint').Linter.Config[]} */

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    rules: {
      // 配置规则
    },
    ignores: [], // 忽略文件
  },
]

在 package.json 文件添加

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

忽略文件

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    ignores: [
      '**/node_modules',
      '**/dist',
      '**/dist-*',
      '**/*-dist',
      '**/.husky',
      '**/.nitro',
      '**/.output',
      '**/Dockerfile',
      '**/package-lock.json',
      '**/yarn.lock',
      '**/pnpm-lock.yaml',
      '**/bun.lockb',
      '**/output',
      '**/coverage',
      '**/temp',
      '**/.temp',
      '**/tmp',
      '**/.tmp',
      '**/.history',
      '**/.turbo',
      '**/.nuxt',
      '**/.next',
      '**/.vercel',
      '**/.changeset',
      '**/.idea',
      '**/.cache',
      '**/.output',
      '**/.vite-inspect',
      '**/CHANGELOG*.md',
      '**/*.min.*',
      '**/LICENSE*',
      '**/__snapshots__',
      '**/*.snap',
      '**/fixtures/**',
      '**/.vitepress/cache/**',
      '**/auto-import?(s).d.ts',
      '**/components.d.ts',
      '**/vite.config.mts.*',
      '**/*.sh',
      '**/*.ttf',
      '**/*.woff',
    ],
  },
]

配置语言

vue

• eslint-plugin-vue vue 官方 eslint 插件

import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import unocss from '@unocss/eslint-config/flat'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  {
    extends: [unocss],
  },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended, ...pluginVue.configs['flat/recommended']],
    files: ['*.vue', '**/*.vue'],
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
        parser: '@typescript-eslint/parser',
      },
    },
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  }
)

react

• eslint-plugin-react-hooks hooks 规则
• eslint-plugin-react-refresh 热重载
• globals 环境标识

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
)