Astro框架ESLint配置后VSCode未生效，请求协助排查

检查依赖完整性 #

你当前仅安装了eslint和eslint-plugin-astro，但配置中用到了@typescript-eslint/parser，若项目使用TypeScript，需补充安装相关依赖：

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

如果是纯JavaScript项目，直接移除配置里的parserOptions.parser行即可，避免因依赖缺失导致解析失败。

补全ESLint配置文件 #

你的.eslintrc.js存在大量// ...占位符，会导致配置不完整，替换为以下完整配置：

module.exports = {
  env: {
    browser: true,
    es2020: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:astro/recommended"
  ],
  overrides: [
    {
      files: ["*.astro"],
      parser: "astro-eslint-parser",
      parserOptions: {
        parser: "@typescript-eslint/parser", // 纯JS项目删除此行
        extraFileExtensions: [".astro"],
        ecmaVersion: "latest",
        sourceType: "module"
      },
      rules: {
        // 可添加自定义规则示例
        "astro/component-name-in-template-casing": ["error", "PascalCase"]
      },
    },
    // 处理Astro组件内的脚本文件（可选）
    {
      files: ["**/*.astro/*.js", "**/*.astro/*.ts"],
      parser: "@typescript-eslint/parser", // 纯JS项目删除此行
      extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended" // 纯JS项目删除此行
      ]
    }
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  }
};

VSCode环境适配 #

• 确认已安装ESLint插件，打开VSCode设置（Ctrl+,），搜索eslint.validate，添加.astro类型：

  "eslint.validate": [
    "javascript",
    "typescript",
    "astro"
  ]
  

• 重启VSCode或执行「Reload Window」（Ctrl+Shift+P 搜索该命令），让配置生效。

验证配置效果 #

在Astro组件中写入一段违反规则的代码，例如：

---
const test = 'hello'
---
<div set:html={test}></div>

保存后若ESLint提示astro/no-set-html-directive错误，说明配置已正常工作。

内容的提问来源于stack exchange，提问作者Jerónimo Orozco