序文
優れた開発ツールは開発者の開発効率を大幅に向上させることができ、優れた拡張プラグインはツールの効率をさらに向上させることができます。フロントエンド開発の分野では、VSCode が現在最も人気のある開発ツールであることは間違いありません。フロントエンド開発者の作業効率を向上させるために、今日は 10 個の強力な VSCode 拡張プラグインをお勧めします。
JavaScript (ES6) スニペット プラグインは、開発者の時間を節約するのに役立ちます。開発者は、コードを繰り返し入力することなく、すべてのコードを 1 か所で取得できます。さらに、JavaScript (ES6) コード スニペット プラグインは、TypeScript/TSLint コードもチェックできます。
ガイドパッケージの完了コード:
| 発動条件 | トリガーコンテンツ |
|---|---|
| インプ→ | モジュール全体をインポートします import fs from 'fs'; |
| ん→ | モジュール名を付けずにモジュール全体をインポートします import 'animate.css' |
| イメージ→ | モジュール import {rename} の一部のみを 'fs' からインポートするには、destruction を使用します。 |
| め→ | モジュールからすべてをエイリアスとしてインポートします import * as localAlias from 'fs'; |
| 今→ | モジュールの一部のみをエイリアスとしてインポートします import { rename as localRename } from 'fs'; |
| ＲＱＲ→ | パッケージ require(''); が必要です。 |
| 要求→ | パッケージ定数が必要です const packageName = require('packageName'); |
| で→ | デフォルトの module.exportsmodule.exports = {}; |
| 環境→ | 名前変数をエクスポートします。export const nameVariable = localVariable; |
| エンフ→ | エクスポート名 関数 import const log = (パラメータ) => { console.log(パラメータ);}; |
| エドフ→ | デフォルト関数のエクスポート デフォルト関数のエクスポート fileName (パラメータ){ console.log(パラメータ);}; |
| ＥＣＬ→ | デフォルトのクラス Calculator { } をエクスポートします。 |
| え→ | デフォルト クラスのエクスポート Calculator extends BaseClass { }; |
メソッド完了コード:
| 発動条件 | トリガーコンテンツ |
|---|---|
| フォフ→ | for … の 循環for(オブジェクトの定数項目) {} |
| フィン→ | for … ループ内 for(const item in object) {} |
| アンフン→ | 匿名関数 (params) を作成します => {} |
| んふん→ | 名前付き関数を作成します const add = (params) => {} |
| ドブ→ | オブジェクトの破棄構文 const {rename} = fs |
| ダル→ | 配列構文の破壊 const [first, Second] = [1,2] |
| スティ→ | 間隔補助メソッドの設定 setInterval(() => {}); |
| すと→ | タイムアウト補助メソッドを設定します setTimeout(() => {}); |
| プロム→ | 新しい Promise を作成するreturn new Promise((resolve, detect) => {}); |
| それから→ | then ステートメントと catch ステートメントを Promise.then((res) => {}).catch((err) => {}); に追加します。 |
コンソール完了コード:
| 発動条件 | トリガーコンテンツ |
|---|---|
| カス→ | コンソールアラートメソッド console.assert(expression, object) |
| CCL→ | コンソールクリア console.clear() |
| コ→ | コンソール数 console.count(label) |
| CDB→ | コンソールのデバッグ console.debug(object) |
| cdi→ | コンソールディレクトリ console.dir |
| サー→ | コンソールエラー console.error(object) |
| cg→ | コンソールグループ console.group(label) |
| cge→ | コンソールグループが終了します console.groupEnd() |
| クラッグ→ | コンソールログ console.log(オブジェクト) |
| クロ→ | console.log('object :>> ', object); という名前のコンソール ログ オブジェクト |
| クリック→ | コンソールトレース console.trace(object) |
| わ→ | コンソール警告console.warn |
| シン→ | コンソール情報 console.info |
| クラット→ | コンソールテーブル console.table |
| CTI→ | コンソール時間 console.time |
| CTE→ | コンソール時間の終了 console.timeEnd |
2.CSSピーク
CSS Peek (CSS プレビュー) プラグインは、HTML ファイルから CSS ID とクラスを直接表示し、対応する CSS 定義にジャンプできます。
( CSS Peek実装効果)
3.タグの自動終了
VS Code 1.16 以降の自動終了タグ プラグインは、HTML、ハンドルバー、および Razor ファイルの終了タグのサポートを実装します。この拡張機能は、XML、PHP、Vue、JavaScript、TypeScript、JSX、TSX などの他の言語をサポートしています。
プラグインの使用法:
(1) 開始タグの右括弧を入力すると、終了タグが自動的に挿入されます。
(2) 終了タグを手動で追加する
ショートカット Alt+. (Mac の場合は Command+Alt+.) を使用するか、F1 を押して閉じるタグを選択/入力します
Prettier — コード フォーマッタ (コード フォーマット ツール) プラグインは、開発者が JavaScript、HTML、および CSS コードをフォーマットするのに役立ちます。
使用法
コマンド パレットを使用します (CMD/CTRL + Shift + P)
| Plaintext 1. CMD + Shift + P -> Format Document OR 1. Select the text you want to Prettify 2. CMD + Shift + P -> Format Selection |
|---|
键盘快捷键
Visual Studio Code 提供用于代码格式化的默认键盘快捷键。您可以在VS Code 文档中了解每个平台的这些信息。
如果您不喜欢默认设置，可以在 vscode 的键盘快捷键菜单中重新绑定editor.action.formatDocument和。editor.action.formatSelection
保存时格式化
开发者可以通过限定设置范围来针对每种语言打开保存时格式：
| JSON // Set the default “editor.formatOnSave”: false, // Enable per-language “[javascript]”: { “editor.formatOnSave”: true } |
|---|
格式选择
格式选择适用于多种语言，具体取决于 Prettier 本身支持的语言。目前支持以下语言：
| Plaintext javascript javascriptreact typescript typescriptreact json graphql handlebars |
|---|
Auto Rename Tag（自动重命名标签）可以帮助开发人员自动重命名配对的 HTML/XML 标签。
Path intellisense（路径感知）插件可以更轻松地识别文件路径，开发者只需要输入文件名的前缀，插件会自动补全该文件夹的全路径：
Better Comments（注释优化）插件可以帮助开发者在代码中实现更加人性化的注释：
通过此插件，可以将注释分为以下几类：
- 警报
- 查询
- 待办事项
- 强调
MarkDown all in one（MarkDown多合一）插件可以实现在VS Code上编辑和使用MarkDown文件：
键盘快捷键
请参阅键盘快捷键部分中的完整按键绑定列表
列表编辑
更多详细操作可参考VS Code官网：https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one&ssr=false#user-content-q-this-extension-has-overridden-some-of-my-key-bindings-eg-ctrl–b-alt–c
9.Gitlens
借助GitLens扩展，开发者可以轻松查看Web应用程序中每一行代码的修改者。只需简单地点击，就能轻松实现这一目标！这种便捷的浏览历史记录方法消除了在页面或屏幕间来回切换的烦恼，使查找特定更改变得轻而易举。
10.Live Server
Live Server（实时服务器）插件无疑是开发者中使用最为广泛的插件之一，它能够启动本地开发服务器，并具备静态和动态页面的实时重新加载功能。借助这个强大的插件，开发者能够享受到实时预览的便利，极大地提升开发效率。
总结
通过介绍上述10种VS Code插件，希望能够为开发者提供多样化的选择，进一步提升开发效率。无论是代码编辑、调试、版本控制还是项目管理，这些插件都为开发人员提供了强大的功能和工具。希望这些插件能够满足开发者的需求，在开发过程中更加高效、便捷。
本文内容借鉴于VS Code插件官网。
扩展链接：