如何解决VSCode适配TS版Firebase Functions的编译、补全及格式化问题

前置准备 #

确保已在VSCode中安装以下插件：

• ESLint
• Prettier - Code formatter

1 解决.eslintrc.js CommonJS模块报错 #

报错原因是functions目录下package.json中配置了"type": "module"，而.eslintrc.js默认以CommonJS规范加载，二者冲突。
直接将.eslintrc.js重命名为.eslintrc.cjs即可，Node会自动识别.cjs后缀为CommonJS模块，无需修改原有配置内容。

2 解决index.ts import语句无明确原因红波浪报错 #

该问题90%以上是VSCode全局TypeScript版本和项目依赖的TypeScript版本不匹配导致，按以下步骤修复：

• 打开任意.ts文件，点击VSCode右下角显示的TypeScript版本号
• 在弹出的选项中选择「使用工作区版本」
• 如果问题仍存在，删除functions目录下的node_modules、package-lock.json/yarn.lock，执行npm install重新安装依赖后重启VSCode
• 如果你打开的是Firebase项目根目录而非functions子目录，需要在后续的VSCode工作区配置中指定ESLint工作目录，参考下文配置。

3 ESLint + Prettier规则统一 + 保存自动格式化配置 #

3.1 安装依赖 #

在functions目录下执行命令安装必要开发依赖：

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

3.2 调整ESLint配置 #

修改.eslintrc.cjs的内容，将Prettier规则集成到ESLint中，避免规则冲突，参考配置：

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    // 放在extends最后一位，会覆盖其他配置中与Prettier冲突的规则
    "plugin:prettier/recommended"
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  rules: {
    // 将Prettier的格式问题标记为ESLint错误
    "prettier/prettier": "error",
    // 可在这里添加自定义规则
  },
  // 忽略不需要校验的文件
  ignorePatterns: [".eslintrc.cjs", "lib"],
};

3.3 新增Prettier配置 #

在functions目录下新建.prettierrc.cjs文件，配置统一的格式化规则，示例：

module.exports = {
  semi: true,
  trailingComma: "es5",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
};

3.4 配置VSCode工作区规则 #

在项目根目录新建.vscode/settings.json文件，配置保存自动格式化、自动修复ESLint错误：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript"],
  "prettier.requireConfig": true,
  // 如果打开的是Firebase项目根目录，必须加这一行指定ESLint工作目录
  "eslint.workingDirectories": ["./functions"]
}

4 解决Firebase部署Lint报错 #

Firebase部署时会自动执行npm run lint校验，先确认functions目录下package.json的scripts配置正确：

{
  "scripts": {
    "lint": "eslint --ext .js,.ts .",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "deploy": "firebase deploy --only functions"
  }
}

如果部署仍提示lint错误，可在functions目录手动执行npm run lint查看具体错误，修复后再部署即可。

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