この記事では、PHP 開発の効率を向上させる 30 個の VSCode プラグインを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/6059c8c9ad491503.jpg)
#今日は私が日常的に使っているとても便利なプラグインを紹介します。これらを使用すると、私たちの VSC (VSCode) は 5 つのレーザーを備えたユニコーンのようなものになります。
VSC をまだ初めて使用する場合は、左側の下のボタンをクリックしてプラグインをインストールしてください。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/c64b3de4848fd1b6dab831c2029f4c64-1.gif)
マテリアル テーマ
Visual Studio Code の最も古いテーマです。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/0719bf13364a6c9f672aa03720493e2b-2.png)
#自動インポート
自動的に検索、分析し、コード補完を提供します。 TypeScript と TSX の場合、これは機能します。
#インポートコスト
このプラグインは、インポートされたパッケージのサイズを行の最後に表示します。バンドル サイズを計算するために、プラグインは Webpack と babili-webpack-plugin を使用します。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/1cf2c60b4f0bf99f7d5283b27cae9663-4.png)
推奨学習: 「
vscode チュートリアル
」
Indent-Rainbow
シンプルなプラグインを使用すると、配置をより読みやすくすることができます。
IntelliSense for CSS class names in HTML![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/9a8e141969fd4bd494d6ad42df690976-6.png)
このスマート プラグは、プロジェクトとリンク タグを介して参照される外部ファイルに基づいて、 -in HTML 内の CSS クラス名の補完を提供します。
SVG Viewer![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/9a8e141969fd4bd494d6ad42df690976-7.gif)
SVG をプレビューするためのプラグイン。
Prettier![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/60e69707ad96327c7b19129d978364bb-8.gif)
このプラグインなしでは絶対に生きていけません。JavaScript/TypeScript/CSS を美しくするために必要です。ワンクリックコード。
Sublime Text Keymap and Settings Importer![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/4625742b6807257ef2c22b33de941710-9.png)
ダウンロード数から判断すると、Sublime Text から移行した人が多いようです。
このプラグインは、Visual Studio コードのショートカット キー バインドを Sublime Text 3 と同じに変更します。 cmd P (Mac)、ctrl P (Windows) を試してください。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/4625742b6807257ef2c22b33de941710-10.png)
ファイルにジャンプしたり、検索の前に > 記号を追加すると、組み込みターミナルを開く、インストールするなどのアクションを検索することもできます。プラグインなど
ST3 の使用に慣れている人にとって、これは大きな利点です。
npm Intellisense
VSCode プラグインは、インポート ステートメント内の npm モジュール名を自動的に補完できます。
lit-html![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/d1dd2781c72979340d716a3db480bfd5-12.gif)
JavaScript/TypeScript ファイルで HTML タグが使用されている場合、lit-html は構文の強調表示と対応する構文を提供します。完成サポート。
highlight-matching-tag![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/31e2bbc09c3f31273208f3e1da92bd13-13.gif)
これは、VSCode がデフォルトで提供する、一致するタグを強調表示する関数であるはずです。
GitLens![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/c75d9c806bb16225fd847ddaefe25fde-14.gif)
何も言わずに、ただ写真を投稿してください。 ![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/c75d9c806bb16225fd847ddaefe25fde-15.gif)
Git プロジェクト マネージャー
Git プロジェクト マネージャーを使用すると、Git に基づいて管理されているプロジェクトをワンクリックで直接検索して開くことができます。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/869d2611748618dd474771316c1fcf5f-16.gif)
Git 履歴
git ログまたはファイルの git 履歴を表示し、さまざまなブランチとコミットを比較するために使用されます。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/39c825c5d86f5ae47cfa18637926841d-17.gif)
ファイル ユーティリティ
ファイル/ファイル フォルダーを作成、コピー、移動、名前変更、削除するためのより簡潔な方法を提供します。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/39c825c5d86f5ae47cfa18637926841d-18.gif)
ブラケット ペア カラーライザー
コードに多数のコールバックがある場合、この強調表示は、別のコードへの理解を深めやすくなります。ブロック。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/863cc4cfd6358bf008386a5eb3d8b8e1-19.png)
#色のハイライト
定義した色を視覚的に表示します。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/863cc4cfd6358bf008386a5eb3d8b8e1-20.png)
CSS ピーク
CSS ID またはクラスによって HTML 内の定義を見つけることができます。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/e178fe786cb0ee6cd72cc79603605156-21.gif)
Chrome 用デバッガー
Chrome を使用して、JavaScript コード、または Chrome デバッガー プロトコルをサポートする他のプラットフォームをデバッグします。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/03579db9af37fa0e82e6bef4a0102fdb-22.gif)
Quokka.js
JavaScript コードをリアルタイムで実行します (簡単なデモに役立ちます)。
![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/2eba3298881fbfd544646522404b6359-23.gif)
#末尾のスペース
冗長なスペースを強調表示し、すぐに削除します。
#TypeScript Hero
TypeScript プログラミングを支援する子供用シューズ!
WakaTime
使用習慣からデータ レポートを生成します。
Vetur
VS Code の Vue ツール! Pine Wu によって開発され、累計ダウンロード数は 400 万を超えています。
コード ランナー
複数言語でのコードの即時実行をサポートします。サポートされている言語: C、C、Java、JavaScript、PHP、Python、Perl、Perl 6、Ruby、Go、Lua、Groovy、PowerShell、BAT/CMD、BASH/SH、F# スクリプト、F# (.NET Core)、C# スクリプト、C# (.NET Core)、VBScript、TypeScript、CoffeeScript、Scala、Swift、Julia、Crystal、OCaml Script、R、AppleScript、Elixir、Visual Basic .NET、Clojure、Haxe、Objective-C、Rust、Racket、AutoHotkey、 AutoIt、Kotlin、Dart、Free Pascal、Haskell、Nim、D.
#PHP IntelliSense![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/64ca0243f38cfee53fa2c6c9ba11969d-28.gif)
##vscode-icons
アイコンコレクション。
Jest![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/a3c0b22c6369982fe49273edc5cd4a2f-30.gif)
Jest for Facebook をお楽しみください。
React.js コード スニペット![PHP 開発効率を向上させる 30 個の VSCode プラグイン](https://img.php.cn/upload/article/000/000/024/1f698114459050623619c6a63895f7b7-31.gif)
React.js アプリケーションを開発するには、ES6 構文を使用すると非常に便利です。 ############### - -終わり - -###プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 !
以上がPHP 開発効率を向上させる 30 個の VSCode プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。