Nuxt+ESLint+PrettierとVSCodeでいい感じにやりたい2021

以前書いた記事の内容が古くなっていたため、今のやり方をメモしておこうと思い、記事にしました。

前提

WindowsでNuxtによるWebアプリ開発をする。NodeはローカルにインストールしたくないのでDockerを使う。エディタとしてVSCodeを使い、コード整形や構文チェックもしたい。

Nuxtプロジェクトを作成

まずcreate-nuxt-appでESLint、Prettier、StyleLintを有効としてプロジェクトを生成します。

$ npx create-nuxt-app --overwrite-dir .

VSCodeで使用する拡張機能

VSCodeでコンテナに接続

さて、Dockerコンテナではホスト側のソースコード類をマウントしますが、node_modules/ はボリュームとしてマウント（Volume Trick）します。そのためホスト側から node_volumes/ の中身は見えません。従ってそのままではVSCodeのESLint・Prettier・stylelintなどの拡張機能でフォーマットや構文チェックなどをすることができません。そこで Remote – Containers 拡張機能によりコンテナに接続します。

コンテナ接続をするために必要な以下の2つのファイルを .devcontainer フォルダ内に作成します。サービス名などは設定してあるものに合わせます。VSCodeでターミナルを使用したい場合はその設定と、あとコンテナ接続時に有効にしたい拡張機能をかいておきます。

.devcontainer/devcontainer.json

{
  "name": "my-webapp",
  "dockerComposeFile": [
    "../docker-compose.yml",
    "docker-compose.yml"
  ],
  "service": "app",
  "workspaceFolder": "/app",
  "settings": {
    "terminal.integrated.defaultProfile.linux": "bash",
    "terminal.integrated.profiles.linux": {
      "bash": {
        "path": "/bin/bash",
      }
    }
  },
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "octref.vetur",
    "stylelint.vscode-stylelint"
  ]
}

.devcontainer/docker-compose.yml

version: '3'

services:
  app:
    command: /bin/sh -c "while sleep 1000; do :; done"

これでVSCodeからコンテナに接続できるようになっていると思います。ウィンドウ左下の「リモートウィンドウを開きます」ボタンを押して「Open Folder in Container …」です。

コード整形のための設定

VSCodeのワークスペース設定を以下のようにします。（Prettierによるフォーマットをする／ファイル保存時にフォーマットをする／標準の構文チェックをしないようにする）

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "css.validate": false,
  "scss.validate": false
}

必要があれば、Prettierによるコード整形の対象外としたいファイルを .prettierignore に書きます（お好きに）。

.prettierignore

...
package.json
package-lock.json
.eslintrc.js
jsconfig.json
stylelint.config.js
nuxt.config.js

コード整形のルールを .prettierrc に書きます（お好きに）。

.prettierrc

{
  "semi": true,
  "singleQuote": true
}

とりあえずここまで

上記までで言及していない設定については、nuxt-create-appがデフォルトで生成する設定＆VSCodeのデフォルトの設定となっています（のはず…）。

参考までに、動作確認に使用したファイルを一式 GitHub にあげておきます。

https://github.com/voidproc/nuxt-lint-test

動作確認環境

Windows 10 21H1
VSCode 1.58.2
Docker Desktop 3.5.2
使用したDockerイメージ：node:14-slim (Node.js v14.15.3)

voidProc | ゲーム製作ログ

前提