https://d226lax1qjow5r.cloudfront.net/blog/blogposts/visual-studio-code-extensions-to-enhance-productivity-in-2021/blog_visualstudioextensions.png

2021年の生産性を高めるVisual Studioのコード拡張機能

最終更新日 January 6, 2021

所要時間:1 分

Visual Studio Codeは、シンプルでありながら非常に拡張性の高いコードエディタです。開発者として、私たちはここで多くの時間を費やす。だからこそ、エディタを最大限に活用し、可能な限り合理化・自動化することが非常に重要なのだ。

2021年を迎えるにあたり、私が個人的に毎日使っている拡張機能のリストをまとめた。以下に紹介する拡張機能はすべての言語に対応していますが、言語固有のプラグインもありますので、探してみてください。

VSコード拡張機能のインストール方法

  1. Visual Studio Codeを開きます。

  2. 左のパネルにあるマークのボタンをクリックする。

  3. Search Extensions "ボックスに、ダウンロードしたい拡張機能の名前を入力します。

  4. 正しい検索結果を選び、"インストール "をクリックする。

厳選されたVSCode拡張機能

ブラケット・ペア カラーライザー2

Bracket Pair Colorizer 2は、一致する括弧を色で識別することができます。ユーザーは、どのトークンをマッチさせるか、どの色を使うかを定義できます。

Bracket Pair Colorizer 2Bracket Pair Colorizer 2

リモートコンテナ

リモートコンテナでは、Dockerコンテナをフル機能の開発環境として使用できます。コンテナにデプロイするかどうかにかかわらず、コンテナは優れた開発環境になります:

  • デプロイ先と同じオペレーティングシステム上で、一貫性があり再現が容易なツールチェーンで開発する。

  • 分離された異なる開発環境間で素早くスワップし、ローカルマシンへの影響を心配することなく、安全にアップデートを行うことができます。

  • 新しいチームメンバーやコントリビューターが、一貫性のある開発環境で簡単にスタートアップできるようにします。

  • ローカルのセットアップに影響を与えることなく、新しいテクノロジーを試したり、コードベースのコピーをクローンしたりできる。

Remote ContainersRemote Containers

輸入コスト

Import Cost はインポートされたパッケージのサイズをエディタにインライン表示します。この拡張機能は、インポートされたサイズを検出するために babili-webpack-plugin を使って webpack を利用します。

パス・インテリセンス

Path Intellisense はファイル名のオートコンプリートをサポートします。この拡張機能は、開発者がファイルパスを正確に定義できるようにサポートします。

Path IntellisensePath Intellisense

ライブ・シェア

Live Shareでは、共同編集、共同デバッグ、音声通話、仲間とのチャット、端末やサーバーの共有、コメントの閲覧などが可能です。

ピーコック

Peacockは、Visual Studio Codeのワークスペースの色をさりげなく変更します。複数のVS Codeインスタンスを持っていたり、VS Live Shareを使用していたり、VS Codeのリモート機能を使用していて、自分のエディタをすぐに識別したい場合に便利です。

PeacockPeacock

もっとかわいく

Prettierは、意見を取り入れたコード整形ツールです。コードを解析し、最大行長を考慮した独自のルールで再印刷し、必要に応じてコードを折り返すことで、一貫したスタイルを強制する。

クオッカ

Quokka.jsは、JavaScript / TypeScriptのプロトタイピングを迅速に行うための開発者生産性向上ツールです。実行時の値が更新され、IDEでコードを入力するとその横に表示されます。

QuokkaQuokka

より良いコメント

Better Commentsは、あなたのコードに、より人間に優しいコメントを作成するのに役立ちます。この拡張機能を使うと、注釈を以下のように分類できるようになります:

  • アラート

  • クエリ

  • TODO

  • ハイライト

  • コメントアウトされたコードも、そこにあるべきでないコードであることを明確にするためにスタイルすることができる。

  • その他のコメントスタイルは、設定で指定できます。

    Better commentsBetter comments

設定の同期

Settings Syncは、GitHub Gistを使用して、複数のマシン間で設定、スニペット、テーマ、ファイルアイコン、起動、キーバインド、ワークスペース、拡張機能を同期します。

リモート - SSH

リモート - SSH を使えば、SSH サーバーがあるリモート・マシンを開発環境として使うことができます。これにより、様々な状況での開発やトラブルシューティングを大幅に簡素化することができます。以下のことが可能です:

  • デプロイ先と同じオペレーティング・システムで開発するか、ローカル・マシンよりも大きく、高速で、あるいは特殊なハードウェアを使用する。

  • 異なるリモート開発環境間で素早くスワップし、ローカルマシンへの影響を心配することなく、安全にアップデートを行うことができます。

  • 複数のマシンや場所から既存の開発環境にアクセス。

  • 顧客サイトやクラウドなど、別の場所で実行されているアプリケーションをデバッグする。

この拡張機能は、リモート・マシン上でコマンドやその他の拡張機能を直接実行するため、これらの利点を得るために、ソース・コードがローカル・マシン上にある必要はない。リモートマシン上の任意のフォルダを開き、そのフォルダが自分のマシン上にある場合と同じように作業することができます。

Remote SSHRemote SSH

ポラコード

この最後の拡張機能は、あなたのコードにポラロイドを作成するという楽しいものだ!Twitterやブログの投稿で共有するためにコードのスクリーンショットを撮るつもりなら、このツールを使うことを強くお勧めする。

PolacodePolacode

お気に入りのエクステンションは?

これで私の最も使われた拡張機能のリストは終わりです!今年、あなたの開発者の生産性を向上させるものに出会えることを願っています。あなたのお気に入りのVS Code拡張機能は何ですか?コメント欄で共有するか、次のサイトで教えてください。 ツイッター!

シェア:

https://a.storyblok.com/f/270183/250x250/54e86bba88/nahrinjalal.png
Nahrin Jalalヴォネージの卒業生

NahrinはVonageのデベロッパー・エデュケーターでした。インクルーシブなコミュニティの構築、実用的なソフトウェア・ソリューションによる現実世界のニーズへの対応、あらゆるスキルレベルの人がアクセスできる技術コンテンツの作成に情熱を注いでいる。