Mac版『Visual Studio Code』フロントエンドエンジニア向け環境設定まとめ

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』は、カラーコードをカラーコードの色でハイライトしてくれる機能です。カラーコード以外にも、変数にカラーコードが入っている場合、その変数もカラーコードの色でハイライトしてくれます。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*