Help us understand the problem. What is going on with this article?

Visual Studio CodeをWindowsにインストールしたら、最低限やっておきたい設定8個

More than 1 year has passed since last update.

Windows10にVSCodeをインストールしたするときの初期設定をご紹介します。
ベーシックな設定なので、開発言語や職種に関わらず、参考にしていただければうれしいです。

導入環境

VSCode: ver1.36
OS: Windows10

日本語化

まずはメニューを日本語化する。

  1. Ctrl + Shift + X でサイドバーに"EXTENSIONS"を表示
  2. 検索ボックスで「Japanese Language Pack」を検索しインストール
  3. Ctrl + Shift + P でコマンドパレットに"config"を入力し、プルダウンに表示された"ja"を選択
  4. 案内に従い、VSCodeを再起動すると、日本語化が完了

Tabキーでスペースを入力

メニュー[ファイル]-[基本設定]-[設定]で
"Insert Spaces" にチェックを入れる。

スペースの数は、"Tab Size" で設定。

 (半角)空白文字の表示

[ファイル]-[基本設定]-[設定]で
"Render Whitespace"で all に設定する。

行を画面幅で折り返す

行を画面幅で折り返す(横スクロールを出さない)ようにしたい。

[ファイル]-[基本設定]-[設定]で
"Word Wrap" を on に変更する。

ファイルタブ切り替えのショートカット変更

ファイルのタブ切り替えがデフォルトでは、

次のファイル:Ctrl + PageUp
前のファイル:Ctrl + PageDown

となっている。

これを次のように変更したい。

次のファイル:Ctrl + tab
前のファイル:Ctrl + shift + tab 

[ファイル]-[基本設定]-[キーボードショートカット]
メニュー右上にあるアイコン「{}」で、keybindings.jsonを開き、以下を追加する。

keybindings.json
[
    {
        "key": "ctrl+tab",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+shift+tab",
        "command": "workbench.action.previousEditor"
    }
]

インデントのガイド線の表示切替

デフォルトでインデントのガイド線(タテの線)が表示されるが、これを非表示にしたい。

[ファイル]-[基本設定]-[設定]で
"Render Indent Guides"のチェックを外すと非表示になる。

テーマ配色の変更

テーマの配色をカスタマイズしたい。

[ファイル]-[基本設定]-[設定]で
メニュー右上にあるアイコン「{}」で、settings.jsonを開き、設定を追加する。

以下例では、カーソル行の背景に色をつける、という場合。

settings.json
"workbench.colorCustomizations": { 
        "editor.lineHighlightBackground": "#FFF0F5", //カーソル行に背景色
},

配色について公式リファレンス
https://code.visualstudio.com/api/references/theme-color

文字コードの自動判定

デフォルトでOFFとなっているのを、ONにする。

メニュー[ファイル]-[基本設定]-[設定]で
"Auto Guess Encoding" の有効にチェックを入れる。

以上になります。

参考

https://qiita.com/HiroCh/items/481adfa969dbe689f566
https://qiita.com/ustakr/items/acad8dc12c166c2ad5e9
https://qiita.com/deren2525/items/6bc099ae8c05e3076055
https://www.off-soft.net/ja/software/develop2/visual-studio-code-preuse-settings.html

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした