前置き

TSLintは2019年に非推奨になり、代わりにESLintが推奨されました。
https://github.com/palantir/tslint
しかしCloudFunctionsが未だにTSLintしかいれることができないため、今回はESLintに置き換える手順を紹介します。ついでにESLintの拡張機能を使って自動フォーマットさせます。全部で10分程度で終わります。最終的には以下の画像のようになります。

基本的な手順は公式ドキュメントの通りに進めればOKです。本記事も引っかかりポイント意外は手順通りに進めています。
ESLint導入方法
https://github.com/eslint/eslint
VSCodeのESLint設定方法
https://github.com/microsoft/vscode-eslint

環境

VSCode 1.47.0
firebase-tools 8.9.2
ESLint 7.7.0（このあと入れる）

前準備（プロジェクトがすでにあるなら飛ばす）

firebaseプロジェクトを作成します

$ npm i -g firebase-tools
$ firebase init //Functionsを指定します、TSLintは最終的に消すのでどちらでも大丈夫です

ESintを導入

$ cd functions/
$ npm install eslint --save-dev

$ ./node_modules/.bin/eslint --init

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JavaScript

package.jsonでESLintの自動修正をさせるために以下を変更します。
--estは対象拡張子の指定、--ignore-pathは修正対象外ファイルの指定でデフォルトは.eslintignoreです。.は対象を全ファイルに指定、--fixは自動修正も同時に行います。

package.json

"scripts": {
    "lint": "eslint --ext .js,.ts, --ignore-path .gitignore . --fix",
}

最後に、TSLintとお別れします。

$ rm tslint.json
$ npm uninstall tslint

VSCodeで自動Fixする

ESLintの拡張機能を追加します。

設定を変更するため、.vscode/settings.jsonを開きます。
無い場合はファイルを作成しても良いのですが、私はいつも設定→ワークスペースをタブ選択→「settings.jsonで編集」を適当に探して開きます。そうすると勝手に上記のファイルが出来上がるので楽です。

余談ですがプロジェクトごとにワークスペースの設定を編集できるので、例えばプロジェクトごとに背景テーマを変えたりなどができます。他のプロジェクトとかぶるとマズイ場合や、チーム開発時に設定を共有したい場合などワークスペースごとに設定したほうが何かと便利です。

以下を追加します。
以前はeslint.autoFixOnSaveが使われていましたが、vscodeの標準フォーマッターと被るためフォーマットがうまく働かない事例が多かったようです。現在はcodeActionsOnSaveが推奨されています。

settings.json

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll":true
  }
}

（2020年8月29日現在）
このまま適当な.tsファイルを開くと、以下のポップアップが出るようになっています。拡張機能がnode_modules/eslintを使えるようにするために、allowを選択してください。

これで保存時にESLintが走るようになります。

引っかかりポイント

ルールの修正

途中エラーが出たので対処します

 4:1  error  Require statement not part of import statement  @typescript-eslint/no-var-requires

require構文を使うなということなのですが、今回は使いたいので.eslintrcからルールを修正します。

.eslintrc

  'rules': {
    '@typescript-eslint/no-var-requires':'off'
  }

PCのファンが回る

ESLint設定をしていると突然PCのファンが唸りを上げることがあります。アクティビティモニターを見るとCodeHelperが動いているので、おそらくESLintの捜査対象ファイルが多すぎるのが原因です。特にnode_modulesの大量のファイルを操作された日にはファンが止まらないので、.gitignoreや.eslintignoreを置いて追跡対象外にするのを忘れないようにしたいです。

Standardルールを選択

JavaScriptのスタイルガイドでAirbnbも有名で、私も一度こちらを選んでみたのですが、ルールがガチガチ過ぎてちょっと使いにくいなと思いました。より大きめの規模感で使われるならアリかもしれないのですが、小さいアプリを作る程度だとオーバースペックかと思い今回は緩めのStandardを採用しました。

✔ Which style guide do you want to follow? · standard

CloudFunctionsにESLintを導入してVSCodeで自動修正まで

前置き

環境