もくじ
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_00.png)
VSCode(Visual Studio Code)は、無料でオープンソース、Mac/Win/Linux対応のエディタです。
Visual Studio Code
基本的な設定をメモ。
日本語化する
エクステンションタブから「Japanese Language Pack for VS Code」を検索し、インストールしてアプリを再起動。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_01.png)
テーマを変更する
「設定 > ワークベンチ > 外観」から「Monokai」を選択。Monokai大好き。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_02.png)
基本設定を変更する
フォントサイズを14、タブサイズを2に変更。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_03.png)
Wrap Selection with Tag(タグで囲う)
SublimeTextやATOMのように「Control + W」でタグで囲うようする。
エクステンションタブから「htmltagwrap」を検索し、インストールしてアプリを再起動。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_04.png)
さらに、ショートカットを「Option + W」→「Control + W」に変更したいので、ウインドウ左下の歯車アイコンから「キーボード ショートカット」を選択。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_05.png)
キーバインドを変更。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_06.png)
Insert <br> Tag
「Shift + Enter」で <br> タグを追加できるようにする。
エクステンションタブから「Insert <br> Tag」を検索し、インストールしてアプリを再起動。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_07.png)
Auto Rename Tag
開始タグ変更で、閉じタグも同時に変更できるようにする。
エクステンションタブから「Auto Rename Tag」を検索し、インストールしてアプリを再起動。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_08.png)
Path Autocomplete
<img/**>などのパスの入力支援。>エクステンションタブから「Path Autocomplete」を検索し、インストールしてアプリを再起動。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_09.png)
Partial Diff
選択テキスト同士の差分を確認できる。
エクステンションタブから「Partial Diff」を検索し、インストールしてアプリを再起動。
![](https://www.head-t.com/img/2019/2019-12/2019-12-12_10.png)