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

はじめに

実はこのブログで昔から人気のある記事は以下の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の公式サイトからインストーラがダウンロードできます。

ただ、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 + ,」です。

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

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

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

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

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

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

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

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

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

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

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

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

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

フォントの変更

コーディングに最適なフォント「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", //ターミナルのフォント

これで基本設定は完了です。

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

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

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

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

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

「再読み込み」の表示に

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

おすすめのプラグイン

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

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

• Sublime Text Keymap and Settings Importer … Sublime Textのキーマップのインポート

HTMLのためのプラグイン

• Live Server … ブラウザでHTMLをプレビューする ★
• Live HTML Previewer … VS Code上でHTMLをプレビューする
• open in browser … ブラウザで表示するサブメニューを追加する
• HTML Snippets … HTML5のスニペット
• HTMLHint … HTMLのスタイルチェック
• Auto Close Tag … タグを自動的に閉じる
• Auto Rename Tag … タグの名前を変更をサポート
• html tag wrapper … HTMLタグをラップしたタグを作成する

CSSのためのプラグイン

• HTML CSS Support … CSSのサポート
• IntelliSense for CSS class names … CSSのクラス名のサポート
• Stylesheet Formatter … CSSフォーマッター
• postcss-sugarss-language … PostCSSシンタックスサポート
• SCSS IntelliSense … SCSSのサポート
• Autoprefixer … autoprefixerのスニペット
• stylelint … CSSフォーマットチェック(stylelint)サポート
• stylefmt … CSSフォーマッター(stylefmt)サポート
• Color Picker … カラーピッカーのサポート
• Color Highlight … CSS内の色をハイライト

Javascriptのためのプラグイン

• Babel JavaScript … ES6やReactなどのシンタックスハイライト
• npm Intellisense … NPMサポート
• yarn … Yarnサポート
• Prettier … Javascriptフォーマッター
• ESLint … eslintサポート ★
• TSLint … tslintサポート ★
• Add jsdoc comments … JSDocサポート
• Complete JSDoc Tags … JSDocサポート
• Debugger for Chrome … Chromeデバッカーサポート
• ECMAScript Quotes Transformer … クォーテーションのヘルパー

Gitのためのプラグイン

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

Markdownのためのプラグイン

• markdownlint … マークダウンのスタイルチェック ★
• Markdown All in One … マークダウンのためのショートカットなど
• Markdown checkbox … マークダウンでチェックボックスを作る
• Markdown Emoji … マークダウン用の絵文字サポート
• Markdown Shortcuts … Markdownを書きやすくする
• Markdown TOC … TOC(table of contents)の生成

その他

• Trailing Spaces … 不要な空白のハイライト ★
• Path Intellisense … ファイルのオートコンプリート ★
• EditorConfig … VS Code用のEditorConfigのサポート ★
• final-newline … ファイルを保存した時に文末に改行を入れる
• Emoji … ソースコードに絵文字を挿入する
• Mark Jump … コメントでMARKを付けた所にジャンプできる
• Lorem ipsum … Lorem ipsumの入力をサポート
• DotENV … .envサポート ★
• Clock in status bar … ステータスバーに時間を表示
• Active File In StatusBar … ステータスバーにファイルパスを表示
• File Peek … ファイルの定義を参照できる
• Copy Relative Path … 絶対パスのコピー
• Toggle Excluded Files … 不要なファイルを非表示にする
• Code Runner … ソースコードの実行サポート
• Shortcuts … コマンドのショートカットをサポート
• Relative Path … ワークスペース内の絶対パスの入力
• Indentation Level Movement … ソースコード内のコード移動
• TODO Highlight … TODOコメントをハイライトする
• jumpy … ソースコード内をカーソルで移動する
• Docker … Dockerサポート ★
• Bracket Pair Colorizer 2 … 括弧を虹色にすることでリストやクロージャーのコーディングをわかりやすくする
• Quokka.js … JavaScriptの実行結果をソースコード上で確認できる
• Polacode … ソースコードの画像を作成できる
• Better Comments … コメントを内容に応じて色分けする
• Project Manager … 複数のプロジェクトディレクトをスイッチする
• Settings Sync … Gistを使った設定の保存
• VS Live Share … 複数でリアルタイムでファイルを編集する

今回は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」でショートカット画面を表示し、「置換」のショートカットを編集します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後に

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

環境

• Visual Studio Code : 1.30.2