知っておく価値のあるいくつかのフロントエンド VSCode 自動化プラグインを要約して共有します

この記事では、フロントエンド開発者の開発効率を向上させる、フロントエンド開発者向けの VSCode 自動化プラグインをいくつかまとめて共有します。

プログラミングは複雑です。高い生産性とコード品質を維持しながら、覚えておくべきベスト プラクティス、従うべきガイドライン、および回避すべき「既知の問題」が数多くあります。

現代の開発プロセスは、自動化された作業がなければ依然として比較的困難です。この記事では、フロントエンド開発者の開発効率を向上させることができる VSCode 自動化テクニックをいくつか紹介します。 [推奨学習: 「vscode 入門チュートリアル 」]

ライブ サーバー

通常、VSCode でコードを変更する場合は、次のものが必要です。効果を確認するにはブラウザを手動で更新する必要があります。つまり、コードを 100 回更新すると、ブラウザを 100 回更新する必要があり、これは面倒で時間のかかる作業になります。

Live Server は VSCode の優れたプラグインです。上記の作業を自動的に完了できるため、保存後に毎回ブラウザを手動で開いて更新する必要がありません。これは次のとおりです。 Live Reload による処理は Live Server 機能によって提供され、この機能により、コードを保存後すぐにレンダリングできるようになります。また、VSCode の自動保存機能を有効にすると、ライブリロードがさらに便利になります。

Turbo Console Log

Turbo Console Log は、ログ情報を自動的に書き込むのに役立つツールです。コンソール ログ 次に、次のことができます。

• 意味のあるログ情報を自動的に埋め込みます。
• プラグインによって現在のドキュメントに埋め込まれたすべてのログ情報をコメント化およびコメント解除します。
• プラグインによって埋め込まれたすべてのログ情報を現在のドキュメントから削除します。

Live SASS Compiler

Live SASS Compiler を通じて SASS または SCSS ファイルを CSS に簡単かつ自動的にコンパイルし、コードエディターで実行します。このように、内部でリアルタイムにコンパイルされ、アプリケーションまたはコンパイルされたスタイルのライブ プレビューがブラウザーに自動的に表示されます。

Live SASS コンパイラは、VSCode の便利な拡張プラグインであり、次のような多くの優れた機能を備えています。

• Live SASS および SCSS Compile 。
• クイック ステータス バー コントロール
• カスタマイズ可能な拡張子 (.css または .min.css)
• カスタマイズ可能なエクスポートされた CSS スタイル (展開、圧縮、圧縮、ネスティング)
• エクスポートされた CSS のファイルの場所をカスタマイズ可能

タグの名前を自動的に変更

数百行または数千行のコードを含むアプリケーションで、1 つの HTML タグを変更したいと思ったのに忘れてしまったことはありませんか?それとも別のタグのペアを誤って変更したのでしょうか？この種の作業は混乱を招き、非効率になる可能性があります。

ここで 2 つのオプションがあります。1 つは、ペアになったタグを手動で維持するか、自動タグ名変更プラグインを直接インストールして、これらのタスクを自動的に完了させることです。

Auto Rename Tag は開発者にとって役立つプラグインで、その名前が示すように、受け入れタグの 1 つが更新されると、別のタグも自動的に更新されます。

ESLint

コード検出は、特定のスタイル ガイドラインに従わないプログラムまたはコードの構文エラーをチェックするために使用されます。このような ESLint コード検出ツールを使用すると、開発者は JavaScript コードを実行せずにコードの問題を見つけることができます。 ESLint は、VS Code で最もダウンロードされている拡張機能の 1 つで、約 1,300 万回ダウンロードされており、位置決めやインデントなどの標準コーディング ガイドラインに準拠していることが保証されます。この拡張機能を使用するには、ESLint をコンピューターにローカルまたはグローバルにインストールする必要があります。npm install eslint を実行するだけです。

以下は ESLint のデモです。

コード サイズが小さい場合でも、上記のエラーは明らかです。ただし、コードが 100 行を超える場合は、 ESLint を実行すると、コード内の問題を迅速に特定して、コードの整合性と品質を向上させることができます。

Prettier

Prettier は、フロントエンド開発者の間で人気の VSCode 拡張機能で、ダウンロード数は 1,100 万で、まだ増加し続けています。ボタンを押すだけで、コードをすばやくフォーマットできます。フォーマットされています。

• スタイル ガイドの変更が行われると、Prettier をコード ベース全体に自動的に適用できます。
• 書式を修正するために労力を費やす必要はありません。
• プル リクエストでのスタイルの議論に時間を無駄にしないでください。
• スタイル ガイドでルールを探す必要はありません。

Prettier は JavaScript をサポートするだけでなく、TypeScript、CSS、JSON、JSX、GraphQL などを含む、すぐに使えるさまざまな構文もサポートします。

同様の拡張機能は他にもありますが、その中で最も人気があるのは Beautify です! いくつかの設定と構成を行うだけで、醜いコードを書くことを心配する必要がなくなります。 Beautyify は、コードを美しく一貫性のあるコードに変換します。

Pre-Commit フック

これまで、生産性を向上させるために使用できる VSCode のさまざまな拡張機能について説明してきました。この記事の最後に、コミット前フックについて説明します。では、プリコミットフックとは実際には何でしょうか?聞いたことがある人もいるかもしれませんし、知らない人もいるかもしれません。

コードをコミットまたはプッシュするたびにコマンドを実行したいと思ったことはありませんか?次に、git フックが探しているものです。

Git フックは、手動タスクを自動化するために git コマンドの前または後に実行できるカスタム スクリプトです。利用可能な git フックはいくつかありますが、pre-commit フックは私のお気に入りの 1 つです。

これは、その機能の優れた紹介です:

• これらは、提出情報を入力する前に自動的に実行を開始します。
• ゼロ以外のデータを指定して終了すると、送信は中止されます。
• pre-commit フックは、送信しようとしているスナップショットを確認するために使用されます。

pre-commit フックを使用すると、コード スタイル、末尾の余分な空白、不要なインポートを確認したり、新しいメソッドに関する適切なドキュメントを確認したりできます。

概要

優れたツールは、開発者がより速く、よりクリーンで、より一貫性のあるコードを作成するのに役立ちます。 Microsoft が立ち上げた Visual Studio Code (VS Code) は、発売以来徐々に多くの人々の支持を得ています。

この記事では、生産性を向上させ、開発プロセスを自動化する、VSCode で使用できるさまざまな拡張機能とメソッドをいくつかリストしました。共有する価値のある他の拡張機能を見つけた場合は、以下のコメントで言及してください。

元の参照: https://blog.bitsrc.io/vscode-automations-for-frontend-developers-6c66a6f36bc6

VSCode に関するその他の関連知識については、こちらをご覧ください。 : vscode チュートリアル ! ！

以上が知っておく価値のあるいくつかのフロントエンド VSCode 自動化プラグインを要約して共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。