JavaScript の開発効率を向上させる 28 個の VSCode プラグイン-VSCode-php.cn

JavaScript の開発効率を向上させる 28 個の VSCode プラグイン

Visual Studio Code (VSCode とも呼ばれる) は、TypeScript や Chrome デバッガーサポートなどの組み込み開発ツールを備えた、軽量かつ強力なクロスプラットフォームソースコードエディターです。より多くの開発者がそれを使用したいと考えています。

関連する推奨事項: 「vscode の基本的な使用方法のチュートリアル」

1. Quokka.js

Quokka.js は A JavaScript および TypeScript 用のリアルタイムコード実行プラットフォーム。これは、入力したコードをリアルタイムに実行し、さまざまな実行結果をエディターに表示することを意味します。

この拡張機能をインストールした後、Ctrl/Cmd (⌘) Shift P を押してエディターのコマンドパレットを表示し、「Quokka」と入力して使用可能なコマンドのリストを表示できます。。「新しい JavaScript ファイル」コマンドを選択して実行します。 (⌘ K J) を押してファイルを直接開くこともできます。このファイルに入力された内容はすべて直ちに実行されます。

Quokka.js と同様の拡張機能 –

Code Runner – C、C#、Java、JavaScript などの複数の言語をサポートします。 PHP、Python、Perl、Perl 6 など
ランナー

2. 括弧ペアのカラーライザーとインデントのレインボー

花括弧と括弧は、多くのプログラミングに不可欠な部分です。 JavaScript などの言語では、コード画面内で中括弧や括弧が複数のレベルで入れ子になっている場合があります。括弧によっては、どれがどれに対応するのかを簡単に識別できないものもあります。ただし、括弧を識別する簡単な方法はありません。これらの括弧間の対応関係。

ブラケットペアカラーライザーとインデントレインボー。これらは 2 つの異なる拡張子です。しかし、彼らはまるで夫婦のように働き、完璧に連携しています。これらの拡張機能はエディターにさまざまな色を追加し、コードブロックを見つけやすくします。これらの拡張機能に慣れると、拡張機能なしでは VSCode が味気なく感じられるでしょう。

ブラケットなしカラーライザーとレインボーインデントのペア

##カラーライザー (ブラケットペアカラーライザー) とレインボーインデントをペアリングした後、ブラケットを使用します (インデントレインボー)

3. スニペット(コードスニペット)

コードスニペットはエディターのショートコードです。したがって、「import React from 」の代わりに、「imr」と入力して Tab キーを押してスニペットを展開できます。同様に、clg は console.log になります。

JavaScript、React、Redux、Angular、Vue、Jest など、さまざまなフレームワークやライブラリのコードスニペットが多数あります。私は主に JS を使用しているため、個人的には Javascript スニペットが非常に便利であると感じています。

いくつかの優れたコードスニペット拡張機能 –

JavaScript (ES6) コードスニペット
React-Native/React/ Redux スニペットes6/es7 用
#4. TODO の強調表示

通常のコーディング同じ操作を実行するより良い方法になります。この時点で、 // TODO: リファクタリングまたはその他の関連事項を行う必要があるとコメントを残します。ただし、このコメントを忘れてコードをマスターまたは運用環境にプッシュするのは簡単です。ただし、Todo Highlighter を使用すると、Todo Highlighter が強調表示され、注釈が見やすくなります。

コード内の「TODO/FIXME」またはその他のコメントが明るい色で強調表示され、常にはっきりと見えるようになります。もう 1 つの優れた機能は、コンソール内のすべての TODO をリストする

強調表示された注釈のリスト

です。

Todo ハイライターのような拡張機能を使用する –

Todo — より多機能な、より強力な Todo ハイライト拡張機能。

Todo パーサー
5. インポートコスト

この拡張機能を使用すると、インポートされたモジュールのサイズを表示できます。 Webpack に便利バンドラーは非常に役立ち、ライブラリ全体がインポートされているか、特定のユーティリティだけがインポートされているかを確認できます。

6. REST クライアント

Web 開発者は、多くの場合 REST API を使用する必要があります。 URL を確認して応答を確認するには、Postman などのツールが使用されます。しかし、同じタスクをエディターで簡単に実行できるのに、なぜ別のアプリケーションを使用するのでしょうか? REST クライアントを使用すると、HTTP 要求を送信し、Visual Studio Code で直接応答を表示できます。

7. タグの自動終了とタグの自動名前変更

React の出現と、過去数年間で React が注目を集めて以来、JSX 形式の HTML に似た構文が現在非常に人気です。 JavaScript タグを使用してコーディングする必要もあります。 Web 開発者なら誰でも、タグの入力は面倒だと言うでしょう。ほとんどの場合、タグとそのサブタグを迅速かつ簡単に生成できるツールが必要です。 Emmet は VSCode におけるこれの好例ですが、場合によっては単純で単純なものが必要な場合もあります。たとえば、自動更新タグは、開始タグを入力すると終了タグを自動的に生成します。同じタグを変更すると、終了タグが自動的に変更されます。これは、これら 2 つの拡張機能でも行われます。

JSX や XML、PHP、Vue、JavaScript、TypeScript、TSX などの他の多くの言語でも動作します。

ここから 2 つの拡張機能 (Auto Close Tag と Auto Rename Tag) を入手します。

同様の拡張子 –

自動補完タグ — 自動名前変更と自動終了マークを組み合わせます関数。
HTML/XML タグを閉じる

8. GitLens

作成者が述べているように、GitLens は Visual Studio Code を強化します。 -Git 機能には、トレースコードによるコード作成、コミット検索、履歴、GitLens エクスプローラーなど、多くの強力な機能が含まれています。これらの機能の詳細な説明はここで読むことができます。

同様の拡張機能 –

Git History – コミット履歴などの美しいグラフを表示します。推薦する。
Git Blame — ステータスバーで現在選択されている行の Git Blame 情報を表示できます。 GitLens も同様の機能を提供します。
Git インジケーター — 影響を受けるファイルと、ステータスバーで追加または削除された行数を確認できます。
Open in GitHub/Bitbucket/Gitlab/VisualStudio.com! — 1 つのコマンドでブラウザーでリポジトリを開くことができます。

9. Git プロジェクトマネージャー (GPM)

Git プロジェクトマネージャー (Git プロジェクトマネージャー、GPM) を使用すると、VSCode ウィンドウから直接プロジェクトを開くことができます。 Git リポジトリ。基本的に、VSCode を終了せずに別のリポジトリを開くことができます。

この拡張機能をインストールした後、gitProjectManager.baseProjectsFolders をリポジトリを含む URL のリストに設定する必要があります。例:

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

ログイン後にコピー

同様の拡張機能 –

Project Manager – 個人的に使用したことはありませんが、何百万ものインストールがあります。それで、見てみることをお勧めします。

10. インデンティケーター

現在のインデント番号が視覚的に強調表示されるため、さまざまなレベルでインデントされているさまざまなコードブロックを簡単に区別できます。

11. VSCode アイコン

編集をより魅力的にするアイコン!

類似の拡張機能 –

VSCode Great Icons
Studio Icons

12. ドラキュラ (テーマ)

ドラキュラは私のお気に入りのテーマです。

ショートカットキーを使用すると、テーマをすばやく選択して変更できます。

まず、Ctrl k

を押してから、Ctrl t を押します。

13. その他の推奨事項

Fira Code - プログラミングフォントを備えた固定幅フォント。 Fool's Wharf 注: プロジェクトを複製した後、ttf フォルダーを見つけて、そのフォルダーにフォントファイルをインストールします。 VSCode を再起動し、[ツール] -> [オプション] -> [フォントと色] を選択し、[Fira Code] を選択します。
ライブサーバー — 静的ページと動的ページのライブリロードを備えたローカル開発サーバー。
EditorConfig for VS Code – このプラグインは、.editorconfig ファイルの設定を使用してユーザー/ワークスペース設定をオーバーライドしようとします。追加のファイルや vscode 固有のファイルは必要ありません。他の EditorConfig プラグインと同様、root=true が指定されていない場合、EditorConfig はプロジェクト外の .editorconfig ファイルを探し続けます。
Prettier for VSCode — コード整形ツール。
ブックマーク – コード内を移動し、重要な場所間を簡単かつ迅速に移動するのに役立ちます。コードを検索する必要はもうありません。ブックマーク行とブックマーク行の間の領域を選択できる一連の選択コマンドもサポートされており、ログファイルの分析に非常に役立ちます。
Path Intellisense - ファイル名を自動的に入力する Visual Studio Code プラグイン。
Version Lens — 在Visual Studio代码编辑器中显示npm，jspm，bower，dub和dotnet核心的软件包版本信息。

14. Material Theme & Icons

这是 VS Code 主题中的重要角色。作者认为重要的主题是在编辑器中用笔和纸书写最接近的东西（特别是在使用无对比变体主题时）。从集成的工具到文本编辑器，你的编辑器看起来几乎是平的和无缝的。

想象一个史诗般的主题加上史诗般的图标。 Material Theme Icons 是替换默认 VSCode 图标的绝佳选择。设计的大型图标目录与主题融为一体，使其更加美观，这有助于你在资源管理器中轻松找到你的文件。

15. 具有居中布局的禅模式或者勿扰模式 (Zen Mode)

为了让广大苦逼码农能够在 coding/docing 时有清晰的思路，代表最广大码农利益的 VSCode 也加入了“禅模式”。该模式可以在你在页面编辑文件时启用，效果是全屏化你的编辑框，然后带有若隐若现的云雾效果。

打开方式：文件 > 首选项 > 设置 > 用户设置 > 工作台 > 禅模式

16. 具有连字的字体

文字的风格使阅读变得简单方便，你可以使用好看连字的字体使编辑器看起来更友好。这里是支持连字的6种最佳字体 (根据www.slant.co)

你可以尝试 Fira Code，它非常棒而且是开源的。以下是引入 Fira Code 后在 VSCode 辊更改该字体的方法。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

ログイン後にコピー

具体使用方法可以参考：

vscode中修改字体,使用 Fira Code

提高visual studio使用逼格的连体字(Fira code)以及多行编辑(MixEdit)

17. 彩虹缩进（indent-rainbow）

缩进风格，这个扩展为文本前面的缩进着色，在每个步骤中交替使用四种不同的颜色。

当然如果需要自定义自己喜欢的颜色，请将以下代码段复制并粘贴到 settings.json 中

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

ログイン後にコピー

18. 自定义标题栏

这是一个很棒的视觉调整，改变了不同项目的标题栏颜色，以便轻松识别它们。如果你处理可能具有相同代码或文件名的应用程序（例如react-native 应用程序和 React Web应用程序），这非常有用

设置方式：打开方式：文件 > 首选项 > 设置 > 工作区设置

19. Tag Wrapping

如果你不认识 Emmet，那么你可能是一个喜欢打字的人。Emmet 允许你写入缩写代码并返回的相应标记，目前 VSCode 已经内置，所以不用配置了。

如果你想了解更多的 Emmet 的简写，可以查看 Emmet Cheatsheet

20. 内外平衡

这条建议来自 https://vscodecandothat.com/，作者非常推荐它。

你可以使用 balance inward 和 balance outward 的 Emmet 命令在 VS 代码中选择整个标记。将这些命令绑定到键盘快捷键是有帮助的，例如 Ctrl + Shift + 向上箭头用于平衡向外，而 Ctrl + Shift +向下箭头 用于平衡向内。

21. Turbo Console.log()

没有人喜欢输入非常长的语句，比如 console.log()。这真的很烦人，尤其是当你只想快速输出一些东西，查看它的值，然后继续编码的时候。如果我告诉你，你可以像 Lucky Luke一样快速地控制台记录任何东西呢?

这是通过名为 Turbo Console Log 的扩展来完成的。它支持对下面一行中的任何变量进行日志记录，并在代码结构之后自动添加前缀。你还可以取消注释/注释 alt+shift+u / alt+shift+c 为所有由这个扩展添加的 console.log()。

此外，你也可以通过 alt+shift+d 删除所有：

22. Live server

这是一个非常棒的扩展，可以帮助你启动一个本地开发服务器，为静态和动态页面提供实时重新加载功能，它对 HTTPS、CORS、自定义本地主机地址和端口等主要特性提供了强大的支持。

如果与 VSCode LiveShare 一起使用，它甚至可以让你共享本地主机。

23. 使用多个游标复制/粘贴

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

ログイン後にコピー

24. Breadcrumbs（面包屑）

编辑器的内容上方现在有一个被称为 Breadcrumbs 的导航栏，它显示你的当前位置，并允许在符号和文件之间快速导航。要使用该功能，可使用 View > Toggle Breadcrumbs 命令或通过 breadcrumbs.enabled 设置启用。要与其交互，请使用 Focus Breadcrumbs 命令或按 Ctrl + Shift + 。