Visual Studio Code 言語共通のおすすめ設定と拡張機能6個

 

最近人気のエディタといえば、Atom、Sublime Text、Visual Studio Codeあたりでしょうか。

 

今までAtomを使用してましたが、Visual Studio Codeに乗り換えましたので、その時の設定したことでいいなと思ったものを紹介します。

 

Visual Studio Codeをダウンロード

 

まずは、Visual Studioコードをダウンロードしてインストールしましょう。

ダウンロードサイトは以下のリンクから見れます。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

 

ダウンロードしたら「show welcome page on start up」のチェックを外しておきます。

Visual Studio Codeの設定1

 

基本設定

 

では早速設定項目を見てみましょう。

File > Preference > settingから基本設定ができます。(日本語化している場合はファイル > 基本設定 > 設定になります)

設定画面を開くと上に検索窓がありますので、そこで設定項目を検索できます。

 

Editor: Render Whitespace

 

こちらは空白部分を可視化してくれるものになります。これを設定すると、半角スペースと全角スペース、タブの違いがわかりやすくなります。

使用する場合は基本設定の上部の検索画面に「renderwhitespace」と入力し、noneをallに変えておきましょう。

Render Whitespaceの設定

 

変更後:空白箇所に灰色にドット(・)が出ていますね。

Render Whitespace

 

File: Trim Trailing Whitespace

 

こちらは保存する際に行末の空白を切り取ってくれるものになります。

使用する場合は基本設定の上部の検索画面に「trimtrailingwhitespace」と入力し、チェックを入れましょう。

Trim Trailing Whitespaceの設定

 

Editor: Token Color Customization

 

デフォルトの色が気に入らない場合ここで変数やらの色の設定をすることができます。

設定する場合は基本設定の上部の検索画面に「tokencolorcustomization」と入力します。

Token Color Customizationsの設定

 

そこから「setting.jsonで編集」をクリックし開き、以下を追記してみましょう。

{
    "editor.tokenColorCustomizations": {
        "comments": "#708090",
        "functions": "#66d9ef",
        "keywords": "#e6db74",
        "numbers": "#ae81ff",
        "strings": "#a6e22e",
        "types": "#f77c7c",
        "variables": "#f77c7c"
    }
}

すると、対応したものが色付けされて表示されるようになります。

  • comments: コメント
  • functions: 変数
  • keywords: 予約語とか
  • numbers: 数字
  • strings: 文字列
  • types: 型
  • variables: 変数

 

変更後:変数とかが設定した色に変わって表示されています。

Token Color Customizations

 

Files: Insert Final Newline

 

これを設定すると、保存したときに最後に改行を入れてくれようになります。ちょっとしたことですが、コーディングルールを統一するにはいいかなと思います。

設定する場合は基本設定の上部の検索画面に「filesinsertfinalnewline」と入力してチェックを入れておきましょう。

filesinsertfinalnewlineの設定

 

おすすめ拡張機能

 

次はVisual Studio Codeの拡張機能を入れることで設定をしていきましょう。

 

↓拡張機能は左のタブから検索できます。

Visual Studio Codeの設定2

 

Japanese Language Pack

 

これは言わずもがなですね。日本語化してくれるものになります。

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

 

Japanese Language Pack

 

Bracket Pair Colorizer

 

こちらはプログラムで多用するかっこの対応を色付きでわかりやすくしてくれるものになります。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

 

Bracket Pair Colorizer

 

Partial Diff

 

こちらはある部分を選択すると差分を検索してくれる便利なものです。似たような処理を書いたときとか、表示された結果の差分を知りたいときにすごく便利です。

https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

 

Partial Diff

 

使い方はといいますと、まず差分比較したい最初のセクションを選択し右クリックし、「Select Text For Compare」を選択します。

Partial Diffの使い方1

 

そしたらもう一つのセクションを選択し、右クリックして、「Compare Text With Previous Selection」を選択します。

Partial Diffの使い方2

 

すると、差分確認できます。

 

Zoom Bar

 

こちらはエディタの左下に拡大縮小をするためのバーを追加してくれます。

一行が長くなってしまってちょっとだけ枠をはみ出してしまうときとかに便利です。

https://marketplace.visualstudio.com/items?itemName=wraith13.zoombar-vscode

 

Zoom Bar

 

Git History

 

Gitのコミット履歴を見やす表示してくれるものになります。Gitを使っている環境なら入れておきたいですね。

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

 

Git History

 

Git管理されているリポジトリを開くと右上にGitマークが出ますのでクリックするとGitのコミット履歴が見れます。

 

コミット間でのファイルの差分もこちらで確認できます。

該当コミットをクリックすると、下部に一覧が出てきます。そこからファイル名をクリックし、「Compare against previous version」を選択すると差分が確認できます。

Git Historyの詳細

 

Excel Viewer

 

こちらはcsvファイルをエクセルのように見やすくしてくれる拡張機能になります。csvを多用する方には使えるのではないかと思います。

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

 

Excel Viewer

 

こちらの画面の表示のしかたは、まずcsvファイルを用意します。

Excel Viewerの使い方1

 

そしたら、タブの部分のファイル名を右クリックして「Open Preview」を選択します。

Excel Viewerの使い方2

 

 

おまけ

 

リモート上に自分の作業ディレクトリがあり、ローカルに落として作業している人には以下がおすすめです。

sftp

 

リモート上にあるファイルとローカルのファイルを同期してくれます。

ローカルで保存すれば、リモートに自動で即反映されます。リモートの変更もローカルに落とすことができます。(手動)

https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

 

表示 > コマンドパレットと選択するか、Ctrl+Shift+Pでコマンドパレットを開き、「SFTP:Config」と入力して選択しましょう。

SFTP:Config

 

設定ファイルのsftp.jsonが作られますので、設定は以下のようにやりましょう。

{
    "host": "接続先のホスト名",
    "port": ポート番号,
    "username": "ユーザー名",
    "password": "FTP時のパスワード",
    "protocol": "ftp or sftp"
    "privateKeyPath": "鍵ファイルへのパス"
    "passphrase": "鍵のパスフレーズ",
    "remotePath": "リモートのファイルがある場所へのパス",
    "uploadOnSave": true,
    "syncMode": "full",
    "ignore": {
        "\\.vscode"
    }
}

これでローカルの変更が自動同期がなされるようになります。

 

最後に

 

とここまで様々な設定、拡張機能を紹介しました。少しでも快適になったなと思ってくださったら嬉しいです。

では、Visual Studio Codeでよいコーディングライフを送りましょう。