Firebase部署报错VS Code无提示？原因及解决方法咨询

一、部署时出现ESLint错误的原因 #

Firebase Cloud Functions初始化时会自动配置基于Google代码规范的ESLint规则，部署阶段Firebase CLI会触发ESLint对代码进行全量校验，你的代码不符合.eslintrc.js（或对应配置文件）中定义的缩进、引号、行长度、分号等规则，因此被拦截报错。

二、VS Code未提前提示的可能原因 #

• 未安装VS Code官方的ESLint插件：VS Code本身不自带ESLint校验能力，必须依赖该插件实现实时检测。
• ESLint插件未正确识别项目配置：比如项目的ESLint配置文件路径异常，或插件未自动检测到配置；也可能是工作区设置中禁用了ESLint。
• TypeScript相关ESLint依赖缺失：TS项目需要@typescript-eslint/eslint-plugin和@typescript-eslint/parser解析TS代码，若项目本地依赖未安装全，插件无法正常校验。
• 校验时机设置不合理：默认可能仅在保存时校验，若未保存代码则不会提示；或未开启实时输入校验。

三、配置VS Code实时显示ESLint错误的步骤 #

1. 安装ESLint插件
   在VS Code扩展市场搜索并安装官方的「ESLint」插件（发布者为Microsoft）。

2. 补全项目依赖
   打开终端，在Functions项目根目录执行以下命令，确保TS相关ESLint依赖安装完整：

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

3. 配置VS Code ESLint设置
   打开VS Code设置（快捷键Ctrl+,），搜索并调整以下配置：

   • 启用ESLint：将eslint.enable设置为true
   • 开启TS校验：在eslint.validate中添加"typescript"，最终配置类似：

     "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
     

   • 实时校验与自动修复：添加editor.codeActionsOnSave配置，实现保存时自动修复可修复错误；同时将eslint.run设为"onType"，开启输入时实时提示：

     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "eslint.run": "onType"
     

4. 确认项目ESLint配置文件
   检查项目根目录的.eslintrc.js，确保TS解析器配置正确，示例如下：

   module.exports = {
     env: {
       es6: true,
       node: true,
     },
     extends: [
       'eslint:recommended',
       'plugin:@typescript-eslint/recommended',
       'google',
     ],
     parser: '@typescript-eslint/parser',
     parserOptions: {
       project: 'tsconfig.json',
       sourceType: 'module',
     },
     plugins: [
       '@typescript-eslint',
     ],
     rules: {
       // 可根据需求自定义规则，比如：
       'indent': ['error', 2],
       'quotes': ['error', 'single'],
       'max-len': ['error', { code: 100 }],
       'semi': ['error', 'always'],
     },
   };
   

5. 重启VS Code
   重启编辑器，让插件和配置生效，之后就能实时看到ESLint错误提示了。

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