Visual Studio Code のインストール（Brackets から乗り換え）
Microsoftのエディタ、 Visual Studio Code（Windows 64bit 版）をインストールした記録です。
きっかけはこれ。
Adobe のエディタ Brackets の画面なのですが、昨日立ち上げたところサポート終了のメッセージが……。重宝していたので残念！
しかし嘆いていても仕方ないので、このメッセージに勧められるがままに Visual Studio Code をインストールしてみることにしました。
- Visual Studio Code のインストール
- Visual Studio Code の日本語化
- 設定画面、もしくは settings.json の開き方
- Emmetを使ってみる
- 文字の折返し（Word Wrap）の設定
- 対応括弧のハイライト？ を消す
- 機能拡張 Highlight Matching Tag のインストール
- 機能拡張 Auto Rename Tag のインストール
- Brackets 難民向けページ
Visual Studio Code のインストール
まずはこちらへ。
azure.microsoft.com
「今すぐダウンロード」でダウンロード画面へ進みます。
選択肢が何種類かあるので、自分にあったものを選べばOK。
| User Installer | Users にインストールされ、インストールしたユーザーだけが使える。管理者権限は不要。 |
| System Installer | Program Files にインストールされ、そのPC全体で使える。管理者権限が必要。 |
| .zip | 解凍するだけでインストール不要。アップデートや設定等を手動で行う場面がある。 |
通常、User Installer にしてくのがおすすめのようです。そもそもインストールするPCは自分専用。System Installer を使う理由もないので、今回は「User Installer」の 64bit をインストールします。
インストールは言われるとおりに進めるだけ。便利そうなのでファイルとディレクトリに対して「Codeで開く」はチェックしておきました。
Visual Studio Code の日本語化
インストールが終わり無事起動しましたが、メニューが英語なので日本語にしたいです。
1. Ctrl + Shift + P で コマンドパレットを開く
2. Configure Display Language を選択
3. Install Additional Laugage を選択
4. Japanese Language Pack for Visual Studio Code をインストール
5. Visual Studio Code を再起動
これでメニューが日本語になりました。
設定画面、もしくは settings.json の開き方
各種設定は設定画面で行うか直接 settings.json に記述するようです。設定画面を開くには、 Ctrl ＋ , または、左下の歯車から「設定」。これで開いた設定画面の右上にあるファイルのアイコンをクリックすると settings.json が開きます。
Emmetを使ってみる
Visual Studio Code は初期状態から Emmet が使えるらしいので試してみます。新規でファイルを作り、 index.html という名前で保存。そのファイルに「 ! 」を入力して html5 のテンプレートが出てくればOK。
Emmet の設定変更（ <html lang="ja"> になるよう変更）
EmmetはOKですが、<html lang="en"> になっているのが気になります。
遠い昔 Brackets で同じようなことをした記憶がありますが、デフォルトが "ja" になるような設定にしたいと思います。
1. Ctrl + Shift + x で 拡張機能を開く
2. 検索フィルタでビルトインを選び、emmet と入力（@builtin emmet と直接入力してもOK）
3. 歯車マークを押し「拡張機能の設定」を選択
4. 設定画面の一番下「Emmet: Variables」にある「項目の追加」を押す
5. lang を ja に変更してOKを押す
settings.json に直接記述する場合、
"emmet.variables": { "lang": "ja"} でOK
これで <html lang="ja"> が出てくるようになりました。
文字の折返し（Word Wrap）の設定
文字は適当なところで折返したいので、折返しの設定を変更します。
1. Ctrl ＋ , または、左下の歯車から、設定画面を開く
2. テキストエディター の 設定にある 「Word Wrap」の設定をonに変更でOK
対応括弧のハイライト？ を消す
タグの括弧の対応を教えてくれる罫線のハイライトというか、囲みがあります。
これはあまり好みではないので消したいです。
1. Ctrl ＋ , または、左下の歯車から、設定画面を開く
2. テキストエディター の 設定にある 「Match Brackets」の設定をneverに変更でOK
もしくは、 settings.json で
"editor.matchBrackets": "never"
とすればOK
機能拡張 Highlight Matching Tag のインストール
対応するタグをハイライトさせたい
Brackets では、このように対応する開始タグと閉じタグにハイライトが入りました。これは便利だったので同じような環境にしたいと思います。
探したところ、 Highlight Matching Tag という機能拡張を見つけたので入れてみます。
1. Ctrl + Shift + x で拡張機能を開く
2. 「Highlight Matching Tag」を検索してインストール
対応するタグに黄色のアンダーラインが出ましたが、なんかショボくてがっかり。
ハイライト部分がありますが、これはおそらくこの拡張機能とは関係のない、 Visual Studio Code の強調表示機能が働いているため。
拡張機能の説明画面にいろいろと設定方法が書いてありました。settings.json で、highlight-matching-tag.styles に記述することで色々と設定変更ができそうです。
"highlight-matching-tag.styles": {
"opening": {
"full": {
"highlight": "#336600"
}
}サンプルを元に設定を記述してみると、このようになりました。
少し近づきましたが、まだまだ改善の余地があります。
Brackets のハイライトに近い設定にする
せっかくなので、もう少し Brackets の雰囲気に近づけていきたいと思います。この拡張機能、かなり細かい設定ができるようです。ただ、実際に使うのは太字の部分くらいのような気もします。
opening: Style - 開始タグ
closing: Style - 終了タグ（オプション）
inner: Decoration - タグの内側（オプション）
Style オブジェクト
name: Decoration - タグの名前部分
left: Decoration - タグ の < 部分
right: Decoration - タグ の > 部分
full: Decoration - タグ の < > を含む全ての部分
Decoration オブジェクト
highlight: string - 背景色 (例 "#666666")
underline: string - 下線色
surround: string - 囲み罫の色
custom: vscode.DecorationRenderOptions - カスタムCSSが使える（おそらく、APIの vscode.DecorationRenderOptions 経由でスタイルを適用させる）
参考： VS Code API | Visual Studio Code Extension API
実際に設定をしてみます。
（閉じタグは省略すると開始タグと同じ設定になるので、開始タグだけ設定すればOK）
"highlight-matching-tag.styles": {
"opening": {
"full": {
"custom": {
"backgroundColor": "rgba(51,102,0,.5)",
"color": "#ffffff"
}
}
}
}開始タグ（と、閉じタグ）の full に対してカスタムCSSを適用する設定にしました。
CSS部分、背景：緑透過50％、文字色：白 です。
ついでに、Visual Studio Code の強調表示ハイライトが邪魔なので切ります。これは、
"editor.occurrencesHighlight": false
です。
これでこのような感じになりました。
下は目標とした Brackets のハイライトです。いいんじゃないでしょうか。
機能拡張 Auto Rename Tag のインストール
1. Ctrl + Shift + x で拡張機能を開く
2. 「Auto Rename Tag」を検索してインストール
特に設定は不要。
これは色々調べている時に見つけました。例えば <h2> を <h3> に変更した時、閉じタグを自動で </h3> に直してくれる機能拡張だそうで、これはかなり便利そうです。
Brackets 難民向けページ
現在英語のみですが、マイクロソフトには Brackets ユーザー向けの Visual Studio Code 移行案内ページが用意してあります。こちらでは Brackets に近い使い心地で Visual Studio Code を使えることを意図した BracketsBrackets extensions なる拡張機能パックもダウンロードすることができます。なかなか親切ですね。
code.visualstudio.com
Visual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック
- 作者:森下 篤
- 発売日: 2020/02/21
- メディア: 単行本（ソフトカバー）
