VuePress2 添加 ESLint Typescript

常规 ESLint 配置通常比较复杂，好在之前一直关注过 antfu 大佬的 eslint-config，乘着有时间把自己的 VuePress2 博客也迁移到使用该 ESLint 配置，该配置使用比较简单，不用太多繁琐的操作，照着项目文档操作即可。

安装 @antfu/eslint-config

这里额外添加了typescript，不然不支持格式化 TS 文件

pnpm add -D eslint typescript @antfu/eslint-config

添加eslint.config.mjs到项目根目录

import antfu from '@antfu/eslint-config'

export default antfu()

package.json文件中可以添加校验和格式化的命令

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

添加 TS 配置

这里推荐使用用于 Vue 项目的 TS 扩展@vue/tsconfig

安装@vue/tsconfig

pnpm add -D @vue/tsconfig

根目录添加tsconfig.json文件，以下是我自己的配置文件，可以参考下。

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "composite": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/.vuepress/*"],
      "@websites/*": ["src/.vuepress/public/assets/websites/*"],
      "@theme-hope/*": ["node_modules/vuepress-theme-hope/lib/client/*"]
    },
    "noEmit": true
  },
  "include": ["src/.vuepress/**/*", "types/**/*", "utils/**/*"],
  "exclude": [
    "node_modules",
    "src/.vuepress/.cache",
    "src/.vuepress/.temp",
    "src/.vuepress/dist"
  ]
}

添加 VsCode 配置

为了不影响全局的项目，将下面的配置添加到工作区的配置文件.vscode/settings.json中

{
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

添加忽略文件

由于 ESLint 忽略文件.eslintignore文件在不久的将来会被弃用，这里推荐使用antfu配置中的ignores，忽略掉 vuepress 相关不用的文件内容。

import antfu from '@antfu/eslint-config'

export default antfu({
  ignores: [
    '**/node_modules/*',
    '!**/.vuepress/**',
    '**/.vuepress/.cache/**',
    '**/.vuepress/.temp/**',
    '**/.vuepress/dist/**',
    // 由于会格式化及校验md文件中的代码块的内容，这里我暂时忽略了md文件
    '**/*.md'
  ]
})

添加 Prettier 单独格式化 MD 文件

该配置会要求禁用 Prettier 和代码自动保存功能，导致 MD 文件在保存的时候无法使用 Prettier 自动格式化，这里先暂时先注释prettier.enable和editor.formatOnSave来启用默认的 Prettier 和代码自动格式功能。

{
  // Disable the default formatter, use eslint instead
  // "prettier.enable": false,
  // "editor.formatOnSave": false,
}

这样后自动保存 Prettier 格式化会和 ESLint 格式化打架，我这里暂时添加了.prettierignore文件忽略会打架的文件。

**/*.js
**/*.jsx
**/*.ts
**/*.tsx
**/*.vue
**/*.json
**/*.html
**/*.yaml

额外规则启用禁用

工厂函数antfu还接受任意数量的任意自定义配置覆盖

import antfu from '@antfu/eslint-config'

export default antfu(
  {
    // Configures for antfu's config
  },
  // From the second arguments they are ESLint Flat Configs
  // you can have multiple configs
  {
    files: ['**/*.ts'],
    rules: {},
  },
  {
    rules: {},
  },
)

结语

这样整个项目就可以愉快的使用antfu/eslint-config配置进行自动格式化代码了。更多其他配置可以参考项目的文档即可。