AtomやSublime Textと並ぶ人気エディター!VSCodeの導入方法

3,515 view

以前にテキストエディターの「Atom」について紹介した記事があります。

WEB制作始めるならエディターはAtomで決まり!【Windows環境向け】

どのエディターが最も優れているかの決着は未だついておらず、人の好みは激しく分かれます。
それぞれが使い慣れたものを使うことが良いのでしょうが、この記事ではAtomやSublime Textと並ぶテキストエディターBIG3のひとつ、VSCode(Visual Studio Code)を紹介します。

私は普段からVSCodeを使用しており、Microsoftが開発したエディターですがMacでも問題なく動きます。

VSCodeの特徴

私はAtomを使っていた時期もあったので、VSCodeに切り替えたときに気付いたことの一部を紹介します。

Macでもストレスなく使用できる

VSCodeはMicrosoftが開発したエディターですが、MacにインストールしてもWindowsとほとんど違いなく動作します。

ターミナルがデフォルトで使える

VSCodeではターミナルがデフォルトで備わっており、Ctrl+@でターミナルが展開します。
デフォルトで備わっているのもいいのですが、ホームポジションから移動することなくショートカットキーを押して起動できます
Atomでターミナルを使用する場合は拡張機能をインストールしましょう。

デフォルトの機能が充実している

上に書いたようにターミナルもデフォルトの機能なのですが、VSCodeがデフォルトで使用できる機能には以下のようなものがあります。

  • Emmet
  • Gitとの連携
  • ミニマップ
  • タブとスペースの変換
  • メソッドのツリー表示
  • ファイルのアイコンの表示
  • Markdownの目次の作成

Atomでは拡張機能をインストールしなければならない機能もVSCodeではデフォルトで備わっているものが多くあります

拡張機能が最小で済む

上に書いたように、デフォルトの機能が充実しているので、Atomと比べればインストールする拡張機能が非常に少ないです。
拡張機能が最小で済むので管理が簡単です。

無料

Atomもそうですが、基本は無料で使用できます。

初期設定

インストール

VSCodeのインストールは以下の公式のURLから無料で行うことができます。

https://code.visualstudio.com/

まずは日本語表記に変更する

VSCodeをインストールしたとき、デフォルトでは英語表記です。
表記を日本語にするには拡張機能をインストールする必要があります。
Microsoftが提供している「Japanese Language Pack for Visual Studio Code」をインストールしましょう。

まずウィンドウ左側にある拡張機能のアイコンをクリックしてください。
人気の拡張機能なのでテキスト入力欄に「japanese」と書けばトップに現れます。

Japanese Language Pack for Visual Studio Codeのインストール

「Install」と書かれた緑色の小さなボタンを押してインストールを開始します。
ウィンドウを閉じてからまた開くと日本語表記になっています。

基本設定を行う

VSCodeのデフォルト設定は充実していると上に書きましたが、さらに自分流にアレンジを加えていくことでより快適なエディターへと成長します。

VSCodeにはその設定内容を読み込むためのJSONファイルがあり、デフォルトの機能や拡張機能をカスタマイズできます。
Ctrl+Shift+PまたはF1を押すと画面上部にテキストエリアが現れます。これをコマンドパレットといいます。
コマンドパレットを開くとすでに「>」の文字が書かれていますが、これに続いて「settings」と入力します。
すると、最上部に「Preferences: Open Settings(JSON)」というメニューが現れるので、それを選択します。

選択するとウィンドウがふたつに分割されて表示されます。
左側のウィンドウに表示されているのがデフォルトの設定で、ここから変更したい設定を選択してコピーし、右側のウィンドウに貼り付けて新しい設定値を書きます。
下図の例ではフォントサイズを14から18に変更しています。

settings.jsonを編集

書けたらCtrl+Sで上書き保存します。
保存が完了した直後に設定が反映されます。

初心者向けのオススメ設定

以下にオススメの設定を示します。
気に入るものを選んで自由にカスタマイズしましょう。
ここに紹介しているもの以外にもVSCodeには多くの設定項目があります。

{
"editor.fontSize": 18,                       // フォントサイズを指定する
"editor.minimap.renderCharacters": false,    // 画面右のミニマップの表示をブロックにする
"editor.minimap.showSlider": "always",       // 表示している領域をミニマップでハイライトする
"editor.renderWhitespace": "boundary",       // 半角スペースが「·」で表される
"editor.snippetSuggestions": "top",          // Emmetなどのスニペットの候補を優先的に表示する
"editor.tabSize": 2,                         // タブがスペースいくつ分かを指定する
"editor.wordWrap": "off",                    // 行のテキストが画面いっぱいまで書かれても改行しない
"explorer.confirmDelete": false,             // ファイル削除時に確認を表示しない
"files.insertFinalNewline": true,            // ファイルの保存時に末尾を改行する
"files.trimFinalNewlines": true,             // ファイルの保存時に空の行が最後にある時にそれらを削除する
"files.trimTrailingWhitespace": true,        // ファイルの保存時に行末の空白を削除する
"html.format.extraLiners": "",               // headタグとbodyタグとheadの閉じタグに改行をいれない
"window.openFoldersInNewWindow": "on",       // 新規のワークスペースを新しいウィンドウで開く
"window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示するタイトルを設定する
"workbench.editor.enablePreview": false,     // エクスプローラー上にあるファイルをクリックすると新しいタブを作って表示する
"workbench.startupEditor": "none"            // 新しいウィンドウを立ち上げたときにウェルカムページを表示しない
}

設定可能な項目はこれ以外にもたくさんあるので、実現したいと思うことは大抵実現できてしまいます

ワークスペース

VSCodeにはワークスペースという機能があります(AtomにもSublimeTextにもあります)。
ウィンドウ左のタブの最上部にあるファイルのアイコンをクリックすると現れます。
ここにVSCodeで編集する予定のファイル群を登録することでファイルの編集が可能となります。

「フォルダーの追加」のボタンを押してディレクトリを選択するとワークスペースに登録されます。
この中のファイルを選択して編集を行うことができます。

ファイルの検索

ワークスペースにさらにフォルダを追加

ワークスペースにさらにフォルダを追加するときは上タブの「ファイル」ボタンから「ワークスペースにフォルダを追加」を選択します。

ワークスペースからフォルダを削除

ワークスペースのディレクトリを削除するときは、ワークスペース上にあるディレクトリの上で右クリックして「ワークスペースからフォルダを削除」を選択します。

(削除といってもワークスペースから除外されるだけで、本当にディレクトリがごみ箱にいくわけではありません。)

検索機能

VSCodeの検索機能は非常に快適に動きます。
大規模な開発になるほどこの検索機能を重宝します。

ファイルを検索して開く

ワークスペース上にあるファイルはファイル名やファイルパスを入力して検索することができます。

Ctrl+Pを押すとウィンドウ上部にテキストエリアが現れます。
そこにファイル名を入力するとインクリメンタルサーチをかけてファイルが検索されます。
検索が非常に速く快適です。

候補のファイルを選択するとファイルが開きます。
ただし、検索に引っ掛かるのはワークスペースに登録されているファイルのみです。

ファイル中の文字列を検索して開く

ファイル名ではなくファイルに書かれた文字列を検索にかけることもできます。
Ctrl+Shift+Fを押すとウィンドウ左に検索窓が現れます。
テキストエリアに検索したい文字列を入力すると、ワークスペースの中から該当するファイルの一覧が表示されます。テキストから検索
表示されたファイルを選択するとファイルが開きます。

VSCodeの検索機能を使いこなせれば、どれだけワークスペース内のファイルの数が膨大になっても目的のファイルをストレスなく探すことができます

VSCodeの拡張機能

左サイドバーから拡張機能のボタンを選択して拡張機能を検索することができます。

拡張機能を使用するには、まずウィンドウ左側の拡張機能ボタンを押してテキスト入力欄にインストールしたい拡張機能の名前を書きます。
インクリメンタルサーチが行われるので、全部入力する必要はありません。

拡張機能のインストールが完了したら必ず「再読み込み」ボタンを押してください
これをしないと拡張機能が読み込まれません。
アンインストールしたときも同様に、「再読み込み」ボタンを押さないと適用されません。

オススメの拡張機能

以下に書く拡張機能は、少なくともHTMLやJavaScriptを書く方なら入れておいて損はないものばかりです。

Vim

Vimを使わない場合は必要ありません。
Vimのコマンドに慣れている場合はまず最初に入れておきたい拡張機能です。
キーバインドは基本設定から変更が可能です。

VSCode Great Icons

ファイル名の左につくアイコンのデザインを変更します。

Trailing Spaces

行末のスペースを強調表示します。

One Monokai Theme

テキストの色のテーマをMonokaiにします。
色テーマはMonokai以外にもたくさんあります。
VSCodeにはじめから備わっている色テーマもあります。

Apache Conf

apache関連の設定ファイルに書かれているコードの強調表示を行います。
.htaccessを編集するときなどに便利です。

Markdown Preview Enhanced

左側ウィンドウでMarkdownの編集を行いつつ、右側でそのプレビューをリアルタイムで表示します。
ショートカットキーでウィンドウを分割できます。
HTMLとしてブラウザで表示することも可能です。

indent-rainbow

インデントされている部分を色分けして帯状に表します。
コードの階層構造が深くなったときに理解しやすくて便利です。

Guides

indent-rainbowと役割は同じですが、こちらは色分けされずにただ赤い線だけで階層を示します。
indent-rainbowとGuidesはどちらか一方をインストールしましょう。

CSS Peek

htmlのidやクラス名をクリックすると、それに割り当てられているCSSを簡単に確認できます。

Auto Rename Tag

開始タグまたは閉じタグを変更したら、もう片方を自動で変更します。

Bracket Pair Colorizer

カッコの対応を色付きで表示します。

Path Intellisense

ファイルパスの入力時に候補をリストアップします。

sftp

サーバー上のファイルをローカルで操作できるようになります。
ファイルの上書きの際やダウンロードやアップロードの際にいちいちftpクライアントを使ってアクセスする煩わしさがなくなります。
ただし使用する際はサーバーに関する専門知識が少し必要になります。

PHPで便利な拡張機能

PHP Intellisense

PHPのコードの補完やコードの修正を自動で行います。

phpcs

PHP_CodeSnifferをVSCode上で実行するためのものです。
PHPコードをコーディング規約に沿っているかを調査します。
ただし、あらかじめcomposerなどのパッケージ管理ソフトでPHP_CodeSnifferをインストールしておく必要があります。

php cs fixer

php-cs-fixerをVSCode上で実行するためのものです。
PHPコードをコーディング規約(PSR-1やPSR-2)に沿うように自動で修正します。どこに修正を施すかも選択できます。
ただし、あらかじめcomposerなどのパッケージ管理ソフトでphp-cs-fixerをインストールしておく必要があります。

PHPDebug

XdebugによるPHPのデバッグ機能をVSCode上で実行するためのものです。
ブレークポイントを設置して変数の追跡やステップ実行処理が可能になります。
ただし、別途Xdebugの設定が必要になります。

PHP DocBlocker

メソッドの上に「/**」と書くだけで簡易的なPHPDocを自動生成します。
メソッドやクラスを先に作ってある状態で実行すると@paramや@returnなどの値を自動で付けてくれます。

Gitで便利な拡張機能

GitLens

Git管理下のファイルをVSCode上で編集する際にとても便利です。

  • いつ誰がコミットしたかがコード上に表示されます。
  • ウィンドウを分割して差分を見ることができます。
  • VSCode上からコミットやマージを行うことができます。

その他、GitやGithub上で行えることは大体GitLensで可能になります。

Git History

git logが見やすくなります。

ジョーク拡張機能

Kitty Time =(^● ⋏ ●^)= ෆ

猫の動画をランダムで表示します。
ステータスバーの右下にボタンが出現するので、クリックして猫の動画を見ましょう。

Power Mode

キーを入力するたびにアニメーションが発生します。

設定ファイルを編集すればアニメーションの種類や大きさなどを変更できます。
基本設定画面は、Ctrl+Shift+Pを押して「Settings」と入力して「Preference: Open Settings(JSON)」を選択します。

基本設定画面のウィンドウ右側のJSONテキスト欄に以下のコードを入力して、楽しみましょう。

{
"powermode.enabled": true,              // Power ModeをONにする
"powermode.presets": "fireworks",       // アニメーションを選択する
// アニメーションはparticles, fireworks, flames, magic, clippy, simple-rift, exploding-riftから選択
"powermode.comboThreshold": 0,          // コンボ数のカウントを始めるタッチ回数を指定する
"powermode.comboTimeout": 10,           // コンボ数がリセットされる秒数を指定する
"powermode.enableShake": true,          // キータッチの度に画面を揺らす
"powermode.shakeIntensity": 4,          // スクリーンの揺れ具合を指定する
"powermode.enableStatusBarComboCounter": true,    // コンボ数をステータスバーに表示する
"powermode.enableStatusBarComboTimer": true,      // コンボ数持続の残り時間をステータスバーに表示する
"powermode.explosionDuration": 1000,    // アニメーションの持続時間をミリ秒で設定する
"powermode.explosionFrequency": 2,      // アニメーションが開始されるまでのキーのストローク数を指定する
"powermode.explosionOffset": 0.6,       // アニメーション位置のオフセットを指定する
"powermode.explosionSize": 8,           // アニメーションの大きさを指定する
}

Power Modeを使わないときは、powermode.enabledをfalseにするだけです。
結構重いので通常はfalseにしておきましょう。

まとめ

最も優秀なテキストエディターは人それぞれの好みが決めることです。
私はVSCodeを愛用していますが、AtomでもSublime Textでも秀丸エディターでも、使いこなせるかどうかが大事です。

この記事で紹介したことはVSCodeの機能のほんの一部に過ぎません。
秘伝のタレを育てるように、長い時間をかけて少しずつ成長させていきましょう。

\ SNSでシェア /

WRITER

kato

制作 kato

加藤です。
出身:神奈川県横須賀市
元半導体エンジニアのWEBエンジニア

TAGS