改訂【 その他のおすすめ拡張機能 】Visual Studio Code

0
1172

前回は【 拡張機能 】のリアルタイムデバッガー”AREPL for python”を紹介しましたが、他にも便利な【 拡張機能 】があるので、いくつか紹介したいと思います。

拡張機能"Trailing Spaces"のインストール

前回の【 リアルタイムデバッガーAREPL 】からの続きで、アクティビティーバーの「拡張機能」アイコンをクリックします。

現れたサイドバーの検索窓に”trailling”と入力すると、その下に検索結果が表示されますが、”Trailing Spaces”の「インストール」ボタンをクリックする前に、テキストをクリックして開きます。

エディター画面にリアルタイムデバッガー”Trailing Spaces”の機能紹介が表示 ( アイコンも機能を表しています ) されるので、「インストール」ボタンをクリックします。

インストールが終わると、「再読み込みしてアクティブにする」ボタンが現れるので、クリックします。

右ペインのプログラム行末に”(半角スペース)”を入力すると、半角スペースが赤の”■”で表示されます。

行末の半角スペースの後で改行しても、半角スペースは赤の”■”で表示されたままです。右ペインの【 リアルタイムデバッガーAREPL 】では、行末にスペースが入力されたまま改行しても、指摘してくれませんでした。 ( ← エラーではないので )

拡張機能”Bracket Pair Colorizer 2”のインストール

サイドバーの検索窓に”bracket”と入力すると、その下に検索結果が表示されますが、テキストが隠れていたのでエディター画面との境をマウスでつまんで拡げます。

拡張機能”Bracket Pair Colorizer”には新しいバージョンがあるので、今回は”Bracket Pair Colorizer 2″の方をクリックしてみました。

エディター画面に”Bracket Pair Colorizer 2″の機能紹介が表示されますが、狭いので右ペインの「×」をクリックして閉じます。

エディター画面の機能紹介を確認し、「インストール」ボタンをクリックします。

インストールが終わると、「再読み込みしてアクティブにする」ボタンが現れるので、クリックします。

開いているプログラムの2行目に”(((((((“と入力するとそれに対応する”)))))))”が自動的に入力されますが、組合せが分かりやすいように黄色、赤、青の順に各組合せが表示されます

更に3行目から”{(Enter)”を5回入力すると、それぞれに対応する”}”が自動的に入力されますが、組合せが分かりやすいように黄色、赤、青の順に各組合せが表示されます

拡張機能”vscode-icons”のインストール

サイドバーの検索窓に”icons”と入力すると、その下に検索結果が表示されるので、”vscode- icons”の「インストール」ボタンをクリックする前にテキストをクリックして開きます。

エディター画面に”vscode- icons″の機能紹介とデモ動画が表示 ( 各ファイル毎に種類別のアイコンが表示 ) されるので、確認して「インストール」ボタンをクリックします。

インストールが終わると、画面右下に「Thaks for installing vscode-icons.」という画面が現れるので、「Activate」ボタンをクリックします。

更に、画面右下に「Welcome to the new version of vscode-icons.v7.27.0」という画面が現れたので、「information about the latest cha…」ボタンをクリックしてみました。

ブラウザが起動して、インストールしたバージョンの”Change Log”が表示されました。

画面左端アクティビティーバーの「エクスプローラー」アイコンをクリックします。

サイドバーにあるPythonのプログラムファイルのアイコンが公式ロゴと同じになりました。

拡張機能”Atom One Dark Syntax Theme”のインストール

再び、アクティビティーバーの「拡張機能」アイコンをクリックします。

サイドバーの検索窓に”atom”と入力すると、その下に検索結果が表示されますが、テキストが隠れていたのでエディター画面との境をマウスでつまんで拡げます。

拡張機能”Atom One Dark Theme”には2種類のバージョンがありますが、今回は”Atom One Dark Syntax Them″の方をクリックしてみました。

エディター画面に”Atom One Dark Syntax Theme”の機能紹介とデモ動画が表示されるので、確認して「インストール」ボタンをクリックします。

インストールが終わると、「再読み込みしてアクティブにする」ボタンが現れるので、クリックします。

画面左端アクティビティーバーの「エクスプローラー」アイコンをクリックします。

サイドバーにワークスペースのファイル一覧が表示されるので、どれかクリックして開きます。各コードが機能毎に色別で表示されるので見易くなりました。

拡張機能の更新を確認

サイドバーの右上にある「・・・」をクリックして現れるメニューから「拡張機能の更新を確認」を選択します。

今回はインストール直後なので、画面右下に「すべての拡張機能が最新の状態です。」と表示が出ましたが、ときどき確認しておいた方がよさそうです。