対象となる方
この投稿はこれから VScode を使い始める方や PC を新しくしてまっさらな状態から再構築する方などに向けて書いています。（自分のためにも）
便利な拡張機能がみつかったりココ分かりにくいなってところがあれば随時更新していこうと思ってます。
全体の流れ
- インストール
- 初期設定
- 日本語対応
- フォーマッター設定
- 必要な拡張機能のインストール
インストール
公式サイトからインストーラーをダウンロードしましょう。
インストーラーを立ち上げたら、基本的に変更なしで進めてもらって問題ありません。
初期設定
日本語対応（Japanese Language Pack for Visual Studio Code）
その名の通り、日本語に設定してくれる拡張機能です。VScode は初期設定では英語になっているので、インストールして VScode を再起動して簡単に日本語対応しましょう。（ポップアップで再起動するか聞かれます）
デフォルトのフォーマッターを設定
きれいなコードは可読性を上げますし、何より煩雑なコードは見るだけでモチベーションが下がってしまうものです。チーム開発においてはフォーマッターが異なると差分が分かりづらく、本来の変更が紛れ込んでしまいます。
フォーマッターを設定することで自動でコードを整形し、可読性を向上させ、誰でも同じルールでコーディングができるため、ソース管理において必須ともいえる項目です。
Prettier
フォーマッターはPrettierがよく使われるものとして挙げられます。
その他は HTML に有効なフォーマッターとしてBeautifyがありますが、メンテナンスが終了しているようです。（代替品があれば教えてください～）
フォーマッター（Prettier）設定手順
- サイドメニューの拡張機能より
Prettierと検索、もしくはこちらからインストール - ウインドウ左下の設定（
Ctrl+,）から設定画面を開く - 検索窓に
formatterと入力 →Default Formatter欄のプルダウンからPrettierを選択
個別に設定を変える場合（例.HTML はBeautify、CSS と JavaScript はPrettierとしたいとき）は設定画面右上からsetting.jsonを開いて下記のように記載します。
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
新規作成時のファイル形式のデフォルト設定
初期設定のままだとファイル形式はプレーンテキストになっています。
こちらの設定はあまり使わないかもしれませんが、環境によっては煩わしさを解消してくれます。
:::note warn
プレーンテキストのままだと補完が働きません。ファイル形式を合わせることでそれに合った補完を提供してくれるので、作業効率も上がるしタイポも減ります。
:::
VScode 上で新規作成(Ctrl+n)した場合のみプレーンテキストとなります。既存のファイルを開く場合は拡張子にあわせて自動でファイル形式が変わります。
新規作成からすぐに書き始めたいのに毎回毎回プレーンテキストから形式を切り替えるのは面倒くさい！という方は下記をsetting.jsonに設定してみてください。
// HTMLをデフォルトにしたい場合
"files.defaultLanguage": "html"
入れると便利な拡張機能
拡張機能は環境や好みでインストールするといいので、使えそうなものだけ入れてみてください。
HTML
| 拡張機能名 | 機能説明 |
|---|---|
| Live Preview | コーディング中の HTML をプレビューします（Win:Alt+L→Alt+O、Mac:Command+L→Command+O） |
| Auto Rename Tag | 対になっているタグのどちらかを変更するともう片方も同時に変更してくれます |
| HTMLHint | HTML の記法の間違いやタグの不足などを教えてくれます |
| Image preview | 行数の横に img タグで指定した画像を表示します（サイズは小さいですが…） |
| indent-rainbow | インデントに色を自動でつけて見やすくします |
| Highlight Matching Tag | 任意のタグにカーソルを当てると対になっているタグを教えてくれます |
| zenkaku | コードの中に含まれている全角に色を付けて教えてくれます |
| Path Autocomplete | ファイルパス補完 |
| HTML End Tag Labels | クラスが付与されているタグの終了タグにクラス名を表示 |
CSS/SCSS
| 拡張機能名 | 機能説明 |
|---|---|
| CSS Peek | 対応する CSS スタイルを教えてくれます（F12） |
| Live Sass Compiler | SCSS/SASS を自動で CSS に変換 |
| CSSTree validator | CSS のスペル間違いを指摘してくれます |
| Color Info | 色コードをホバーすると色イメージがポップアップで表示されます |
JavaScript
| 拡張機能名 | 機能説明 |
|---|---|
| ESLint | コードの文法や記述間違いを教えてくれます。Prettier とセットで使うことが多いです |
| Code Spell Checker | コード内のスペルミスを波線で教えてくれます ※マークダウンとかで造語とかサービス名とか書くときにエラー表示されてしまうことも・・・（Qiita もエラー扱いされちゃう） |
| Error Lens | エラーをインラインで教えてくれます（Code Spell Checker と相性がよさそう） |
Git
| 拡張機能名 | 機能説明 |
|---|---|
| Git Graph | Git を GUI で操作できる拡張機能で、視覚的にブランチやコミット管理ができます |
| Gitmoji | コミットメッセージにコミットの種類を一目でわかるアイコンを付けられる拡張機能 |
Icon
| 拡張機能名 | 機能説明 |
|---|---|
| Material Icon Theme | エクスプローラー上のファイル左側にフラットデザインでシンプルなアイコンをつけてくれます |
番外
| 拡張機能名 | 機能説明 |
|---|---|
| Markdown All in One | マークダウン記法をサポートしてくれるオールインワンパッケージ |
| markdownlint | マークダウン用 Linter 記法に間違いがあれば教えてくれますが Qiita 記法とは少し相性がよくなさそう |
| Qiita Markdown Preview | マークダウンのプレビューを Qiita 対応してくれる拡張機能 |
| Sort JSON objects | JSON ファイルをアルファベット順にソート |
Tips
テーマ
VScode のいいところの一つとして、好みの見た目にカスタマイズできるところですよね。
VS Code Themesで数え切れないほどのテーマが提供されているので、自分好みのテーマがきっと見つかる！
オススメのテーマ
| テーマ名 | 機能説明 |
|---|---|
| Eva Theme | ダークモードのコントラストが弱めでかつ見やすい、目に優しいテーマです |
| GitHub Theme | GitHub をイメージしたテーマです |
| Iceberg Theme | クールなイメージで全体的に青みのあるグレーを基調としたテーマです |
ワークスペースの概念
VScode ではワークスペースという概念が存在します。イメージとしては、例えばプロジェクト A 用の作業スペースやプロジェクト B 用の作業スペースといった感じです。（名前のとおりですね）
ワークスペースのメリット
- ワークスペースを作成することで区切りがハッキリし、複数の案件を抱えている状態に切り替えがしやすくなる。
- 他のワークスペースから干渉しにくく、抱えている案件に集中できる。
- ワークスペース毎に設定を変えられるため、案件に合わせた設定をすることができる。
最後に
個人的に VScode はめちゃめちゃ便利だな～とつくづく思います。拡張機能も数え切れないほど存在しているので、時間があれば一つ一つ試してみるのもアリかもしれませんね。
自分にあったコーディング環境を見つけてください！