この記事では、フロントエンド開発者の開発効率を向上させる、フロントエンド開発者向けの VSCode 自動化プラグインをいくつかまとめて共有します。
プログラミングは複雑です。高い生産性とコード品質を維持しながら、覚えておくべきベスト プラクティス、従うべきガイドライン、および回避すべき「既知の問題」が数多くあります。
現代の開発プロセスは、自動化された作業がなければ依然として比較的困難です。この記事では、フロントエンド開発者の開発効率を向上させることができる VSCode 自動化テクニックをいくつか紹介します。 [推奨学習: 「vscode 入門チュートリアル 」]
通常、VSCode でコードを変更する場合は、次のものが必要です。効果を確認するにはブラウザを手動で更新する必要があります。つまり、コードを 100 回更新すると、ブラウザを 100 回更新する必要があり、これは面倒で時間のかかる作業になります。
Live Server は VSCode の優れたプラグインです。上記の作業を自動的に完了できるため、保存後に毎回ブラウザを手動で開いて更新する必要がありません。これは次のとおりです。 Live Reload による処理は Live Server 機能によって提供され、この機能により、コードを保存後すぐにレンダリングできるようになります。また、VSCode の自動保存機能を有効にすると、ライブリロードがさらに便利になります。
Turbo Console Log は、ログ情報を自動的に書き込むのに役立つツールです。コンソール ログ 次に、次のことができます。
Live SASS Compiler を通じて SASS または SCSS ファイルを CSS に簡単かつ自動的にコンパイルし、コードエディターで実行します。このように、内部でリアルタイムにコンパイルされ、アプリケーションまたはコンパイルされたスタイルのライブ プレビューがブラウザーに自動的に表示されます。
Live SASS コンパイラは、VSCode の便利な拡張プラグインであり、次のような多くの優れた機能を備えています。
数百行または数千行のコードを含むアプリケーションで、1 つの HTML タグを変更したいと思ったのに忘れてしまったことはありませんか?それとも別のタグのペアを誤って変更したのでしょうか?この種の作業は混乱を招き、非効率になる可能性があります。
ここで 2 つのオプションがあります。1 つは、ペアになったタグを手動で維持するか、自動タグ名変更プラグインを直接インストールして、これらのタスクを自動的に完了させることです。
Auto Rename Tag は開発者にとって役立つプラグインで、その名前が示すように、受け入れタグの 1 つが更新されると、別のタグも自動的に更新されます。
コード検出は、特定のスタイル ガイドラインに従わないプログラムまたはコードの構文エラーをチェックするために使用されます。このような ESLint コード検出ツールを使用すると、開発者は JavaScript コードを実行せずにコードの問題を見つけることができます。 ESLint は、VS Code で最もダウンロードされている拡張機能の 1 つで、約 1,300 万回ダウンロードされており、位置決めやインデントなどの標準コーディング ガイドラインに準拠していることが保証されます。この拡張機能を使用するには、ESLint をコンピューターにローカルまたはグローバルにインストールする必要があります。npm install eslint を実行するだけです。
以下は ESLint のデモです。
コード サイズが小さい場合でも、上記のエラーは明らかです。ただし、コードが 100 行を超える場合は、 ESLint を実行すると、コード内の問題を迅速に特定して、コードの整合性と品質を向上させることができます。
Prettier
Prettier は JavaScript をサポートするだけでなく、TypeScript、CSS、JSON、JSX、GraphQL などを含む、すぐに使えるさまざまな構文もサポートします。
同様の拡張機能は他にもありますが、その中で最も人気があるのは Beautify です! いくつかの設定と構成を行うだけで、醜いコードを書くことを心配する必要がなくなります。 Beautyify は、コードを美しく一貫性のあるコードに変換します。
これまで、生産性を向上させるために使用できる VSCode のさまざまな拡張機能について説明してきました。この記事の最後に、コミット前フックについて説明します。では、プリコミットフックとは実際には何でしょうか?聞いたことがある人もいるかもしれませんし、知らない人もいるかもしれません。
コードをコミットまたはプッシュするたびにコマンドを実行したいと思ったことはありませんか?次に、git フックが探しているものです。
Git フックは、手動タスクを自動化するために git コマンドの前または後に実行できるカスタム スクリプトです。利用可能な git フックはいくつかありますが、pre-commit フックは私のお気に入りの 1 つです。
これは、その機能の優れた紹介です:
pre-commit フックを使用すると、コード スタイル、末尾の余分な空白、不要なインポートを確認したり、新しいメソッドに関する適切なドキュメントを確認したりできます。
優れたツールは、開発者がより速く、よりクリーンで、より一貫性のあるコードを作成するのに役立ちます。 Microsoft が立ち上げた Visual Studio Code (VS Code) は、発売以来徐々に多くの人々の支持を得ています。
この記事では、生産性を向上させ、開発プロセスを自動化する、VSCode で使用できるさまざまな拡張機能とメソッドをいくつかリストしました。共有する価値のある他の拡張機能を見つけた場合は、以下のコメントで言及してください。
元の参照: https://blog.bitsrc.io/vscode-automations-for-frontend-developers-6c66a6f36bc6
VSCode に関するその他の関連知識については、こちらをご覧ください。 : vscode チュートリアル ! !
以上が知っておく価値のあるいくつかのフロントエンド VSCode 自動化プラグインを要約して共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。