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

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

![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305510/ad7122e4-cf27-8872-a0de-2dd401e878f7.gif)

基本的な手順は公式ドキュメントの通りに進めれば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プロジェクトを作成します

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

```shell
$ 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`は自動修正も同時に行います。

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

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

```
$ rm tslint.json
$ npm uninstall tslint
```

# VSCodeで自動Fixする

ESLintの拡張機能を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305510/3167f0b7-9fce-d1ef-2712-49c670e90eda.png)

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

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

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

```json:settings.json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll":true
  }
}
```
（2020年8月29日現在）
このまま適当な.tsファイルを開くと、以下のポップアップが出るようになっています。拡張機能がnode_modules/eslintを使えるようにするために、`allow`を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305510/930c57bc-9b41-e1f5-2093-9cec85c99fae.png)

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

# 引っかかりポイント

### ルールの修正

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


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

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


```js:.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
```