最近人気のエディタといえば、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」のチェックを外しておきます。
基本設定
では早速設定項目を見てみましょう。
File > Preference > settingから基本設定ができます。（日本語化している場合はファイル > 基本設定 > 設定になります）
設定画面を開くと上に検索窓がありますので、そこで設定項目を検索できます。
Editor: Render Whitespace
こちらは空白部分を可視化してくれるものになります。これを設定すると、半角スペースと全角スペース、タブの違いがわかりやすくなります。
使用する場合は基本設定の上部の検索画面に「renderwhitespace」と入力し、noneをallに変えておきましょう。
変更後：空白箇所に灰色にドット（・）が出ていますね。
File: Trim Trailing Whitespace
こちらは保存する際に行末の空白を切り取ってくれるものになります。
使用する場合は基本設定の上部の検索画面に「trimtrailingwhitespace」と入力し、チェックを入れましょう。
Editor: Token Color Customization
デフォルトの色が気に入らない場合ここで変数やらの色の設定をすることができます。
設定する場合は基本設定の上部の検索画面に「tokencolorcustomization」と入力します。
そこから「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: 変数
変更後：変数とかが設定した色に変わって表示されています。
Files: Insert Final Newline
これを設定すると、保存したときに最後に改行を入れてくれようになります。ちょっとしたことですが、コーディングルールを統一するにはいいかなと思います。
設定する場合は基本設定の上部の検索画面に「filesinsertfinalnewline」と入力してチェックを入れておきましょう。
おすすめ拡張機能
次はVisual Studio Codeの拡張機能を入れることで設定をしていきましょう。
↓拡張機能は左のタブから検索できます。
Japanese Language Pack
これは言わずもがなですね。日本語化してくれるものになります。
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
Bracket Pair Colorizer
こちらはプログラムで多用するかっこの対応を色付きでわかりやすくしてくれるものになります。
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Partial Diff
こちらはある部分を選択すると差分を検索してくれる便利なものです。似たような処理を書いたときとか、表示された結果の差分を知りたいときにすごく便利です。
https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff
使い方はといいますと、まず差分比較したい最初のセクションを選択し右クリックし、「Select Text For Compare」を選択します。
そしたらもう一つのセクションを選択し、右クリックして、「Compare Text With Previous Selection」を選択します。
すると、差分確認できます。
Zoom Bar
こちらはエディタの左下に拡大縮小をするためのバーを追加してくれます。
一行が長くなってしまってちょっとだけ枠をはみ出してしまうときとかに便利です。
https://marketplace.visualstudio.com/items?itemName=wraith13.zoombar-vscode
Git History
Gitのコミット履歴を見やす表示してくれるものになります。Gitを使っている環境なら入れておきたいですね。
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
Git管理されているリポジトリを開くと右上にGitマークが出ますのでクリックするとGitのコミット履歴が見れます。
コミット間でのファイルの差分もこちらで確認できます。
該当コミットをクリックすると、下部に一覧が出てきます。そこからファイル名をクリックし、「Compare against previous version」を選択すると差分が確認できます。
Excel Viewer
こちらはcsvファイルをエクセルのように見やすくしてくれる拡張機能になります。csvを多用する方には使えるのではないかと思います。
https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer
こちらの画面の表示のしかたは、まずcsvファイルを用意します。
そしたら、タブの部分のファイル名を右クリックして「Open Preview」を選択します。
おまけ
リモート上に自分の作業ディレクトリがあり、ローカルに落として作業している人には以下がおすすめです。
sftp
リモート上にあるファイルとローカルのファイルを同期してくれます。
ローカルで保存すれば、リモートに自動で即反映されます。リモートの変更もローカルに落とすことができます。（手動）
https://marketplace.visualstudio.com/items?itemName=liximomo.sftp
表示 > コマンドパレットと選択するか、Ctrl+Shift+Pでコマンドパレットを開き、「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でよいコーディングライフを送りましょう。