VS Codeを快適に使うための初期設定とおすすめ拡張機能

概要

先日ChromebookにVSCodeを入れたので初期方法とおすすめの拡張機能についてまとめていきます。
↓前回の記事はこちら

おすすめ拡張機能

Japanese Language Pack for Visual Studio Code

VSCodeの言語を日本語にしてくれる

ESLint

コードの書き方を自動チェックして整えてくれる

Prettier - Code formatter

自動整形（; の位置、インデント、改行などを綺麗に）してくれる

Auto Rename Tag

開始タグ、終了タグのどちらかを変更した際に、タグの名前を自動で変換してくれる

Path Intellisense

コード内のファイルパスを自動補完してくれる

vscode-icons

ファイルアイコンを見やすくする

indent-rainbow

インデントを色付けして見やすくする

Code Spell Checker

コードのスペルミスを指摘してくれる

Trailing Spaces

行の最後にある無駄なスペースを可視化してくれる

チーム開発なら必須

GitLens — Git supercharged

Git を使うと、チーム開発で誰がどのコードを書いたかがわかるようになる

Git History

gitのログをわかりやすく表示してくれる

Live Share

リモートでも同じコードをリアルタイムで共有・編集できる
環境を揃えなくても、ペアプロやレビューをすぐ始められるのが特徴
以前の現場でとても重宝した拡張機能

設定で Prettier 自動整形ON

Prettier を VSCode で自動で走らせる設定

1.左下の⚙️ → Settings
2.検索バーへ「format on save」
3.Format On Save にチェックを入れる

さらに、既存フォーマッタと競合しないように

1.Settings で「default formatter」
2.Prettier - Code formatter を選択

➡ 保存するだけでコードが綺麗に整うようになる!

settings.json

1.Ctrl + Shift + P
2.「Preferences: Open Settings (JSON)」
3.下記を追加

私はReact環境なので不要でしたら下3行は除いてください

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "javascript.validate.enable": false,
  "typescript.validate.enable": false,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

各項目の意味

"editor.formatOnSave": true

保存時に自動でフォーマット（整形）する設定

"editor.defaultFormatter": "esbenp.prettier-vscode"

デフォルトのフォーマッターを Prettier に指定

"files.eol": "\n"

改行コードを LF（\n）に統一

"editor.tabSize": 2

インデントの幅を 2 スペースに設定

"editor.wordWrap": "on"

横に長いコードを折り返して表示

"javascript.validate.enable": false

VS Code 標準の JavaScript チェックを無効化

"typescript.validate.enable": false

VS Code 標準の TypeScript チェックを無効化

"eslint.validate": [...]

ESLint を有効にするファイル種類の指定

空白文字の可視化

1.左下の⚙️ → Settings
2.検索バーへ「whitespace」
3.Editor: Render Whitespace で all を選択

以下のように空白文字が一目で分かるようになる

未使用import文を自動で削除する（任意だけど便利）

setting.jsonに以下を追加

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

こうするとファイル保存時に未使用のimport文を削除し、さらにimport文の順番を並べ替えてくれます。

Terminal の改善（任意だけど便利）

VS Code のターミナルをデフォルトで bash に変更

1.Ctrl+Shift+P
2.「Terminal: Select Default Profile」
3.「bash」または「zsh」などを選ぶ（Chromebookなら bash でOK）

最後に

自分への備忘録も兼ねてまとめてみました。
他にもおすすめの拡張機能などあればコメントで教えてください。
誰かのお役に立てると幸いです。