これから VScode を始める方へ #VSCode

対象となる方

この投稿はこれから VScode を使い始める方や PC を新しくしてまっさらな状態から再構築する方などに向けて書いています。（自分のためにも）

便利な拡張機能がみつかったりココ分かりにくいなってところがあれば随時更新していこうと思ってます。

全体の流れ

インストール
初期設定
1. 日本語対応
2. フォーマッター設定
必要な拡張機能のインストール

インストール

公式サイトからインストーラーをダウンロードしましょう。
インストーラーを立ち上げたら、基本的に変更なしで進めてもらって問題ありません。

初期設定

日本語対応（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を開いて下記のように記載します。

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に設定してみてください。

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 はめちゃめちゃ便利だな～とつくづく思います。拡張機能も数え切れないほど存在しているので、時間があれば一つ一つ試してみるのもアリかもしれませんね。

自分にあったコーディング環境を見つけてください！