開発で役に立つVisualStudioCodeのショートカット＆設定＆拡張機能

普段、開発で使用するツールが SublimeText3 から Visual Studio Code になりました。

フリーで使えて機能が豊富なのでとても重宝しています。

今回はそんな Visual Studio Code をさらに使いやすくするショートカットや設定、拡張機能を紹介します。

ショートカット編

私が普段から多用しているショートカットをご紹介します。

これだけで、開発速度・開発効率を上げられます。

設定編

空白を可視化する

プログラムを作成いていると、たまに全角が混じっていることや無駄な空白が入っていることがあります。

その空白を可視化できる設定を行います。

ファイル > ユーザー設定 > 設定 をクリック or キーボードで Ctrl + , を押します。

表示された画面の上部にある 設定の検索 に Editor: Render Whitespace と入力し、表示された設定を変更します。

ファイル保存で不要な空白を削除する

別ファイルからコピーしてきたりすると、無駄な空白が行末についていることがあります。

そんな不要な空白を、ファイル保存時に自動で削除します。

まずは 設定 を開きます。

表示された画面の上部にある 設定の検索 に trim と入力し、出てきた各設定を行います。

なお、この設定はプロジェクトで利用する人全員同じにしておかないと、バージョン管理ツールなどで差分が出て不幸なことになります・・・・。

マウスホイールでフォントサイズ変更

画面サイズや状況によってフォントサイズを変更したい時があります。

そんな時は、表示された画面の上部にある 設定の検索 に editor.mouseWheelZoom と入力し、出てきた設定にチェックを付けます。

ファイルの最後に空白行を入れる

ファイルの最後がテキストだと、都合が悪い場合があります。

そんな時は、表示された画面の上部にある 設定の検索 に files.insertFinalNewline と入力し、出てきた設定にチェックを付けます。

拡張機能編

Docker

Docker の操作を VSCode から操作できる拡張機能です。

コンテナの起動やコンテナ内に入り込むなど、コマンドを入力しなくても簡単にできるのが魅力です。

Docker / Microsoft

Git Graph

Git のツリー状態を GUI で視覚的に見れる拡張機能です。

もちろんコミットやツリーに対する操作も可能ですので SourceTree 的な扱いも可能です。

Git Graph / mhutchie

Prettify JSON

JSON文字列をきれいにフォーマットできる拡張機能です。

コマンドで簡単に表示できるので、ログを確認したりするときも使えます。

Prettify JSON / Mohsen Azimi

Trailing Spaces

行末の余分なスペースがハイライトされる拡張機能です。

このハイライトはかなり目立つため、意識的に削除する癖がつきます。

また、不要スペースの一括削除も可能です。

Trailing Spaces / Shardul Mahadik

Rainbow CSV

CSVの区切りをカラーリングで見やすくする拡張機能です。

Excelを開かなくても区切りがわかるので重宝します。

Rainbow CSV / mechatroner

Bookmarks

ソースコードの行にブックマークを付けることができる拡張機能です。

ブックマークの一覧からすぐにアクセスできるのが優秀です。

Bookmarks / Alessandro Fragnani

SFTP

SFTP設定をしておくと、自動でアップロードしてくれる拡張機能です。

保存と同時にアップロードしてくれたり、ファイルを同期したりできます。

SFTP / Natizyskunk

さいごに

この設定は開発をメインに考えて行っていますが、各社いろいろなコーディング規約などがあります。

その場合は設定を変更したり、拡張機能を追加しましょう。

同じ時間でも開発効率を上げれば評価にもつながりますよ！！（きっと）