Web歴4年目エンジニアのVisual Studio Code環境を紹介【設定編】

VS Codeの設定周りって何をしたらいいの・・？

VSCodeの設定は、開発効率を向上させるために非常に重要です。
前回のVS Code拡張機能編に続き、本記事ではオススメの設定周りを紹介していきたいと思います。

まだ読んでいないよ、という方は是非あわせてお読みください！

Web歴4年目エンジニアのVisual Studio Code環境を紹介【拡張機能編】

皆さんはVS Codeを使いこなせていますか？今では、エディタといえばVS Code一択！と呼ばれるくらいに普及したVS Code。何も拡張機能を入れなくてもある程度便利に使えるので、そのままにしているという方もいらっしゃるかもしれ...

おすすめ環境設定7選
まとめ

おすすめ環境設定7選

自動保存

通常、ファイルはCommand(Ctrl) + Sを押して保存するかと思いますが、
この機能を使うと、ファイルを自動で保存してくれるようになります。

手動保存の手間を省いてくれますし、コードの変更をすぐに反映させることができるので、開発効率を上げることができます。

設定方法はとても簡単で、下図のところから「自動保存」をオンにすればOKです。

あれ、なんで変更が反映されないんだろう・・　あ！ファイルを保存してなかった！

というような経験を一度でもしたことがある方は、是非「自動保存を有効化」しておきましょう！

ツリーインデント

"workbench.tree.indent": 16 // デフォルトは8

ツリーインデントとは、VS Codeに表示されるフォルダ階層のインデントのことです。

下図のようにデフォルトは8なのですが、個人的には少し狭くて見にくいなという印象だったので、16に変更しています💡

ポップアップの非表示

コードをホバーすると、下のような感じでリファレンスのポップアップが表示されるのを見たことありませんか？

これって間違えてMDNリファレンスのリンクを押してしまったり、コードが隠れて見えなかったりと、
不便なことの方が多く、私的にはあまり要らないなと思ったので、表示されないように設定しています！

"editor.hover.enabled": false

保存時にコードを自動整形

"editor.formatOnSave": true

こちらの設定をオンにしておくと、ファイルを保存したときにコードを自動整形してくれるようになります。

デフォルトだと、Option + Shift + Fで整形できますが、
ファイル保存時にコードまで整形してくれた方が効率的なので設定しています💡

ちょこすこーん

ただし、1項で触れた自動保存では効かないようなので、そのときは「Cmd(Ctrl) + S」を押下する必要があります🤧

ファイル削除の確認をスキップ

"explorer.confirmDelete": false

ファイルを削除しようとしたときに、このようなポップアップが表示されると思います。

個人的には、確認は不要だと思ったので、ポップアップの表示をさせないように設定しています。
間違えて削除してしまっても、Cmd(Ctrl) + Zで戻せるので問題ありません👍

CSSセレクタの区切り文字をスペースで囲む

"css.format.spaceAroundSelectorSeparator": true

CSSのセレクタに>、+、~などの区切り文字があると思いますが、
こちらはこの区切り文字の前後にスペースがない場合、自動でスペースを追加してくれる設定です。

👇 実例

ちょこすこーん

スペースがある方が可読性が上がるのでオススメです◎

ワークスペースの色分け

VS Codeで複数ウィンドウを開いていると、
どのウィンドウが何のプロジェクトが分からなくなってくることってありませんか？

👇 こんな感じで何がどのプロジェクトか識別しにくい

ですが下記のようなコードをワークスペースの設定ファイルに加えると、バーの色やアイコンの色を自由にカスタマイズできるようになります◎

{
  "settings": {
    "workbench.colorCustomizations": {
      "titleBar.activeBackground": "#0947aa", // タイトルバーの背景色
      "titleBar.activeForeground": "#ffffff", // タイトルバーの文字色
      "activityBar.background": "#0947aa", // アクティビティバーの背景色
      "activityBar.foreground": "#ffffff" // アクティビティバーの文字色
    },
  }
}