Visual Studio Code - 非エンジニアによるメモ帳セットアップと拡張機能のまとめ

はじめに

Visual Studio Code（以下VSCode）はエンジニア向けの総合開発環境ですが、拡張機能をインストールすることで非エンジニアでも活用できる強力な多機能メモ帳に進化します。
本記事では私自身の備忘録として、MacOSでのセットアップ手順と利用している拡張機能をまとめます。

• 2020/10/21 投稿

VSCodeを使う

インストール方法

VSCodeのインストール方法は以下の２種類があります。

• インストーラーをダウンロード
• Homebrewでインストール

私はMacにインストールするアプリケーションをHomebrewで管理しています。
インストーラーを使いたい人は公式サイトよりダウンロードしてください。

Homebrewでインストール

brew cask install visual-studio-code

Markdownプレビュー画面の表示

1. コマンドパレットを開く（ View > Command Pallet もしくは cmd + shift + p ）
2. markdown open preview to the sideを入力

おすすめの拡張機能

ここで紹介しているものは全てVSCodeメニューのEXTENSION（拡張機能）からインストールができます。

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化します。初回起動時のデフォルトは英語版になりますので、必要な人は以下手順で日本語化しましょう。

1. EXTENSIONSからJapanese Language Pack for Visual Studio Codeを検索しインストール
2. VSCodeを再起動（再起動後に日本語化されていれば次以降の手順は不要）
3. コマンドパレットを開く（ View > Command Pallet もしくは cmd + shift + p ）
4. configure display languageを入力
5. jaを選択し、VSCodeを再起動

vscode-icon

VSCode上でファイルアイコンを表示します。私はSetiというテーマがお気に入りです。

1. EXTENSIONSからvscode-iconsを検索しインストール
2. ファイルアイコンのテーマ（ Code > 基本設定 > ファイルアイコンのテーマ ）でから好きなテーマを選択

テキスト校正くん

WORDのようにVSCode上で入力した日本語文章をチェックしてくれます。
チェックするルールをカスタムできるtextlintという拡張機能も存在しますが、簡易でざっくりとした校正機能を求めるのであればテキスト校正くんで十分です。

Code Spell Checker

英単語のスペルをリアルタイムでチェックしてくれます。
検出されたくない単語をホワイトリスト登録することも可能です。

CharacterCount

文字数をカウントしてステータスバーに表示します。

Evilinspector

文章中の全角スペースを強調表示します。

公式設定のススメ

行末のスペースを削除

1. 設定を開く（ cmd + , )
2. Trim Trailing Whitespace を有効化

Trailing Spacesという拡張機能でも実現できるらしいです。（未検証）

設定の同期

設定やキーバインド、拡張機能をマシン間で同期できます。
設定手順はユーザガイドに記載されており、利用にはGithubもしくはMicrosoftアカウントが必要です。
私はMacOSとVMwareFusion上で稼働するKalilinuxで設定を同期させています。
2020年10月の段階でプレビュー中ですが、問題なく動作しています。

気になっている拡張機能

Draw.io Integration

Draw.ioのVSCode拡張版です。
思考整理や簡単な図を作るのに便利な気がします。

Todo Tree

特定のコメントを検索し、アクティビティバーに表示してくれる拡張機能です。
何か使いどころがないか模索しています。

VSNotes

VSCode上で動作するシンプルなメモ帳です。
シンプルと言ってもマークダウンに対応し、GoogleドライブやGithub連携も実現しています。
画像を貼れないのが気になっていますが、なぐり書きするアイデア帳としては悪くないかも。

おわりに

おすすめの拡張機能があったら教えてください。
みなさんも良いVSCodeライフを！