如何为VitePress配置ESLint与Prettier并解决校验命令报错？

问题 #

我拥有一个VitePress项目，希望使用ESLint和Prettier对代码文件，尤其是Markdown文件进行校验与格式化。已配置的脚本与依赖如下：

{
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "lint": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix",
    "format": "prettier . --check",
    "format:fix": "prettier . --write"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "5.56.0",
    "@typescript-eslint/parser": "5.56.0",
    "eslint": "8.36.0",
    "eslint-config-prettier": "8.8.0",
    "prettier": "2.8.7",
    "vite-plugin-eslint": "1.8.1",
    "vitepress": "1.0.0-alpha.65"
  }
}

prettierrc.json文件内容为{}，.eslintrc.cjs文件内容为：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
};

注：知晓缺少.vue文件相关插件，但目前无需Vue自定义配置，故暂不添加。

执行npm run format:fix可正常格式化文件（包括Markdown文件），但执行npm run lint:fix时出现错误：

No files matching the pattern "." were found.
Please check for typing mistakes in the pattern.

项目中存在可被检测的文件（至少包含/docs/.vitepress/config.ts），仍出现该报错。请问问题出在哪里？是否有针对VitePress项目配置ESLint与Prettier的权威指南？

解答 #

1. 报错原因与解决方法 #

ESLint默认不会自动识别所有文件类型，当前配置仅指定了TypeScript解析器，但未明确告知ESLint需要检查的文件范围，也未配置Markdown文件的校验规则。直接使用.作为目标路径时，若ESLint找不到匹配其默认支持类型的文件，就会抛出该错误。

解决步骤：

• 明确指定检查的文件类型：修改package.json中的lint脚本，添加具体文件扩展名：

  "scripts": {
    "lint": "eslint . --ext .ts,.js,.md --max-warnings=0",
    "lint:fix": "eslint . --ext .ts,.js,.md --fix"
  }
  

• 添加Markdown文件的ESLint支持：安装eslint-plugin-markdown插件以解析Markdown中的代码块：

  npm install eslint-plugin-markdown --save-dev
  

  修改.eslintrc.cjs配置，添加插件并适配Markdown规则：

  module.exports = {
    // 原有配置保留
    plugins: ["@typescript-eslint", "markdown"],
    overrides: [
      {
        files: ["*.md"],
        processor: "markdown/markdown",
        rules: {
          // 可根据需求关闭Markdown代码块中不适用的规则
          "@typescript-eslint/no-unused-vars": "off"
        }
      },
      {
        files: ["*.md/*.ts", "*.md/*.js"],
        rules: {
          // 针对Markdown内代码块的自定义规则
        }
      }
    ]
  };
  

2. VitePress项目配置参考 #

目前没有专门针对VitePress的官方权威配置指南，但可结合以下官方文档适配：

• ESLint官方文档：重点关注文件类型配置、插件扩展（如eslint-plugin-markdown）
• Prettier官方文档：查看Markdown格式化的默认规则与自定义配置
• VitePress官方文档：了解项目结构，确保ESLint/Prettier覆盖核心文件（配置文件、文档Markdown等）

也可参考社区成熟VitePress项目的配置示例，核心是基于ESLint和Prettier的通用规则适配VitePress的文件结构。

内容的提问来源于stack exchange，提问作者baitendbidz