Laravel + Vue.js + DDDのすゝめ – Vue用のVSCode環境を整備する

Vueの開発に必要なVSCode拡張機能を追加していきます。
VSCodeの拡張機能「RemoteContainer」を使用しているため、拡張機能・設定値は.devcontainerファイルにセットしていきます。

連載

本記事は複数記事の連載記事の１つです。

wonwon eater

Laravel + Vue.js + DDDのすゝめ

https://wonwon-eater.com/laravel-vuejs-ddd-susume

この組み合わせは、いま最も選ばれやすい組み合わせではないでしょうか。この土台を作るだけでも選択肢や注意するべきポイントが沢山あって一苦労です。プログラマーならコードで語れ！というように、ボイラープレート（サンプルコード）を作りながら、説明記事を追記していこうと思います。リポジトリ随時、記事を書きながら更新しています。作りながら書いているので、解説サイトでは（忘れて）省略されるようなトラブルも拾っていきたいと思います。GitHub yoshida-m-3/laravel-vuejs-dddLaravel公式ドキュメント公式ドキュメントに...

この記事に関連するコミット

• add vue .devcontainer
• add editorconfig

.devcontainer

RemoteContainerを使ってコンテナに接続している間、.devcontainerにセットされている拡張機能・設定値が有効になります。

拡張機能

拡張機能はextensionに配列形式で拡張機能IDを追加します。

Vue Language Features (Volar)

Vue3に対応したLanguage Serverです。
.vue拡張子のファイルに対してVue関連の入力補完など、サポートが有効になるので必須です。

Vue VSCode Snippets

Vueのスニペット（定型文）集です。
毎回お決まりの定型文はスニペットを使って効率化しましょう。

Vue Peek

Vue Templateに記載しているコンポーネントをピーク参照したり、定義へ移動できるようになります。
Volarが標準で対応していないため、Vue Peekで対応します。

Debugger for Chrome

VueはChromeの開発者ツールでデバッグ出来ます。
この拡張機能を入れることでデバッガーの定義とデバッグモードでChromeを実行してくれます。

Path Intellisense

文字列として'./'を入力するとディレクトリやファイルのパスを補完されます。
Volarにもコンポーネントの補完機能がありますが、上手く補完が働かない場合もあるので入れておきます。

Jest Runner

Jestを使った単体テストをターミナルでコマンドを叩かなくてもVSCode経由で実行できます。
保存時に自動的に関連するテストファイルだけ実行する機能もあり、テストを壊してもすぐに気が付きます。

Prettier – Code formatter

TypeScriptのコードをいい感じにフォーマットしてくれます。
フォーマットルールもpackage.jsonで定義可能です。
Linterで有名なESLintがLintルールでフォーマットも出来るようになりましたが、細かく設定可能ですが設定作業が少々大変です。
私の場合、Prettierを使ってみて困難な状況に陥ったらESLintを検討します。

EditorConfig for VS Code

ワークスペースに.editorconfigを置い、ファイル拡張子ごとの文字コードや改行コード、インデントの種類（タブ・スペース）、インデントサイズの設定を優先してエディタの設定を自動的に変更してくれます。
複数人や異なるエディタで触るときにルールを共通化できます。

設定値

.devcontainerのsettingsに、VSCodeの設定値をセットします。
今回はフォーマッターをprettierに切り替える設定値を入れておきます。
その他、コンテナ環境下で共有したい拡張機能の設定値が出てきたらセットしていきます。

"settings": {
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
},  

EditorConfigを追加する

改行コードやインデントの種類などを統一するための.editorconfigを追加します。

root = true

[*.js]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

[*.ts]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

[*.vue]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

[*.json]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true