@zhangph/eslint-config v2.0.1

@zhangph/eslint-config

基于@antfu/eslint-config修改的个人配置

• 可选React、Vue配置
• 可选的Prettier风格化配置

安装

pnpm add -D @zhangph/eslint-config eslint

配置eslint.config.js

import zhangph from '@zhangph/eslint-config';

export default zhangph();

添加命令

{
  "lint:eslint": "eslint . --fix",
  "tsc": "tsc --noEmit --skipLibCheck",
}

VS Code 自动修复

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

定制

配置集成

// eslint.config.js
import zhangph from '@zhangph/eslint-config';

export default zhangph({
  // 项目类型。'lib' 表示库，默认为 'app'
  type: 'lib',

  // TypeScript 是自动检测的，你也可以明确启用它们：
  typescript: true,

  // 禁用 jsonc 和 yaml 支持
  jsonc: false,

  // Flat 配置不再支持 `.eslintignore`，请改用 `ignores`
  ignores: [
    '**/fixtures',
    // ...globs
  ],
});

// eslint.config.js
import zhangph from '@zhangph/eslint-config';

export default zhangph(
  {
    // zhangph config 配置
  },

  // 从第二个参数开始，它们是 ESLint Flat Configs
  // 你可以有多个配置
  {
    files: ['**/*.ts'],
    plugins: {},
    rules: {},
  },
  {
    rules: {},
  },
);

插件重命名

自定义前缀

import zhangph from '@zhangph/eslint-config';

export default zhangph().renamePlugins({
  /**
   * {
   *    oldPrefix: newPrefix
   * }
   */
  ts: '@typescript-eslint',
  // ...
});

覆盖规则

某些规则仅在特定文件中启用，例如，ts/规则仅在文件中启用.ts，vue/规则仅在文件中启用.vue。如果要覆盖规则，则需要指定文件扩展名：

// eslint.config.js
import zhangph from '@zhangph/eslint-config';

export default zhangph(
  {
    vue: true,
    typescript: true,
  },
  {
    // 请记住在此处指定文件 glob，否则可能会导致 vue 插件处理非 vue 文件
    files: ['**/*.vue'],
    rules: {
      'vue/operator-linebreak': ['error', 'before'],
    },
  },
  {
    // 不带“文件”的规则是所有文件的通用规则
    rules: {
      'style/semi': ['error', 'never'],
    },
  },
);

每个配置中集成了overrides方便覆盖规则

// eslint.config.js
import zhangph from '@zhangph/eslint-config';

export default zhangph({
  vue: {
    overrides: {
      'vue/operator-linebreak': ['error', 'before'],
    },
  },
  typescript: {
    overrides: {
      'ts/consistent-type-definitions': ['error', 'interface'],
    },
  },
  yaml: {
    overrides: {
      // ...
    },
  },
});

配置

Vue

启动Vue配置

// eslint.config.js
import zhangph from '@zhangph/eslint-config';

export default zhangph({
  vue: true,
});

Vue2

vueVersion 默认Vue3版本，手动更改成Vue2版本

// eslint.config.js
import zhangph from '@zhangph/eslint-config';

export default zhangph({
  vue: {
    vueVersion: 2,
  },
});

运行 npm run lint:eslint 会提示你安装对应的插件，你也可以手动安装

pnpm -D eslint-plugin-vue vue-eslint-parser

React

// eslint.config.js
import zhangph from '@zhangph/eslint-config';

export default zhangph({
  react: true,
  /**
   * eslint-plugin-react requires specifying the react version
   * The default is react 19 version
   */
  settings: {
    react: {
      version: '19', 
    },
  }
});

运行 npm run lint:eslint 会提示你安装对应的插件，你也可以手动安装

pnpm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-react

Prettier

// eslint.config.js
import zhangph from '@zhangph/eslint-config';

export default zhangph({
  prettier: true,
});

运行 npm run lint:eslint 会提示你安装对应的插件，你也可以手动安装

pnpm i -D eslint-plugin-prettier prettier

使用外部Prettier配置文件

import zhangph from '@zhangph/eslint-config';

export default zhangph({
  prettier: {
    usePrettierrc: true,
  },
});

同时也提供了Prettier外部文件的配置 @zhangph/prettier-config