VSCode(win)でコンテナ内のNuxt開発環境のESLintでコード整形

とりあえずできたのでメモメモ。Remote Development (VSCode Remote – Containers) を使います。

VSCode でコンテナにリモート接続

まず Dockerfiledocker-compose.yml があるフォルダに .devcontainer フォルダを作り、その中に以下の2つのファイルを置いておきます。

.devcontainer/devcontainer.json

{
  "name": "awesome container", //適当に変える
  "dockerComposeFile": [
    "../docker-compose.yml",
    "docker-compose.yml"
  ],
  "service": "app", //docker-compose.ymlに合わせて変える
  "workspaceFolder": "/app", //適当に変える
  "settings": {
    "terminal.integrated.shell.linux": null
  },
  "extensions": []
}

.devcontainer/docker-compose.yml

version: '3'
# "app"は ../docker-compose.ymlに合わせて変える
services:
  app:
    command: /bin/sh -c "while sleep 1000; do :; done"

次に VSCode に Remote Development をインストールします。

インストールが終わったらウィンドウ左下の「リモート ウィンドウを開く」→「Open Folder in Container …」→ Dockerfiledocker-compose.yml があるフォルダを選択。

しばらく待つと、コンテナ内にリモート接続できます。サイドバーのエクスプローラツリーにコンテナ内のファイルが表示されていると思います。

VSCode で ESLint

.vue ファイルは Vetur で編集するので、インストールしておきます。あと ESLint も。そしてコード整形を ESLint で行う設定をします。

settings.json

{
  "javascript.format.enable": false,

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  "vetur.format.defaultFormatter.css": "none",
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.less": "none",
  "vetur.format.defaultFormatter.postcss": "none",
  "vetur.format.defaultFormatter.stylus": "none",
  "vetur.format.defaultFormatter.scss": "none",
  "vetur.format.defaultFormatter.ts": "none",
  "vetur.format.defaultFormatter.js": "none"
}

これで、ctrl+s でファイル保存したタイミングで、.eslintrc.js に書いてあるルールでコードが整形されるようになっていると思います。

とりあえず .js ファイルと、.vue ファイルの <template><script> の中はフォーマットされるようになりました。

VSCode で stylelint

stylelint-plus を入れて、以下の設定をします。

settings.json

...

  "scss.validate": false,
  "css.validate": false,
  "stylelint.autoFixOnSave": true
}

これで .vue ファイルの <style> の中がフォーマットされるようになりました。

できてないこととか

Prettier と連携するのはなんか辛そうだったのでやっていないです。Format Document でのフォーマットができません。

参考サイト

コメントを残す

メールアドレスが公開されることはありません。