※2021.8.3追記：本ページの内容は若干古くなってしまったので、別の記事に書き直しました。
とりあえずできたのでメモメモ。Remote Development (VSCode Remote – Containers) を使います。
VSCode でコンテナにリモート接続
まず Dockerfile と docker-compose.yml があるフォルダに .devcontainer フォルダを作り、その中に以下の２つのファイルを置いておきます。
.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 …」→ Dockerfile と docker-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 でのフォーマットができません。
参考サイト
- Docker Remote
- ESLint, stylelint