Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

現在の場所：ホーム / アーカイブdevelopment

By コメントを書く

Visual Studio Code コンプリート設定(Mac版) ~ Web開発に必要なVSCodeの初期設定と使い方の完全版 ~

Visual Studio Code コンプリート設定(Mac版) ~ Web開発に必要なVSCodeの初期設定と使い方の完全版 ~

Webの世界は移り気が激しく、特にJavscript関係のフレームワークやツールはどれもこれも短いライフサイクルで消滅していきます。Webサイト構築やWebアプリケーション開発のためのテキストエディタも同様です。今回は今一番人気のテキストエディタVisual Studio Codeの設定方法を紹介します。(2019/4/2に内容の一部をアップデートしました)

はじめに

実はこのブログで昔から人気のある記事は以下のSublime Text3をインストールしたらまずやることの記事です。

[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること

2014年1月に書いた記事ですが、当時はSublime Text3がリリースされたばかりで日本語の情報や本などは無く、私のブログくらいしかしっかりと説明した情報が無かったため、大人気の記事となりました。おそらく、この記事は日本で一番最初にSublime Text3をまともな形で紹介した記事だったのではないでしょうか。

しかし、時の流れは早く、2018年現在では、Sublime Textに変わる新たテキストエディタとして、AtomやBrackets、そして今回紹介するVisual Studio Codeが台頭してきました。

GitHubでのスターの数は2018/2/17現在で以下の通りです。

  • Visual Studio Code : 44392 Star
  • Atom: 43430 Star
  • Brackets: 28694 Star

スター数という観点で言えば、Visual Studio Codeが最も人気があるテキストエディタという事になります。

個人的な感覚で言うと、3年くらい前まではSublime Text、2年くらい前はAtom、１年くらい前はVisual Studio Code、という風に人気が変化していったような気がします。私の場合は、2年前からずっとVisual Studio Codeを使っています。なぜなら、一番使いやすいと思っているからです。正直Javascriptで真面目にコーディングするならこれ一択だとさえ思っています。

今回は、今更ながら、Visual Studio Codeの設定方法を紹介します。

Visual Studio Codeのインストール

Visual Studio Codeの公式サイトからインストーラがダウンロードできます。

https://code.visualstudio.com/

ただ、Macの場合はインストーラーを使うのはめんどくさいので、HomebrewのCaskを使うことでコマンドラインからインストールできます。

$ brew cask install visual-studio-code
$ code -v
1.20.1
f88bbf9137d24d36d968ea6b2911786bfe103002
x64

また、Visual Studio Codeはコマンドラインのインターフェースも提供されているので、GUIを使うのがめんどくさい方は公式サイトのコマンドラインのページを参考にすると良いでしょう。

基本設定

エディタ設定

それでは設定をしましょう。

Visual Studio Codeの設定は「Code -> 基本設定 -> 設定」から行えます。ショートカットは「Command + ,」です。

スクリーンショット 2018 02 17 17 50 45

すると、以下のように、左側にデフォルト設定、右側にユーザ設定が表示されます。この「ユーザ設定」のみを変更して設定を行います。

スクリーンショット 2018 02 17 18 32 03

基本設定としては以下を設定すれば良いでしょう。

  "window.zoomLevel": 1, //ウィンドウのズームレベル(フォントサイズと合わせて調整)
"editor.fontSize": 14, //フォントサイズ
"editor.tabSize": 2, //インデントの数
"editor.renderWhitespace": "all", //空白を表示
"editor.insertSpaces": true, //タブキーでスペースを挿入
"editor.lineNumbers": "on", //行番号を表示
"editor.detectIndentation": true, //ファイル内のタブやスペースを検出
"editor.minimap.enabled": false, //ミニマップを表示しない
"editor.wordWrap": "bounded", //ビューポートとwordWrapColumnの最小値でエディタを折り返す
"editor.wordWrapColumn": 120, //エディタの折り返し桁
"editor.rulers": [
120 //エディタの折返し桁をルーラーで表示する
],
"editor.parameterHints.enabled": true, //入力時のヒントを表示
"editor.autoClosingBrackets": "always", //左かっこの後に右かっこを自動補完
"editor.autoIndent": true, //インデントの自動調整
"editor.suggestOnTriggerCharacters": true, //トリガー文字の入力時に候補を表示
"editor.acceptSuggestionOnEnter": "on", //Enterキーで候補を受け入れる
"editor.snippetSuggestions": "inline", //スニペットの提案
"editor.selectionHighlight": true, //選択した箇所を強調表示
"editor.occurrencesHighlight": true, //カーソルを置いた箇所の強調表示
"editor.mouseWheelZoom": false, //Controlを押下した状態でフォントをズームできる
"editor.renderControlCharacters": true, //制御文字の表示
"editor.renderIndentGuides": false, //インデントガイド
"editor.renderLineHighlight": "all", //行やガターのハイライト
"editor.codeLens": true, //コードレンズを表示する
"editor.folding": true, //エディタ内のソースコードを折り畳んでまとめる
"editor.formatOnSave": true, //ファイルを保存した時にフォーマッターを動かす
"editor.matchBrackets": true, //かっこの対応表示
"editor.trimAutoWhitespace": true, //ファイルの不要な空白をトリムする
"files.trimTrailingWhitespace": true, //ファイル保存時に空白をトリムする
"diffEditor.ignoreTrimWhitespace": true, //差分エディタが空白をdiffと判断しないようにする
"files.encoding": "utf8", //ファイルの文字コード指定
"files.autoGuessEncoding": false, //ファイルの文字コードの自動判別(encodingで指定する場合は無効にする)
"editor.multiCursorModifier": "ctrlCmd", //マルチカーソルの時のコマンド(デフォルトはAlt)
"files.eol": "\n", //改行コード
"terminal.integrated.fontSize": 14, //ターミナルのフォントサイズ
"terminal.integrated.letterSpacing": 0, //ターミナルの文字の間隔
"terminal.integrated.lineHeight": 1, //ターミナルの行の間隔
"terminal.integrated.copyOnSelection": true, //ターミナルで選択した箇所がコピーされる
"terminal.integrated.cursorBlinking": false, //ターミナルでカーソルの箇所を点灯させない
"terminal.integrated.cursorStyle": "block", //ターミナルのカーソルの形
"terminal.integrated.rightClickBehavior": "copyPaste", //右クリックでコピペ

日本語で簡単な説明を表記しましたが、デフォルト設定を見ると日本語で説明が書かれているので、分からない設定があればすぐに確認できます。

キーマップの移行

他のテキストエディタから移行してくる場合に問題になるのはキーマップです。Sublime TextとAtomからVisual Studio Codeに移行する場合のプラグインを紹介します。

Sublime Textからのキーマップの移行

Sublime Textから移行してきた人は、プラグイン「Sublime Text Keymap and Settings Importer」をインストールして、コマンドパレットから「Import Sublime Text Settings」をクリックして設定を選ぶことで、Sublime Textの設定を引き継げます。

Atomからのキーマップの移行

Atomから移行してきた人は、プラグイン「Atom Keymap」をインストールして設定することで、Atomの設定を引き継げます。

テーマのインストールと設定

「Shift + Command + P」でコマンドパレットを表示し、「color」と入力すると「配色テーマ」を選択できます。

スクリーンショット 2018 02 17 18 23 19

「配色テーマの選択->その他の配色テーマをインストール」から、好きなデザインのテーマを選んでインストールできます。

スクリーンショット 2018 02 17 18 38 33

テーマのインストールが完了したら、同じく「配色テーマの選択」から好きなテーマを選べば、設定が自動的に「ユーザ設定」に書き込まれます。

スクリーンショット 2018 02 17 18 39 13

私は「Solarized Light」を使っています。

アイコンのインストールと設定

「Shift + Command + P」でコマンドパレットを表示し、「icon」と入力すると「ファイル アイコンのテーマ」を選択できます。

スクリーンショット 2018 02 17 18 23 39

「ファイル アイコンのテーマを選択します->その他のファイル アイコンをインストール」から、好きなデザインのテーマを選んでインストールできます。

スクリーンショット 2018 02 17 18 39 32

アイコンのインストールが完了したら、同じく「ファイル アイコンのテーマを選択します」から好きなアイコンを選べば、設定が自動的に「ユーザ設定」に書き込まれます。

スクリーンショット 2018 02 17 18 39 45

私は「Material Icon Theme」を使っています。

フォントの変更

２つのフォントの設定を紹介します。

JavaScriptに最適なフォント「Fira Code」の設定

Homebrewから以下のようにして、フォントをインストールします。

$ brew cask install font-fira-code

「Code -> 基本設定 -> 設定」からVisual Studio Codeの設定を開き、以下を追記します。

  "editor.fontFamily": "Fira Code", //エディタのフォント
"editor.fontLigatures": true, //フォントの合字を有効にする

これでフォントに「Fira Code」が設定できました。

一般的なコーディングに最適なフォント「Ricty Diminished」の設定

Homebrewから以下のようにして、フォントをインストールします。

$ brew cask install homebrew/cask-fonts/font-ricty-diminished

「Code -> 基本設定 -> 設定」からVisual Studio Codeの設定を開き、以下を追記します。

  "editor.fontFamily": "Ricty Diminished", //エディタのフォント
"terminal.integrated.fontFamily": "Ricty Diminished", //ターミナルのフォント（必要であれば）

これでフォントに「Ricty Diminished」が設定できました。

以上で、基本設定は完了です。

Web開発のためのおすすめプラグイン

プラグインのインストール方法

おすすめのプラグインを紹介する前に、プラグインのインストール方法を説明します。

プラグインのインストールはエディタの右側メニューの下にある四角いマークをクリックすると検索できます。

スクリーンショット 2018 02 17 17 52 09

プラグインを選んで「インストール」をクリックします。インストールが終わると、「インストール」の表示が

スクリーンショット 2018 02 17 18 14 05

「再読み込み」の表示に

スクリーンショット 2018 02 17 18 13 43

変わるので、後は「再読み込み」をクリックしてVisual Studio Codeを再起動すれば、プラグインが有効になります。

おすすめのプラグイン

それでは、おすすめのプラグインを紹介していきます。プラグインは非常にたくさんあるので、いろいろ試してオリジナルの設定を完成させるとより楽しくコーディングができると思います。比較的オススメなプラグインに「★」を付けてあります。

基本設定で使ったプラグイン

HTMLのためのプラグイン

CSSのためのプラグイン

Javascriptのためのプラグイン

Gitのためのプラグイン

  • GitLens … ファイルにコミットした人を確認できる ★
  • Git History … Gitのコミット履歴を確認できる ★
  • Git Project Manager … Gitプロジェクトを行き来する ★
  • Git Blame … 誰がコミットしたかがステータスバーで見れる ★

Markdownのためのプラグイン

その他

今回はReactやAngular、Vueと言った特定のフレームワーク向けのプラグインはできるだけ書かないようにしました。そういったプラグインは基本的にスニペットだけなので、必要に応じて拡張機能を検索して人気があるものをインストールすればだいたい欲しいものは手に入ります。

いろいろプラグインのインストールが終わったところで、自分のVisual Studio Codeにインストールされている拡張機能を一覧で表示してみましょう。

$ code --list-extensions

私の場合は、使ってもいない大量のプラグインが表示されています。たまにプラグインが原因で不具合が起こる場合があるので、定期的にメンテナンスしましょう。

最低限知っておくべきショートカット

ここではWeb開発で必要な最低限知っておくべきショートカットを紹介します。

基本

  • Command+K+S キーボードショートカットを表示する
  • Command+, 設定ファイルを表示する
  • Command+Shift+P コマンドパレットを表示する
  • Command+Shift+N 新しいウィンドウを作成する
  • Command+W ファイルを閉じる
  • Command+Shift+W エディタを閉じる
  • Command+Control+F フルスクリーンに切り替える(トグル)
  • Command+B サイドバーの表示・非表示を切り替える(トグル)
  • Command+Shift+E　(サイドバーが表示されている時に)エクスプローラーパネルを表示する
  • Command+Shift+D　(サイドバーが表示されている時に)デバッグパネルを表示する
  • Command+Shift+X　(サイドバーが表示されている時に)エクステンションパネルを表示する
  • Command+Shift+M リンターなどの問題情報の表示・非表示を切り替える(トグル)
  • Control+` ターミナルの表示・非表示を切り替える(トグル)
  • Command+N 新しいファイルを作成する
  • Command+S ファイルを保存する
  • Command+Option+S 全てのファイルを保存する
  • Command+A ファイル内を全て選択する
  • Command+Z 一つ前に戻す

検索と置換

  • Command+F 特定のファイル内で単語を検索する
  • Command+G (検索した状態で)検索した単語を行き来する
  • Command+Option+F 特定のファイル内で検索した単語を置換する
  • Command+Shift+1 (検索した状態で)選択している一つを置換する
  • Command+Option+Enter (検索した状態で)全てを置換する
  • Command+Shift+F 全ファイルで検索する
  • Command+Shift+H 全ファイルで置換する
  • Command+P ファイルを検索して表示する
  • Control+Tab 表示しているファイルを行き来する
  • Command+Option+→ (2つ以上のファイルを表示して)右側のファイルを選択する
  • Command+Option+← (2つ以上のファイルを表示して)左側のファイルを選択する

画面分割

  • Command+\ (ファイルを表示して)画面を2等分した右側にファイルを表示する(もとのファイルはそのまま)
  • Command+Control+→ (2つ以上のファイルを表示して)選択しているファイルを画面を2等分した右側に移動する
  • Command+Control+← (2つ以上のファイルを表示して)選択しているファイルを画面を2等分した左側に移動する
  • Control+数字 (2つ以上のファイルを画面を分割して表示して)分割してるファイルを行き来する

カーソル移動

  • Option+矢印 単語単位にカーソルを移動する
  • Shift+Option+矢印 単語単位に選択範囲を移動する
  • Command+↑ ファイルの先頭にカーソルを移動する
  • Command+↓ ファイルの末尾にカーソルを移動する
  • Option+↑ 同じ階層の行単位でカーソルを上に移動する
  • Option+↓ 同じ階層の行単位でカーソルを下に移動する
  • Command+クリック 複数のカーソルを設定する
  • Command+Shift+Option+↑ 複数のカーソルを設定する
  • Command+Shift+Option+↓ 複数のカーソルを設定する
  • Command+Shift+\ 括弧を行き来する

範囲選択

  • Command+D 単語を選択する
  • Command+Control+Shift+→ ソースコードのブロック単位で選択範囲を広げる
  • Command+Control+Shift+← ソースコードのブロック単位で選択範囲を縮める

その他

  • Command+Shift+D 行を複製する
  • Option (関数などの上にカーソルを置いて)関数などの定義へ移動するためのアンダーラインを表示する(クリックすれば定義へ移動する)
  • Tab (HTMLファイル内で)Emmetを実行する
  • Shift+Open+F ソースコードを整形する

カスタムショートカットの作成方法

今回は置換のショートカットをカスタマイズしてみましょう。

ショートカットをカスタマイズする

「Command+K+S」でショートカット画面を表示し、「置換」のショートカットを編集します。

NewImage

新しいショートカット「Command+H」を入力してEnterをします。

NewImage

これでショートカットが変更できました。

NewImage

JSONファイルでショートカットをカスタマイズする

「Command+K+S」でショートカット画面を表示し、「keybindings.json」をクリックします。

NewImage

あとは直接JSONファイルを編集できます。

NewImage

カスタムスニペットの作成方法

自分用のスニペットを作成することもできます。今回はコンソールのスニペットを作ってみましょう。

カスタムスニペットを書く

コマンドパレットから「基本設定: ユーザー スニペットの構成」をクリックします。

NewImage

「新しいグローバル スニペット ファイル…」をクリックします。

NewImage

「javascript」のスニペットを選択します。

NewImage

以下を入力して保存します。

{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}

これでスニペットの作成は完了です。

カスタムスニペットを使う

それでは作成したスニペットを使ってみましょう。

適当なJavaScriptファイルを作成し、「log」と入力します。するとスニペットが出てくるのでクリックします。

NewImage

以下のように「console.log(”)」に変換されれば成功です。

NewImage

これでより便利にVisual Studio Codeを使えるようになりました。

最後に

いかがでしたか？初めてVisual Studio Codeを導入した人はもちろん、すでに使っている人にも気づきはあったでしょうか？もしまだ他のエディタを使っている場合は、試しにVisual Studio Codeを使ってみて下さい。特にWebに関わっている人なら、使っている内に名刀が手に馴染む感覚を味わえるでしょう。それでは。

環境

  • Visual Studio Code : 1.20.1 -> 1.30.2