Twitterクローンを作ります #19 linterの設定

CI/CDの設定もしたので、放ったらかしにしておいたlinterの設定をしていきましょう。

# JavaScript側

ライブラリをインストールします。

```
$ npm install --save-dev eslint-plugin-prettier-vue \
                         eslint-plugin-vue \
                         eslint-plugin-import \
                         eslint-config-prettier \
                         eslint \
                         prettier
```

.eslintrc.js を以下のように修正します。

``` 
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "plugin:prettier-vue/recommended",
    "prettier",
  ],
  plugins: ["import"],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "import/order": [
      "warn",
      {
        groups: [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "object",
          "type",
        ],
        "newlines-between": "always",
        pathGroupsExcludedImportTypes: ["builtin"],
        alphabetize: { order: "asc", caseInsensitive: true },
      },
    ],
  },
};
```

これで`npm run lint`を実行するとインデントやインポート順を修正してくれます。

これはこれでいいのですが、フォーマットがおかしなファイルがpushされたときにCIで気付けるようにしておきたいのでチェック用のコマンドも追加しておきましょう。

```client/package.json
{
  "name": "toitta",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint-no-fix": "vue-cli-service lint --no-fix"
  },
  "dependencies": {
...
  },
  "devDependencies": {
...
  }
}

```

`npm run lint-no-fix` を実行するとフォーマットの違反があった際にCIが失敗して知らせてくれるようになります。

# Python側

black と isort が流行ってるみたいなのでこれを利用しましょう。

```server/requirements.txt
Flask
pymongo[srv]
gunicorn
black
isort
```

```server/pyproject.toml
[tool.black]
exclude="server-env"

[tool.isort]
profile="black"
skip="server-env"
```

これで下記を実行すると自動で修正してくれます。

```
$ cd /path/to/project/server
$ black .
$ isort .
```

チェックのみを行う場合は `black . --check` , `isort . --check-only` で行けるようです。

# CIに組み込み

```yaml:.github/workflows/deploy.yaml
name: Deploy

on:
  push:
    branches: master

permissions:
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - id: 'auth'
        name: 'Authenticate to Google Cloud'
        uses: 'google-github-actions/auth@v0'
        with:
          workload_identity_provider: 'projects/837189962146/locations/global/workloadIdentityPools/dev-pool/providers/gh-provider'
          service_account: 'ci-deploy@toitta-dev.iam.gserviceaccount.com'
      
      - uses: 'actions/setup-node@v2'
        with:
          node-version: '14'

      - name: 'Install Deps (Client)'
        working-directory: ./client
        run: npm install

      - name: 'Lint (Client)'
        working-directory: ./client
        run: npm run lint-no-fix

      - name: 'Build Client'
        working-directory: ./client
        run: npm run build

      - uses: 'actions/setup-python@v3'

      - name: 'Install Deps (Server)'
        working-directory: ./server
        run: pip install -r requirements.txt -c constraints.txt
      
      - name: 'Lint (Server)'
        working-directory: ./server
        run: |-
          black . --check
          isort . --check-only

      - name: 'Build Image'
        working-directory: ./server
        run: gcloud builds submit --substitutions=_CRED=${{ secrets.MONGO_CREDENTIAL }}

      - name: 'Deploy API'
        uses: 'google-github-actions/deploy-cloudrun@v0'
        with:
          service: 'toitta-api'
          image: 'gcr.io/toitta-dev/toitta-api'
          region: 'asia-northeast1'

      - name: 'Deploy Client'
        working-directory: ./client
        run: |-
          npm install -g firebase-tools
          firebase deploy
```

かなり差分がありましたね... でもこれで今後はいい感じで開発が進められると思います!