VSCode でよく使用されるプラグインとショートカット キーは、開発効率の向上に役立ちます。 ！

この記事では、ソフトウェア開発の効率を大幅に向上させるために、VSCode でよく使用されるプラグインとショートカット キーをいくつか紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

VS Code はオープンソースのクロスプラットフォーム開発ツールで、現在私が使用している最も便利なエディタです。この記事では、ソフトウェア開発の効率を大幅に向上させ、鉄遊びやナンパにもっと時間を費やすのに役立つ、よく使われるプラグインとショートカット キーをいくつか紹介します。 [推奨学習: "vscode チュートリアル "]

VS Code の最初の紹介

まずは公式 Web サイトを公開します:

https://code.visualstudio.com/

VSCode の正式名称は Visual Studio Code ですが、名前だけからすると VSCode と間違える人もいるかもしれません。最初は Visual Studio Code です。Studio はわかりにくいです。どちらも Microsoft の父親の会社の製品です。後者は長い間有名で、プログラマのお気に入りエディタのリストのトップに長い間ありました。新しい息子の VSCode を人気にするために、Java の場合は、Javascript と同様の名前が付けられました。

VSCode は新生と言っても過言ではなく、誕生からまだ 4 年しか経っておらず、歴史ある大手エディタに比べれば弟分のような存在です。しかし、ここ 1 ～ 2 年で急速に成長し、他のエディタを大きく引き離して市場シェアが上昇し始めています。Sublime Text は急速に衰退し、Atom は低迷し、WebStorm は有料化により国内での利用が低迷しています。 Vim はそれほど高くはなく、学習コストが高いため、徐々に歴史の舞台から退いています。別のエディターから VS Code に切り替えた場合でも、心配しないでください。対応する Keymap プラグインが提供されており、キーボード設定を移行して、ショートカット キーに慣れるのに時間を費やすことなく、すぐに使い始めることができます。 。

そして、各言語のサポートが充実しています。開発に必要な拡張機能がコレクションとしてパッケージ化されています。基本的には、開発中に対応する拡張機能をダウンロードします。拡張パッケージは、適切なサポートを受けることができます。 。

Microsoft の VSCode の定義は、無料、オープンソース、クロスプラットフォームです。コードエディタを再定義します。昨年の Microsoft による Github 買収と合わせて、これらはすべて、Microsoft がオープンソースでますます多くの試みを行っていることを示しています。

#オープンソースは、製品の長期的な開発にとって非常に重要です。 4 つのエディタのうち、Sublime はクローズドソース、VS Code、Vim、Atom はすべてオープンソースであり、VS Code は最も優れたオープンソースであると言えます。

VS Code はコードをオープンソースにするだけではありません。代わりに、私たちは製品開発プロセス全体をオープンソースに基づいており、コミュニティ全体と深く協力し、GitHub でユーザーのフィードバックに耳を傾けて、VS Code をますます改善しています。

毎年、VS Code チームはGitHub Wiki のロードマップには、年間全体の計画が記載されています。

製品設計段階の毎月の初めに、VS Code チームは、今月実行されるすべての機能をリストした反復計画を GitHub 問題に公開します。各機能は基本的に GitHub に対応します。 Issue. 詳細なデザインやモックアップを見て、自分の意見を提出することができます。

製品がリリースされる毎月の終わりに、GitHub で Endgame を参照し、VS Code が製品のテストとリリースをどのように実施するかを学ぶことができます。

コードがオープンソースであるだけでなく、VS Code の製品計画、設計、リリース管理全体が「オープンソース」です: すべての段階がオープンであり、すべてのユーザーに対して透過的です。 PR を送信すると、各機能の設計やディスカッションに参加することもできます。

業界では VSCode について常に論争がありました - それは IDE ですか? Visual Studio については、Microsoft はそれをその種の最高の IDE として直接定義していますが、VSCode については、Microsoft は現在コード エディターとしてのみ定義しています。

Visual Studio Code は軽量かつ強力なソース コード エディタです。

この問題を解決するには、まず IDE とは何かという概念を理解する必要があります。正式名称は統合開発環境で、文字通り統合開発環境を意味します。つまり、開発プロセスで使用される主要なアクティビティとツールの一部が開発環境に統合されているため、1 つのプログラムでコードを書くことができます。コードのデバッグ、コマンドラインの実行、バージョン管理、その他の開発プロセス。

現在、VSCode は強力な API サポートを備えており、基本的に IDE を実装できます。これを使用してコードを作成し、組み込みのターミナルを使用してコマンド ラインを迅速に実行し、デバッグ プラグインをダウンロードし、ブレークポイントを設定し、コードを簡単にデバッグします。組み込みの Git を使用してバージョン管理を行い、ソース コードを簡単に管理します。言語に関係なく、対応するプラグイン コレクションをダウンロードし、パッケージ化して、一度にインストールすることができ、開発プロセス全体がこの 1 つのツールで完了できます。コード エディターを真に再定義します。Stack Overflow の 2018 年の開発者アンケートでは、 VS Code は最も人気のある開発ツールになっています。

基本プラグイン

このセクションでは、コード編集の効率を大幅に向上させるためにインストールする必要がある開発プラグインをいくつか紹介します。

VS Code には豊富で急速に成長しているプラ​​グイン エコシステムがあり、現在 10,000 を超えるプラグインがあります。一元化されたプラグイン マーケットがあるだけでなく、VS Code エディターでプラグインを簡単に検索し、直接インストールして管理することもできます。それに比べて、Sublime はプラグインの数が 5,000 未満で、エディターでプラグインを検索して管理するのは簡単ではありません。Vim はプラグインが多いものの、一元化されたプラグインがないため、プラグインを見つけるのが面倒です。 -in Market; Atom には 8,000 以上のプラグインがあります。VS Code よりもプラグインが少ないです。プラグインはエディタからも見つかりますが、VS Code の検索機能と参照機能は Atom よりも優れています。

Visual Stidio コード用中国語 (簡体字) 言語パック 中国語 中国語パック

英語があまり得意ではない友人にとって、最初にやるべきことは、次の言語に切り替えることです。中国語環境では、中国語パッケージ プラグインをインストールした後、ショートカット キー Ctrl Shift P を押してコマンド パネルを表示し、「表示言語の構成」と入力して zh-ch を選択し、vs code を再起動します。

#open-in-browser ブラウザで表示

VS コードには、プログラムを実行するための組み込みの方法が用意されていません。ブラウザ関数に直接組み込まれるため、ブラウザでプログラムの実行効果を確認するには、このプラグインをインストールする必要があります。

ライブサーバーのリアルタイムプレビュー

このプラグインをインストールした後、エディターでコードを変更し、Ctrl キーを押します。 S を保存して変更します。エフェクトはリアルタイムで同期され、ブラウザに表示されるため、手動で更新する必要はありません。

Auto Close Tag タグを自動的に閉じます

タグ名を入力すると、閉じたタグが自動的に生成されます。特に便利です。

#タグの自動名前変更末尾が閉じられたタグは同期的に変更されます

ペアになったタグを自動的に検出しますそして改訂を同期します。

ブラケット ペア カラーライザー 一致するブラケット

ペアを異なる色で強調表示します。ブラケットに色が付けられます。プラグインをインストールする前は、ブラケットは均一に白色です。

#一致するタグをハイライトする 一致するタグをハイライトする

#このプラグインは自動的に役に立ちます。一致するタグが強調表示されるため、一生懸命検索する必要はもうありません。

Vscode-icons VSCode ファイル アイコン

このプラグインは、さまざまなファイル タイプに応じて対応するアイコンを生成するのに役立ちます。サイドバーでファイル リストを表示すると、アイコンを通じてファイルの種類を直接区別できます。

Mac を使用している友人は、Vscode-icons-mac をダウンロードすることを選択できます。基本的なアイコンは Vscode-icons に似ていますが、フォルダーは Mac スタイルを採用しています。

TODO ハイライト

コードを記述するときにどこかにマークを付け、後で内容を改善または変更したい場合は、このプラグインを使用して をハイライトできます。そうすれば、変更が必要なコード行をすぐに見つけることができます。

コード スペル チェッカー Word スペル チェッカー

コードを書くときによくこれを行いますスペル ミスが原因でソフトウェアが実行できませんでした。このプラグインをインストールすると、スペル ミスを自動的に特定し、修正の提案が表示されるため、バグを排除するというプレッシャーが大幅に軽減されます。

コード ランナーは選択されたコード セグメントを実行します

学習または公開する必要がある場合Code Runner プラグインを使用すると、さまざまな言語の開発環境をセットアップすることなく、このプラグインを通じて対応する言語のコードを直接実行できるため、さまざまな開発言語の学習やテストに非常に適しています。 . 直接右クリックして使用方法を選択できます。Run Code は Node.js を含む多数の言語をサポートしています。

インポートコストコストのヒント

このプラグインでは、ツール パッケージをインポートするときに、そのボリュームの入力を求めるプロンプトが表示されます。ボリュームが大きすぎる場合は、後のオンライン最適化に備えてパッケージを圧縮することを検討する必要があります。

GitLens Git 情報の表示

カーソルをコード行に移動します。最新のコミット情報と現在の行の作成者。複数人で開発する場合に非常に役立ちます。責任転嫁を防ぐために各人に責任が割り当てられます。

ブックマーク ブックマーク

コードをブックマークし、ショートカット キーですばやくジャンプ ブックマークの場所に移動。

キーボード ショートカットで特定のショートカット キーをカスタマイズできます:

拡張プラグイン

このパートでは、主に特定の開発環境向けのいくつかのプラグインを紹介します

Vscode-element-helper

要素を使用してインストールできます。 ui ライブラリ このプラグインは、タグを記述するときに要素タグ名の入力を自動的に要求します。

Version Lens Tool パッケージのバージョン情報

ダウンロードした package.json に表示されますインストールされている npm ツール パッケージのバージョン情報からも、現在のパッケージの最新バージョンがわかります。

Vetur VUE 言語パック

VUE は、現在最も人気のある JS フレームワークの 1 つです。 、多くの企業は VUE に基づいて製品を構築することを選択するでしょう、そして Vetur は VUE に優れた言語サポートを提供します。

プラグインをインストールする前にサフィックス .vue が付いたファイルを書き込むとコードが白になりました

インストールプラグインした後、vue ファイルを作成して s を入力し、Tab キーを押すとテンプレートが自動的に完成します。

WakaTime コード ワークロードの計算

これは、vs code での効果的なプログラミング時間を記録するのに役立つ時間記録ツールです。

データを折れ線グラフの形式で表示して、1 週間以内の作業傾向を示します。以前プロジェクトを作成していたときは、12 時間近くプログラミングできました。あなたの献身と努力は若い頃なら誰でも知っています。

同時に、彼の公式 Web サイトでは、各言語の執筆に費やした時間の割合がファン チャートの形式で表示されます。各プロジェクトに費やした時間。比率は非常に優れたデータ レポートです。プロジェクトの終了時に、ダッシュボードで時間がどのように割り当てられているかを明確に確認できます。

設定の同期 VSCode の設定は Gist に同期されます

新しい会社に入社したり、新しいコンピューターを変更したりして、次のことが必要になることがあります。新しい開発環境を構築する場合、この時点でプラグインを 1 つずつダウンロードして vs コードを再設定するのは非常に面倒で、それほど包括的に覚えていない可能性があります。このプラグインを介して、現在の設定を vs にアップロードできます。コードを Gist に保存し、Gist 経由でダウンロードします。すべての構成を新しい環境に同期しました。

Github ホームページでアバターをクリックし、[設定] を選択して設定ページに入ります。

左側のサイドバーで [開発者設定] をクリックして、開発者設定に入ります。

個人用アクセス トークンを選択し、右側の [新しいトークンの生成] をクリックします。

トークン名を入力し、以下の要点を確認してください。

下の [トークンの生成] ボタンをクリックして、新しいトークンを生成します。

生成された新しいトークンを保存します。

vscode に設定同期プラグインをインストールし、Ctrl Shift p を押して「同期」と入力し、「構成の更新/アップロード」を選択します。

github で生成されたトークンを入力し、Enter をクリックします。

コンソールで ID の文字列が自動的に生成され、トークンと ID を介して構成を同期できます。

Ctrl Shift p を押して「同期」と入力し、ダウンロード構成を選択し、トークンと ID を入力して同期ダウンロードします。

この記事で紹介した vs code の設定はすべて Gist に同期されているので、必要な友達はダウンロードしてください。

token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6

Id:338d5dfb6b7784c980250cffe8365899

構成ファイルで自動的にアップロードとダウンロードを行うかどうかを選択できます

"sync.removeExtensions": true,
      "sync.syncExtensions": true,
      "sync.autoDownload": true,
      "sync.autoUpload": true,
      "sync.gist": "338d5dfb6b7784c980250cffe8365899"

カラーテーマ

プログラマとして、ほとんどの場合、私たちはコンピューターの前に座ってコードを入力しており、長時間エディターを操作する必要があります。vscode に見栄えの良いカラーテーマを選択すると、コードを書くプロセスの楽しみが大幅に高まります。目、ここは濃い色をお勧めします テーマのインストールパッケージには次のスキンが含まれています。

私の個人的なお気に入りは、次の 2 つのダーク テーマです。慣れてしまえば、通常はテーマを前後に変更することはありませんなので、自分にとって使いやすいものを選んでください。

Dracula 公式吸血鬼テーマ (私が現在使用しているテーマ)

One Dark Pro

常用快捷键

编辑器与窗口管理

Ctrl+Shift+P: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

切分窗口：Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+H：最小化窗口

Ctrl+B：显示/隐藏侧边栏

Ctrl+"+/-"：放大/缩小界面

文件操作

Ctrl+N：新建文件

Ctrl+W：关闭文件

Ctrl+Tab：文件切换

格式调整

Ctrl+C/Ctrl+V：复制或剪切当前行/当前选中内容

Alt+Up/Down：向上/下移动一行

Shift+Alt+Up//Down：向上/下复制一行

Ctrl+Delete：删除当前行

Shift+Alt+Left/Right：从光标开始向左/右选择内容

代码编辑

Ctrl+D：选中下一个相同内容

Ctrl+Shift+L：选中所有相同内容

Ctrl+F：查找内容

Ctrl+Shit+F：在整个文件夹中查找内容

常用设置

我们可以在settings.json中手动进行一些设置，让我们的编辑器更好用。

关闭标签介绍信息

我们在编写代码的时候鼠标移动到某个标签上，经常会自动弹出一些介绍信息，挡住部分代码，给我们的阅读带来了很大的困难，一直没有找到关闭它的方法，目前可以通过设置时间延迟暂时实现这个效果，我设置的5000毫秒，你可以设置的更大一些，基本上它就不会弹出来了。

"editor.hover.delay": 5000

自动折行

设置代码根据编辑器窗口大小自动折行

"editor.wordWrap": "on"

字体设置

      // 一款适合代码显示的字体包（需要将字体包下载到本地）
      "editor.fontFamily": "Source Code Pro, 'Source Code Pro'",
      // 设置代码字体大小
      "editor.fontSize": 15,

自动保存

目前有四个选项：

• off：关闭自动保存。
• afterDelay：当文件修改后的时间超过"Files：Auto Save Delay"中配置的值时自动进行保存。
• onFocusChange：编辑器失去焦点时自动保存更新后的文件。
• onWindowChange：窗口失去焦点时自动保存更新后的文件。

"files.autoSave": "off"

关闭代码提示

"editor.quickSuggestions": { "other": false, "comments": false, "strings": false }

更多编程相关知识，请访问：编程教学！！

以上がVSCode でよく使用されるプラグインとショートカット キーは、開発効率の向上に役立ちます。 ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。