Visual Studio Code、初期設定の覚え書き
1. Visual Studio Code の概要とダウンロード
Visual Studio Code は、マイクロソフト社が開発している高機能エディタです。Visual Studio Code を略して VSCode と呼ばれています。誰でも無償で利用でき、拡張機能がたくさんあるので使いやすいようにカスタマイズが可能です。下記のリンク先からダウンロードが可能です。ダウンロードが完了したら VSCode を開いて初期設定をします。
ダウンロード先
Download Visual Studio Code - Mac, Linux, Windows
2. 日本語化
VSCode のメニューの「Code > Preference > Extensions」 または、[ shift ] + [ command ] + [ X ]で拡張機能の画面に進みます。そのページの検索ボックスに「Japanese Language」と入力し、トップに表示される「Japanese Language Pack for Visual Studio Code」をインストールします。インストール後、VSCode を再起動すれば日本語化の完了です。
3. テーマ選び
テーマは VSCode 全体の配色を変更できます。VSCode にもともと入っているテーマは、「Code > 基本設定 > 配色テーマ」からテーマを選択できます。その他にも、拡張機能の画面の検索ボックスに「Theme」と入力すると色々なテーマが出てくるので、好みのテーマをインストールできます。
テーマ選びに役立つページ
https://vscodethemes.com/
ファイルアイコンのテーマ
ファイルのアイコンを変更できるテーマもあります。VSCode にもともと入っているファイルアイコンのテーマは、「Code > 基本設定 > ファイル アイコンのテーマ」から選択できます。ファイルアイコンのテーマも拡張機能からインストールできます。
4. 環境設定
settings.json を開く右上のアイコン
VSCode の設定を変更するには、「Code > 基本設定 > 設定」または、[ command ] + [ , ]（カンマ）で設定画面に移動できるので、好みの設定に変更していきます。VSCode では設定を変更すると「settings.json」というファイルに自動で変更箇所が書き込まれていきます。「settings.json」を開くには、右上のアイコンをクリックするか、[ command ] + [ shift ] + [ P ] でコマンドパレットを表示して「open settings json」と入力すると開けます。
設定を変更すると下記のように変更箇所が「settings.json」に書き込まれていきます。（コメントは書き込まれません）とりあえずは、こんな設定にしてみました。
{
"editor.fontSize": 15, //フォントサイズ
"editor.hover.enabled": false, //MDNリファレンスを非表示
"editor.matchBrackets": "never", //タグ内を選択時に「< >」の強調をしない
"editor.minimap.enabled": false, //ミニマップを非表示
"editor.snippetSuggestions": "top", //Emmetなどのスニペット候補を優先して表示
"editor.tabSize": 2, //TABキーのスペースの設定
"editor.renderLineHighlight": "none", //選択行を行番号含めすべてハイライトしない
"editor.renderWhitespace": "boundary", //半角スペースを点で表示
"editor.wordWrap": "on", //エディターの幅で折り返し
"emmet.showSuggestionsAsSnippets": true, //Emmetの候補を表示
"emmet.triggerExpansionOnTab": true, //TABキーでEmmetを展開できるようにする
"emmet.variables": { "lang": "ja"}, //Emmetで展開されるHTMLの言語を変更
"files.eol": "\n", //改行コードの設定
"workbench.colorTheme": "One Dark Pro", //テーマの設定
"workbench.editor.tabSizing": "shrink", //タブを省スペースで表示する設定
"workbench.startupEditor": "newUntitledFile" //VSCode起動時新しいファイルを表示
}
"files.eol": "\n" - Win、Mac、Linux の改行コードを統一しています。
Emmet - HTML や CSS を短い文字数でコードを展開できるツール。