【始め方】firebase functions + TypeScript + ESLint + prettier の始め方

はじめに

firebase functions, TypeScript, ESLint, prettier を使用したプロジェクトの始め方を書いていきます。

この記事に書いていることを前提にしていたりするので、こちらも是非ご覧ください！

プロジェクト作成

使用する node を用意します。

anyenv 経由で入れた nodenv でダウンロードしています。

【🚨注意】
M1 Mac は 14 以下に対応していないです。(Rosseta を入れれば使えるらしい）
Rosetta 入れたくないなぁって思っているので、とりあえず 16 使ってみてます。

nodenv local 16.7.0

firebase-tools をインストール

yarn global add firebase-tools

（一度もしていなければ）firebase のログイン

 firebase login

firebase functions の作成 & 移動

firebase init functions
cd functions

prettier 導入

【🚨**注意】**package.json の engins が node 14 想定なので、 一旦削除しないと出来ない

yarn add -D prettier eslint-config-prettier

@types/node 追加

yarn add -D @types/node@"14.17.12"

@typescript-eslint/explicit-function-return-type の rule を有効化する

rules: {
  "@typescript-eslint/explicit-function-return-type": "warn",
  ...
}

prettier に対応させるために、.eslintrc.js を修正して extends の最後に "prettier"を入れる

extends: [... "prettier"],

prettier の設定ファイルの作成

echo "module.exports = {\n\tprintWidth: 120\n}" > .prettierrc.js
echo "tsconfig.json" > .prettierignore

import 周りいい感じにする

yarn add -D eslint-import-resolver-typescript

.eslintrc.js を編集

module.exports = {
  ...
  extends: [..., "plugin:import/recommended", "plugin:import/typescript", "prettier"],
  ...
  rules: {
    "import/order": [
      "error",
      {
        groups: ["builtin", "external", "parent", "sibling", "index", "object", "type"],
        // pathGroups: [
        //   {
        //     pattern: "@alias/**",
        //     group: "parent",
        //     position: "before",
        //   },
        // ],
        alphabetize: {
          order: "asc",
        },
        "newlines-between": "always",
      },
    ],
  },
};

import/order についてはこちらに記載されています

functions/src/index.tsを見ると Parsing error: Cannot read fileという eslint のエラーが出ていました。

を参考に、 .eslintrc.js を編集します

module.exports = {
  // ...
  parserOptions: {
    project: "tsconfig.json",
    tsconfigRootDir: __dirname,
    sourceType: "module",
  },
  // ...
}

ホットリロード

Cloud Functions for Firebaseはローカルで実行することができます。

とても便利なのですが、デフォルトの状態ではtypescriptでホットリロードができないので、少し修正します。

package.json の scripts を編集

"scripts": {
  "lint": "eslint --ext .js,.ts .",
  "build": "tsc",
+ "watch": "yarn build -w",
- "serve": "npm run build && firebase emulators:start --only functions",
+ "serve": "firebase emulators:start --only functions",
- "shell": "npm run build && firebase functions:shell",
+ "shell": "firebase functions:shell",
  "start": "npm run shell",
  "deploy": "firebase deploy --only functions",
  "logs": "firebase functions:log"
}

yarn watch を実行し、別のタームナルで yarn serve を実行すると Hot Reload ができています。

おわりに

以上で、firabase functions を快適に開発していく環境ができました🎉

functions/src/index.ts を編集していきましょう💪