VSCode拡張の最終的なリスト


VSCodeは非常に拡張性とカスタマイズ可能です.VSCodeは技術的にテキストエディタですが、このリストの拡張機能は機能豊富なIDEにそれを起動し始めます.

始める

  • インストールVSCode
  • 設定同期を有効にします.あるいはSettings Sync Githubギストを経由して設定を同期する拡張.
  • 一般


  • GitHub Copilot : あなたのAIペアプログラマ.私は、一人のために、我々のロボット貴族を歓迎します.プレビューは、あなたを必要とすることに注意してくださいsign up for a waitlist .

  • GitHub Codespaces : ブラウザーからプロジェクトにアクセスできるクラウドホスト開発環境.

  • Live Server : 静的&動的なページのLive Reload機能を開発ローカルサーバーを起動します.

  • Live Share : 実時間協調開発

  • Live Share Whiteboard : Visual Studioライブ共有セッションにリアルタイムのホワイトボードを追加します.

  • Remote - SSH : リモートマシン上のsshを使用して任意のフォルダを開きます.

  • Remote - SSH: Editing Configuration Files : SSH設定ファイルを編集します.

  • Remote - WSL : Linux(WSL)のWindowsサブシステムの任意のフォルダを開きます.

  • Cacher : github gists(有料拡張)を介してコードスニペットのマンガ.

  • vscode-spotify : Spotify vscode内部(Spotifyサブスクリプションが必要)を使用します.
  • 生産性


  • IntelliCode : AI支援インテリセンス

  • Path Intellisense : 自動補完名.

  • Version Lens : コードレンズを使用して各パッケージの最新バージョンを示します.

  • vscode-faker : 名前、住所、Lorem IPsum、商取引などの偽のデータを生成します.

  • Bookmarks : マークラインとそれらにジャンプします.

  • Peacock : ワークスペースのワークスペースの色を微妙に変更します.

  • Output Colorizer : ログファイルの構文強調表示.

  • Bracket Pair Colorizer 2 : マッチングブラケットをカラー化するためのカスタマイズ可能な拡張.
    注:これはVSCodeの組み込み機能は、次の設定に追加されます.JSON :
  •   "editor.bracketPairColorization.enabled": true,
      "editor.guides.bracketPairs": true,
    

  • Image preview : 樋の上で、そして、ホバーでイメージプレビューを示します.

  • vscode-pdf : PDFファイルをvscodeに表示します.
  • コード編集


  • Prettier : 汎用コードフォーマッタ.

  • Better Comments : あなたのコードは、アラート、情報、todos、注釈などで注釈を改善します.私もハイライツにそれを設定しましたfixme and note .

  • Error Lens : エラー、警告、およびその他の言語診断の強調表示を改善します.一部の人々は、これはあまりにも邪魔を見つけるかもしれないが、私はそれがすぐにエラーを識別することができますようにトレードオフは価値があると思います.また、他の拡張子、プリンタや提案の多くで動作します.エラーを表示する前に短い遅延を設定しました.

  • Regex Previewer : 正規表現のプレビュービューア.

  • change-case : すぐに現在の選択または現在の単語のケース(camelcase、ConstantSoundケース、snakeangerケースなど)を変更します.

  • Multiple cursor case preserve : 複数のカーソルで編集する場合は保存します.

  • Rewrap : 指定された列のコメントやその他のテキストに対してラッピングする.

  • Hungry Delete : 空白またはタブのブロック全体を削除します.

  • Tab Out : 引用符、括弧などのタブ.

  • Code Spell Checker : スペルをチェックします.

  • DotEnv : dotenvファイルの構文をサポートします.
  • ファイル管理


  • File Utils : 作成、複製、移動、改名、ファイルやディレクトリを削除する便利な方法です.

  • advanced-new-file : コンテキストメニューで新しいファイルを作成する-ファイルの種類と場所を指定します.私は新しいファイルショートカットCtrl + Nをこの拡張子を使用するために置き換えました.

  • Scratchpads : 中にコーディングしているいたずら書きのための複数のScratchPadファイルを作成します.ショートカットCtrl + Alt + Nに設定しました.
  • ジット


  • GitLens : VSコード内のスーパーチャージgitあまりにも多くのgit関連のもの-ここでリストに多くのですか.

  • Git History : Gitログ、ファイルの履歴を表示する

  • Git Graph : あなたの倉庫のGitグラフを見て、グラフからGitアクションを実行してください.

  • GitHub Pull Requests : あなたが評価し、GitHubプルの要求や問題を管理することができます.

  • Checkpoints : の間に使用されるチェックポイントは、進行中のファイルの仕事のローカル短期的な履歴を維持するためにコミットします.

  • gitignore : あなたを引っ張ります.gitignore迅速かつ容易にテンプレート.
  • ダイアグラム


  • Draw.io Integration : 統合描画.IOコード対コード.あなたを使用.drawio.png ファイルは、直接編集可能であり、簡単にエクスポートされます.テーマを使用atlas .

  • PlantUML : Visual Studioのコードの豊富なPlantumlサポート.
  • 外観


    そこから選択する多くのテーマがあり、これは個人的な好みになるが、これは私が現在使用しているものです

  • One Dark Pro : Atomのビジュアルスタジオコードのためのアイコンの暗いテーマ.

  • Material Icon Theme : ビジュアルスタジオコードのための材料設計アイコン

  • Material Product Icons : VSのための材料アイコンを備えた製品アイコンテーマ.
  • 特殊拡張


    そこのかなりの言語のために、あなたは構文強調表示、ライティング、フォーマッタのための拡張子を見つけることができます.私はこれらの種類の拡張子のほとんどを省略し、代わりにいくつかのより興味深い、またはユニークな拡張子に焦点を当てるつもりです.

    ジャバスクリプト


  • ESLint : JavaScriptのためのリンギング(私は、私には、プリンターなどを言わないということを知っています、しかし、これは必需品です).

  • npm : NPMはVSコードをサポートします.

  • Add jsdoc comments : 選択した関数シグネチャのパラメーターに対してJSDOCコメントを追加します.

  • Wrap Console Log : コンソールにラップします.単語や選択でログ.
  • HTML


  • Auto Close Tag : タグ名の後にスペースを入力すると自動的にタグを閉じます.

  • Auto Rename Tag : タグ名の後にスペースを入力するとタグを変更します.

  • Icon Fonts : 人気のアイコンのフォントのスニペット.
  • CSS


  • Colorize CSS : ファイルのCSSの色を視覚化するヘルプ.

  • CSS Peak : すぐに、現在の要素のCSSプロパティを表示します.
  • AWS


  • AWS Toolkit : Visual StudioコードのAWSツールのコレクションです.

  • AWS Actions : エディタでAWSアクションを提供します.

  • AWS CLI Configure : AWS CLI config &資格情報ファイルにすばやくアクセスします.
  • その他


  • Docker : コンテナ化されたアプリケーションの作成、管理、デバッグを行います.

  • Remote - Containers : Dockerコンテナ内の任意のフォルダまたはリポジトリを開きます.

  • Kubernetes : Kubernetesアプリケーションの開発、配備、デバッグ.

  • json : Visual StudioのコードのJSON.

  • XML Tools : Visual StudioコードのXML書式、XQuery、およびXPathツール.

  • YAML : Kybernetesの構文サポートを内蔵して、Red HatによるYAML言語のサポート.
  • マークダウン


    このようなブログを書くために.vscodeはかなりのダウンマークボックスのサポートの良いが、いくつかの有用な拡張機能があります.

  • Markdown All in One : すべてのマークダウン(キーボードショートカット、目次、自動プレビューなど)を記述する必要があります.

  • markdownlint : ビジュアルStudioコードのMarkdown Lintingとスタイルチェック.これらの規則をあなたの好みに合わせて微調整してください.
  • 次の手順

  • お気に入りの言語/ツール-ツールの強調表示、intellisenseのライティング、書式設定などのツールをインストールします.
  • コマンドパレットCtrl + Shift + Pに精通してください.あなたは、あなたがしたい何かを検索することができます.
  • 学び、キーボードショートカットを設定します.コマンドパレットからの何でもキーボードショートカットとして構成されることができます、そして、あなたは特定の言語などのために文脈近道をセットすることができます.
  • VSCodeは、組み込みのスニペットマネージャがありますが、特定の言語/ツールの追加スニペットをダウンロードすることができます.
  • エディタの設定を設定します.あなたは私が現在使用しているものを見ることができますhere . いくつかの設定
  • ルーラーを設定すると、コードの行が長すぎません.
  •   "editor.rulers": [80],
      "workbench.colorCustomizations": {
        "editorRuler.foreground": "#491f1f"
      },
    
  • カーソルを滑らかにします
  •   "editor.cursorBlinking": "phase",
      "editor.cursorSmoothCaretAnimation": true,
    
    私は逃している任意の拡張モジュールやヒントをコメントして自由に感じ、私はリストにそれらを追加します!