何年も前にインストールしておけばよかった 6 つの VS Code 拡張機能

私は 2015 年のプレビュー以来 VS Code を使用してきましたが、Cloud Code のおかげで、新しいプロジェクトでエディターとこれまで以上に多くの時間を費やすようになりました。これまで何年にもわたって、私は何百もの拡張機能をインストールおよびアンインストールしてきましたが、それでも、なぜ何年も前に見つけなかったのか不思議に思うような新しい拡張機能に遭遇することがあります。

そこで、インストールしたすべての拡張機能を調べて、新しい VS Code セットアップごとにインストールする拡張機能を選択しました。これは決定的なリストではなく、何年にもわたって固着しないものを取り付けたり取り外したりした結果、私のセットアップに適切な位置を獲得した6つだけです。 Markdown で書いたり、Git で作業したり、JavaScript のクリーンアップに時間を費やしたりする場合は、おそらくここで役立つものが見つかるでしょう。

マークダウンオールインワン

すべての Markdown ライターには拡張機能が必要です

私はメモや記事を書くのにも Markdown を使用しているので、ここで Markdown All in One がリストの一番上にあるのは驚くべきことではありません。私が最もよく使う機能は自動目次です。開ける コマンドパレット と Ctrl+Shift+P選ぶ Markdown All in One: 目次の作成そして、見出しに基づいて目次を生成します。セクションを追加または削除すると自動的に更新されるため、時間を大幅に節約できます。

リスト管理も私が気に入っている点です。プレス入力番号付き項目の後に、拡張子は次の番号を挿入します。殺すタブまた、アイテムを移動すると、自動的に番号が付け直されるサブリストが開始されます。組み込みのプレビューペインを使用すると、ソースとプレビューを広い画面に並べて表示し、エディターを離れることなく書式設定を確認できます。

確立された順序:

code --install-extension yzhang.markdown-all-in-one

エスリント

JavaScript の間違いをバグになる前に発見する

何年も前にインストールしておけばよかった 6 つの VS Code 拡張機能 — 画像クレジット – 自撮り (Tashreef Sharif) – 帰属表示は必要ありません

JavaScript または TypeScript を作成する場合、ESLint は、すぐに見つかるはずのバグを追跡するのに 1 時間を費やすまでは、そのありがたみが分からない拡張機能の 1 つです。 VS Code に接続し、入力時にコードをチェックし、構文エラー、コードの匂い、エディター内のスタイルの不一致にフラグを立てます。

ESLint は、コードの平均的なスペルチェッカーよりも構成可能です。独自のルールと重大度レベルを定義できるため、実稼働コード内の待機ミスや偶発的な console.log がすぐに検出されます。設定した場合 editor.codeActionsOnSave に 自動修正を有効にするよくある問題は保存するたびに修正されます。

ただし、セットアップには学習曲線が必要です。プロジェクトと競合せずに機能するプリセット、プラグイン、および無視ファイルの適切な組み合わせを取得するには、ある程度の試行錯誤が必要です。しかし、設定をダイヤルインすると、Prettier などの書式設定ツールでは対応できない種類のロジックの問題、つまり約束の間違いや未使用の変数などを静かに捕捉します。

確立された順序:

code --install-extension dbaeumer.vscode-eslint

GitHub のプルリクエストと問題

編集者を離れることなく PR を確認できます

VS Code Marketplace GitHub プルリクエスト拡張機能ページ — 画像クレジット – 自撮り (Tashreef Sharif) – 帰属表示は必要ありません

以前は GitHub の Web インターフェイスでプルリクエストを徹底的にレビューしていましたが、小さな変更であれば問題ありません。しかし、PR が数個以上のファイルに触れるとすぐに、Web UI が遅く感じることがあります。 GitHub Pull Requests and Issues 拡張機能は、そのすべてを VS Code に移動します。

GitHub にサインインすると、専用のパネルが表示されます。 アクティビティバー これには、開いているリポジトリの開いているプルリクエストと問題がリストされます。ブラウザを開かずに、ベースブランチを選択し、タイトルと説明を追加して送信することで、新しい PR を作成できます。レビューの場合、任意のファイルをクリックすると、完全な構文の強調表示とインラインコメントのサポートを備えた差分がエディターで直接開きます。

コンテキストを切り替えることなく、レビューを開始したり、既存のスレッドに返信したり、会話を解決したりすることもできます。定期的に PR をレビューしたり、VS Code 内で Cloud Code を操作したりする人は、ほとんどの作業をエディターで行うことになります。

確立された順序:

code --install-extension GitHub.vscode-pull-request-github

エラーレンズ

エラーが発生した場所でインラインでエラーを確認する

VS Code のデフォルトのエラー表示方法は、微妙な波線のグラフです。これは機能しますが、忙しいファイルでは、これらの下線は簡単に見落とされます。 Error Lens は、問題のある行の最後に実際のエラーメッセージをインラインで表示し、行全体を色で強調表示することでこの問題を修正します。エラーは赤、警告は黄色、情報は青です。

独自の診断を生成する代わりに、言語サーバー、TypeScript コンパイラー、ESLint、または別のリンターによってすでに報告されているものが表示されます。ツールが問題を報告し、それが問題パネルにある場合、Error Lens はそれをインラインで表示します。したがって、実行する他のすべての診断ツールと適切に統合されます。

インラインメッセージがうるさいと感じる場合は、それを制御できます。 Follow Cursor モードは、装飾を現在の回線に制限し、Delay 設定はメッセージが表示される前に短い一時停止を追加します。正規表現パターンを含む特定のメッセージを除外することもできます。私は、エラーと警告のみを表示するように設定しています。これは、視認性と注意散漫の間の最適な位置にあります。

確立された順序:

code --install-extension usernamehw.errorlens

美しい

ワンクリックで書式設定できるため、スタイルに関する議論が不要になります

VS Code Marketplace Prettier Code Formatter 拡張ページ — 画像クレジット – 自撮り (Tashreef Sharif) – 帰属表示は必要ありません

Prettier は思慮深いコードフォーマッタです。つまり、インデント、改行、引用スタイル、セミコロンなどのほとんどの書式設定を決定し、独自のルールに従ってコードを再印刷できます。書いて保存するだけで、きれいな仕上がりになります。

これを設定するには、まず拡張機能をインストールし、それをデフォルトのフォーマッタとして設定します。 “editor.defaultFormatter”: “esbenp.prettier-vscode”そして有効にする 保存時にフォーマットする。その時点から、一日中乱雑なコードを書くことができ、保存するたびにコードが書き換えられることになります。 JavaScript、TypeScript、CSS、HTML、JSON、Markdown、YAML などをサポートしています。

Prettier が最も効果的なのはチームです。ドロップします .prettierrc 設定ファイル プロジェクト内でコミットすると、すべての貢献者が同じ方法でコードをフォーマットします。 ESLint を使用している場合は、これを追加します eslint-config-prettier パッケージ Prettier が書式設定を処理し、ESLint がコードの品質を処理するため、ルールの競合を避けるため、これらは独自のレーンに留まる場合に最適に機能します。

確立された順序:

code --install-extension esbenp.prettier-vscode

GitLens

エディターを離れることなく、誰がいつ何を変更したかを確認する

VS Code には Git サポートが組み込まれていますが、コードの背後にあるストーリー (たとえば、最後に誰がいつ編集したかなど) を伝えることができません。 GitLens は推測を排除します。任意の行にカーソルを置くだけで、GitLens はコードのすぐ隣に、最後に変更した人、いつ、コミットメッセージを表示します。

GitLens は、コミットとブランチを比較するための分割差分ビュー、作成者、ファイル、またはメッセージでフィルター処理するコミット検索、ファイルに加えられたすべての変更を表示するファイル履歴パネルを追加しています。 Gutter には、ファイルのどの部分が最も編集されているかを強調表示するヒートマップもあり、コードベース内のホットスポットを特定するのに役立ちます。

GitLens ではすべてが無料というわけではありません。視覚的なコミットグラフなどの一部の機能は、有料の GitKraken サブスクリプションでロックされています。しかし、主な機能、障害、ファイル履歴、差分、検索だけで十分です。コードの特定の行が存在する理由を理解するのに時間を費やす場合、GitLens を使用すると、ターミナルで git log や gitblame を実行する手間が省けます。

インストールコマンド:

code --install-extension eamodio.gitlens

これらの拡張機能は VS Code を完璧にするわけではありませんが、それに近づくことはできます

これらの拡張機能はすべて、下線を探したり、GitHub で Alt キーを押しながらタブを押したり、コードを手動で再フォーマットしたり、紛らわしい関数を書いた人を推測したりするなど、日常のちょっとした面倒な作業を取り除きます。個人的には、各人が数秒を節約できます。彼らは協力して、VS Code を私の仕事のためだけに作られたと感じるツールに変えます。もし私が 2015 年に戻って 6 つの拡張機能をインストールし、残りはそのままにしておくように指示できるとしたら、これがそれでしょう。