2015年にリリースされて以来、コーダーからの人気を集めているMicrosoftの『Visual Studio Code』。それまで使っていたSublime text 3から乗り換えることにし、その際に行った環境設定の方法をまとめました。
『Visual Studio Code』のダウンロード
Visual Studio Codeは、Microsoftが開発した無料のオープンソースです。公式サイトより無料でダウンロードすることができます。
日本語化
Visual Studio Codeを起動したら、まずは日本語化します。起動後に表示される左メニューのアイコンの中から、一番下の四角いアイコンを選びます。
これは、拡張機能を追加するメニューで、左上に表示される入力フォームに「japanese」と入力します。
すると、『Japanese Language Pack for Visual Studio Code』というMicrosoft公式の拡張機能が表示されます。緑の『Install』ボタンを押し、再起動すれば日本語化完了です。
設定のカスタマイズ
日本語化が完了したら、基本設定を変えていきます。
文字の自動エンコーディング
メニューバー『Code → 基本設定 → 設定』で設定メニューを開きます。
設定の検索部分に 『Auto Guess Encoding』と入力すると、ファイルを開いた際、自動で文字コードを判別してくれるようになり、文字化けを防ぐことができます。
連続したスペースをわかりやすく
設定の検索部分に 『Render Whitespace』と入力、でてきたRender Whitespaceという項目を『boundary』に設定します。
これを設定すると、半角スペースが続く場所に『・』記号を表示し、わかりやすくしてくれます。
連番入力機能を追加する
Sublime textやAtomの拡張機能にある連番入力機能。これがあると便利なため、『vscode-input-sequence』を追加します。
日本語化と同様に、左メニューの拡張機能を選択、入力フォームに『vscode-input-sequence』を入力します。
vscode-input-sequenceは、Atom版の移植であるため、使い勝手はほぼ一緒です。macの場合『コマンドキー + Alt + 0』で起動することができます。めちゃ便利。
Google Chromeと連携するJavascriptデバック機能を追加
『Debugger for Chrome』は、Google Chromeのデバック機能と連携する拡張機能です。javascriptのデバックをエディタ上でできるため、フロントエンドエンジニアは重宝するのではないでしょうか。
()や{}の括りをわかりやすくする
『Bracket Pair Colorizer 2』は、()や{}で括られた内容をわかりやすく色分けしてくれる拡張機能です。
インデントをわかりやすく
『indent-rainbow』は、インデントに合わせて色分けしてくれる拡張機能です。ソースを美しく書きたい身としては、インデントを揃えて見やすくするのに必須の機能です。
カラーコード周りを扱いやすくする
『colorize』は、カラーコードをカラーコードの色でハイライトしてくれる機能です。カラーコード以外にも、変数にカラーコードが入っている場合、その変数もカラーコードの色でハイライトしてくれます。