目次
VSCode Setting
本記事は私がVisual Studio Code(以下 VSCode)導入にあたって行ったセッティング内容です.
今後,設定変更などを行った際は随時本記事内容を更新していく予定です.
VSCode導入のキッカケ
本旨から逸れるので,興味ない方は読み飛ばしてください.
私はこれまでエディタにBracketsを使用していました.
その主な理由は以下です.
- リアルタイムプレビュー機能など,フロントエンド(HTML, CSS, JS)開発向けに設計されている.
- デフォルト機能が簡素な為,初学者が使い始めるハードルが低い.
- Adobeが設計しており,DreamweaverとUIが似ている(Dwの学習コストが下がる).
- 割と最近の講座やチュートリアルでよくお勧めされている(個人差あり).
リアルタイムプレビュー以外は,ある程度コーディングに慣れてきた時点で気にする必要のないことばかりですね.
ではなぜVSCodeを導入したのかですが,そもそもインストールした理由は参加したワークショップで推奨されていたのが始まりです.
それまで使用してきたものはBrackets, Dw, Vimのみで,SublimeやAtomは触ってこなかったので,これらとの比較も兼ねています.
導入して感じた主なメリットは以下の通りです.
- minimapや統合ターミナルなど,デフォルトで痒いところに手が届く
- 使いたいテーマがBracketsにないがVSCodeにはある
- Markdown用エディタとして優秀
- Vimライクなカスタマイズが割と簡単
- Bracketsに比べて動作が早い
本記事の動作環境
- Visual Studio Code ver 1.30.1
- macOS Mojave ver 10.14.2
VSCode主要デフォルトショートカットキー
以下のショートカットキーを把握しておくと,設定作業が楽になるかもしれません.
| コマンド | キー(Mac) | キー(Win) |
|---|---|---|
| コマンドパレット入力状態遷移 | Shift-⌘-P | Ctrl-Shift-P |
| 全画面表示切替 | Control-⌘-F | F11 |
| 統合ターミナルを表示 | Control-` | Ctrl-` |
| パネル表示をトグル | ⌘-J | 確認中 |
| Settingを表示 | ⌘-, | Ctrl-, |
| Keyboard Shortcutsを表示 | ⌘-K ⌘-S | Ctrl-K Ctrl-S |
| サイドバー表示切替 | ⌘-B | Ctrl-B |
| サイドバー内にフォーカス | ⌘-0 | 確認中 |
| エクスプローラーをサイドバー表示 | Shift-⌘-E | Ctrl-Shift-E |
| 拡張機能をサイドバー表示 | Shift-⌘-X | Ctrl-Shift-X |
| 検索(表示) | ⌘-F | Ctrl-F |
| 置換(表示) | Option-⌘-F | Ctrl-H |
| 置換(実行) | Shift-⌘-1 | 確認中 |
| 全置換(実行) | Option-⌘-Enter | 確認中 |
| 全て保存 | Option-⌘-S | 確認中 |
| Markdown Previewを別ウィンドウ表示 | ⌘-K V> | Ctrl-K V |
| マルチカーソル追加 | Option-クリック | Alt-クリック |
| マルチカーソルを上下に挿入 | Option-⌘-↑/↓ | Ctrl-Alt-↑/↓ |
| 行を上下に移動 | Option-↑/↓ | Alt-↑/↓ |
| 行を上下にコピー | Shift-Option-↑/↓ | Shift-Alt-↑/↓ |
| コードを整形 | Shift-Option-F | Shift-Alt-F |
その他のショートカットキーリストは以下を参照ください.
- Mac: macOSキーボードショートカット
- Win: Windowsキーボードショートカット
設定内容
設定した内容は大きく分けて以下の通りです.
- 初期セットアップ
- エクステンション(テーマ・プラグイン)
- Vimライクカスタマイズ
- ユーザー設定
- 複数端末での設定共有
初期セットアップ
VSCodeをインストール後の初期セットアップとして,ターミナル.app(shell)での起動コマンドをインストールしました.
これによって統合ターミナルでcode ファイル名やcode ディレクトリ名を叩くと,VSCodeを離れることなくファイルやディレクトリを編集できる環境が整います.
起動コマンドインストール
- コマンドパレットに
shellを入力 - ドロップダウンリストから
Shell Command: Install 'code' command in PATHを実行
表示言語の切替
- コマンドパレットに
configを入力 - ドロップダウンリストから
Configure Display Languageを実行 →locale.jsonが自動生成され,開かれる ※ - 言語を
enからjaに書換え,保存 - VSCodeを再起動
上記手順で言語設定が反映されない場合
- Marketplaceから Japanese Language Pack for Visual Studio Code をインストール
- VSCodeを再起動
Japanese Language Pack for Visual Studio Code – Visual Studio Marketplace
表示言語 | 非公式 – Visual Studio Code Docs
エクステンション(テーマ・プラグイン)
VSCodeのカラーテーマやプラグインなどのエクステンションはマーケットプレイスから検索できます.
インストール手順は次の通りです.
- Shift-⌘-X
- テーマ・拡張機能を検索
- Installボタン押下
- VSCodeをリロード
エクステンションファイルの場所
- Mac:
~/.vscode/extension - Win:
%USERPROFILE%\.vscode\extensions
以下は個別の説明と必要な設定です.
なお,Vimの設定と複数端末での設定共有にもプラグインを使用しますが,それらは別途次節以降で説明します.
Iceberg(カラーテーマ)
これまでターミナル.appやVimのテーマはcocoponさんが開発したIcebergを使用しており,結構気に入っていたのでVSCodeでも同じテーマを使っています.
因みにBracketsにはIcebergのテーマがないので,デフォルトのダークテーマを使用していました.
テーマの反映
- ⌘-K ⌘-T
- ドロップダウンリストから
Icebergを選択
WakaTime
エディタの使用時間や使用言語をプロジェクト毎に自動でトラッキングしてくれるサービスです.
このプラグインにAPIキーを入れることで,自分のエディタの使用傾向を把握することができます.
公式サイトから主要なエディタのプラグインが提供されているので,使用中のエディタ(Dw除く)には全てインストールしています.
WakaTime · Open source plugins, goals, and automatic time tracking for programmers
WakaTimeの利用方法
- 公式サイトからアカウントを作成(GitHubアカウントを既にもっていれば5秒で作成可能)
- VS Code · WakaTime – Open source plugin for automatic time tracking
の手順に沿って自アカウントのAPIキーを入力 - VSCode上で任意のコードを記述
- WakaTimeの自アカウントページでエディタ使用状況がトラッキングされているか確認 ※
※トラッキングされていない場合,VSCodeを再起動
EditorConfig for VS Code
チーム内や異なるエディタ,OS環境でコーディングをする際に,プロジェクト毎にインデントや改行コードなどのコーディングルールを統一する為のプラグインです.
個人での開発であっても,MacとPC両方使う場合などで有効な場面があるだろうと思い導入しました.
Japanese Word Handler
本プラグインによって,日本語で書かれた文章のカーソル移動や範囲選択が非常に楽になります.
プラグインをインストール後,以下のショートカットキーが有効になります.
| コマンド | Mac | Win |
|---|---|---|
| カーソル移動 | Option-←/→ | Ctrl-←/→ |
| 範囲選択 | Option-Shift-←/→ | Ctrl-Shift-←/→ |
Markdown All in One
Markdown形式でテキストを作成する際の細々したショートカットキーや便利機能を追加します.以下は追加機能の一部を列挙します.
追加ショートカット(一部)
| コマンド | Mac | Win |
|---|---|---|
| 太字・イタリック体のトグル | ⌘-B/I | Ctrl-B/I |
| チェックボックス | – | Alt-C |
| 数式の記入の有効化 | ⌘-M | Ctrl-M |
| テーブルのフォーマット | Option-Shift-F | Alt-Shift-F |
| Markdownプレビューのトグル化 | ⌘-K V | Ctrl-K V |
その他便利機能
- 画像やリンクの補完サジェスト
- TOC(Table of Contents: 目次)の作成
- HTMLファイルへの変換
Markdown Checkbox
Markdown All in OneにはmacOS用のチェックボックス作成コマンドが割り当てられていないので,本プラグインで対応します.
プラグインをインストール後,以下のショートカットキーが有効になります.
| コマンド | Mac | Win |
|---|---|---|
| チェックボックスの作成 | Shift-⌘-C | Shift-Ctrl-C |
| チェックボックスのトグル切替 | Shift-⌘-Enter | Shift-Ctrl-Enter |
Markdown Preview Enhanced
ファイルインポート,UML作成,PDF変換などを行う為のプラグインです.
一部Markdown All in Oneと機能がダブりますが,それ以上にできることが多岐に渡るので詳しくは下記公式サイトを御覧ください.
Visual Studio Live Share
複数端末のVSCode環境をライブタイムでシェア可能になるプラグインです.
自分の使う異なる端末間でのシェアはもちろん,異なるユーザー環境をシェアすることも可能.
なんとターミナルやローカルサーバーなども共有できます.
本プラグインの利用にはWindowsアカウントもしくはGitHubアカウントが必要です.
Visual Studio Live Shareを少し試したら期待した未来だった。 – Tatsuya Sato – Medium
Vimライクカスタマイズ
Vim用のカスタマイズは人によっては完全に不要なので,個別項目として挙げています.
プラグイン Vim のインストール
本プラグインをインストールすることで,VSCodeをVimライクにカスタマイズすることができます.
連続キーバインド有効化(Mac独自設定)
vscodevim for mac ではデフォルトでキーバインドの連続入力が効かない為,次のコマンドをターミナルで実行し,VSCodeを再起動します.
因みにこのコマンドはvscodevimの詳細説明に記載されているので,そこからコピペするだけでOKです.※
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool falsedefaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false
※defaultsはmac独自のコマンドで,設定メニューからは変更できない項目を変更するときなどに利用します.詳しくはググってください.
Settings for Vim
Use System Clipboard (無名レジスタとクリップボードの同期)
Vimのyankコマンドでコピーしたテキストは,Vim上の無名レジスタに格納されます.
デフォルトではここに格納されたテキストは同一ファイル上でのみペースト可能となっており,何かと不便なのでクリップボードと同期するように設定します.
これによってyankしたテキストを他のファイルやアプリケーションでもペースト可能になります.
Hlsearch (検索結果のハイライト表示)
検索結果をハイライトします.
Visualstar (VISUALモードでの検索)
ビジュアルモードで*や#で選択範囲内を検索できるようにします.
ユーザー設定
各設定ファイル(setting.json, launch.json, locale.json, keybindings.json)の場所
- Mac:
~/Library/Application\ Support/Code/User - Win:
$HOME/Library/Application\ Support/Code/User
各設定ファイルはVSCodeをインストールした時点では存在しませんが,関連設定をデフォルトから変更した際に上記ディレクトリに自動生成されます.
各設定はVSCodeのGUIで変更でき,変更内容は自動的に対応するJSONファイルへ追記されていきます.
生成されたJSONファイルをCUIから直接編集もできますが,記述ミスの可能性を考慮するとGUIでの編集が確実でしょう.
設定 | 非公式 – Visual Studio Code Docs
キーバインディング | 非公式 – Visual Studio Code Docs
setting.jsonの中身
基本設定やプラグイン設定の変更内容は本ファイルに記述されます.
⌘-,でセッティング画面が開くので,設定したい項目の値をGUI上で変更していきます.
変更内容は自動的setting.jsonに追記されます.
下記は私のセッティング内容です.
{
// Tabキーで入力されるスペース数
"editor.tabSize": 2,
// ホワイトスペースを視覚化
"editor.renderWhitespace": "all",
// 行の折り返し
"editor.wordWrap": "on",
// タブサイズとインデントサイズを自動検出するか
"editor.detectIndentation": false,
// ミニマップスライダーを常に表示
"editor.minimap.showSlider": "always",
// スニペット予測の表示位置
"editor.snippetSuggestions": "top",
// 改行コードをLFに指定
"files.eol": "\n",
// カラーテーマ
"workbench.colorTheme": "Iceberg",
// 推奨エクステンションを要求時にのみ表示
"extensions.showRecommendationsOnlyOnDemand": true,
// Setting Syncの同期しているGist ID
"sync.gist": "50955e298a9e01ee950484611b8e4b90",
// Emmet記述をTabキーで展開可能にするか
"emmet.triggerExpansionOnTab": true,
// Vimの検索コマンド時のハイライト表示
"vim.hlsearch": true,
// Vimの無名レジスタとクリップボードを同期
"vim.useSystemClipboard": true
}keybindings.jsonの中身
ショートカットキーの追加や変更内容は本ファイルに記述されます
⌘-K ⌘-Sでセッティング画面が開くので,設定したい項目の値をGUI上で変更していきます.
変更内容は自動的にkeybindings.jsonに追記されます.
下記は私のセッティング内容(Mac用)です.
// Place your key bindings in this file to override the defaults
[
{
// ウィンドウの再読み込み
"key": "cmd+r",
"command": "workbench.action.reloadWindow"
},
{
// 最大化されるパネルの切り替え
"key": "cmd+l",
"command": "workbench.action.toggleMaximizedPanel"
},
{
// パネルにフォーカスする
"key": "cmd+;",
"command": "workbench.action.focusPanel"
}
]複数端末での設定共有
前節までの各種設定を複数端末で共有できるようにします.
私はMac,Win共に使用する環境にあるので,それに合わせて設定しています.
異なる環境下での設定共有方法はいくつかありますが,私はプラグインのSetting Syncを利用しました.
その他の共有方法としては,クラウドストレージやGitHubなどに各Jsonファイルを保存し,それらのシンボリックリンクをローカルに作成する方法などがあります.
そちらの方法がお好みの方は,次のリンクなどを参考にどうぞ.
VSCodeの設定ファイルやキーバインド、拡張機能をDotfiles形式(GitHub)で管理し、環境を共有する。｜teitei.tk｜note
プラグイン Setting Sync のインストール
本プラグインをインストールし,GitHub上のGistに共有設定ファイルを作成します.
本プラグインの利用にはGitHubアカウントが必要です.
細かな手順は下記リンクを参照ください.
一度本プラグインで作成したGistを読み込めば,以降の設定のアップロード/ダウンロードは次のショートカットキーで即座に行えるので便利です.
| コマンド | Mac | Win |
|---|---|---|
| 設定アップロード | Shift-Option-U | Shift-Alt-U |
| 設定ダウンロード | Shift-Option-D | Shift-Alt-D |
なお,設定をGistにアップロード後はsyncLocalSettings.jsonが前節に示した設定ファイル保存ディレクトリに追加されます.
以上で設定完了です.
参考サイト
本記事内で多くのサイトを参考にさせていただきました.ありがとうございました.
コメント