JavaScript開発者として、あなたはこれらの必要なVS Codeプラグインを使いましたか?

この記事は次の言語から翻訳されています。https://www.sitepoint.com/vs-code-extensions-javascript-developers/

出典を明記してください: グレープシティーの公式ウェブサイト 、グレープシティーは開発者に専門的な開発ツール、ソリューションおよびサービスを提供し、開発者に権限を与えます。

今日、Visual Studio Codeは間違いなく最も人気のある軽量のコードエディタです。 それは、主にSublimeとAtomから、他のコードエディタから多くを借ります。 ただし、その成功への鍵はよりよいパフォーマンスおよび安定したパフォーマンスを提供する機能です。 さらに、開発者が必要とするコード化されたヒントなどの機能も提供します。 これらの機能は、EclipseやVisual Studio 2017などの完全統合開発環境(IDE)でしか利用できませんでした。

VS Codeの力は間違いなくそのプラグイン市場から来ています。 オープンソースコミュニティのおかげで、VS Codeは現在ほとんどすべてのプログラミング言語、フレームワーク、および開発技術をサポートしています。 このサポートを提供する方法は、コードスニペット、構文の強調表示、Emmet、および特定のテクノロジに対するスマートな通知など、さまざまです。

VS Codeプラグインタイプ

この記事では、主にJavaScript開発者向けのVS Codeプラグインを紹介します。 この条件を満たすVS Codeプラグインはたくさんありますが、もちろんそれらすべてを網羅することはしません。 代わりに、私はすでにかなり人気があり、JavaScript開発者にとって不可欠なVS Codeプラグインに焦点を当てます。 簡単にするために、私はそれらを10のカテゴリーに分けました。

あなたがすでに知っていて使っているプラ​​グインがあるかもしれませんが、おそらくあなたが聞いたことがあるけれども使ったことがないプラグインがあるかもしれません。

1.コードフラグメントプラグイン

あなたが最初にVS Codeをインストールするとき、それはいくつかのJavaScriptとTypeScriptコードスニペットと共に来ます。 最新のJavaScriptを使い始める前に、ES6 / ES7コードをすばやく書くのに役立つ追加のコードスニペットが必要になります。

  • VS Code JavaScript(ES6)スニペット:現在最も人気のある、120万以上のダウンロードがあります。 このプラグインは、JavaScript、TypeScript、HTML、React、およびVueに対するES6構文サポートを提供します。
  • JavaScriptスニペットパック:便利なJavaScriptコードスニペットのコレクションを提供します。 (このリンクは開きません)
  • Atom JavaScript Snippet:Atomから移植されたJavaScriptプラグイン。
  • JavaScriptスニペット:ES6コードスニペットのコレクションを提供します。 MochaやJasmineなどの他のBBD(Behavior-Driven Development)テストフレームワークのサポートも含まれています。

文法ハイライトプラグイン

VS Codeには、優れたJavaScriptコード構文の強調表示が付属しています。 テーマをインストールすることでこれらの色を変えることができます。 しかし、より高いレベルの読みやすさを望むなら、構文強調プラグインをインストールする必要があります。 ここにいくつかあります:

  • JavaScript Atom文法:元のVS CodeをAtomエディタのJavaScriptシンタックスハイライトに置き換えます。
  • Babel JavaScript:ES201X、React、FlowType、およびGraphQLの構文強調表示をサポートします。
  • DotENV: .envファイル構文の強調表示をサポートします。これはNodeを使用するときに非常に便利です。

3.コード検出部品

最小限の煩わしさでJavaScriptコードを効率的に書くには、コード検出(リンター)ツールが必要です。 それはチームのすべてのメンバーが特定のコード仕様に従うことを強制します。 ESLintは最も人気があり、Standard、Google、AirbnbのJavaScriptコード仕様を含む多くのコードスタイルをサポートしています。 これは最も人気のあるVS Codeコードチェックプラグインです。

  • ESLint:このプラグインはESLintをVS Codeに統合します。 最も人気のあるコード検出プラグインで、670万以上のダウンロードがあります。 そのルールは.eslintrc.json設定されてい.eslintrc.json
  • JSHint:JSHintベースのコード検出プラグイン。 プロジェクトとディレクトリの設定として.jshintrcファイルを使用します。
  • JavaScript標準スタイル:コード検出のための構成がゼロで厳格な規則、StandardJS規則の使用を強制します。

さまざまなコード検出の長所と短所の概要を確認したい場合は、コード検出ツールの比較をご覧ください。

4.ノードプラグイン

あなたが困難な方法で物事をやりたい人でない限り、すべてのJavaScriptプロジェクトは少なくとも1つのNodeパッケージを必要とします。 これは、Nodeモジュールをより簡単に扱うのに役立ついくつかのVS Codeプラグインです。

  • Npm: package.jsonを使用して、インストール済みのnpmパッケージを確認し、インストールパッケージのバージョンが正しいことを確認して、 package.jsonファイルがないパッケージまたはインストールされていないパッケージを強調表示します。
  • Node.jsモジュールIntelliSense:JavaScriptおよびTypeScriptのインポート宣言の自動補完を提供します。 ソースコード:vscode-node-module-intellisense。

  • Path IntelliSense:Nodeではそれほど重要ではありませんが、ローカルファイルについては必ず知恵のヒントが必要ですこのプラグインは自動的にファイル名を補完します。
  • Node exec:現在のファイルまたは選択したコードをNodeで実行することを許可します。
  • ノードパッケージの表示:ハングを使用してノードコードのソースコードをすばやく表示し、ノードコードライブラリまたはファイルを直接VS Codeで開くことができるようにします。
  • node_modulesを検索する:通常、 node_modulesフォルダーはデフォルトの検索範囲内にはありません。 ソースコード:vscode-search-node-modules。

  • 輸入コスト:輸入したパッケージのサイズを表示します。 ソースコード:輸入費用。

5.コードフォーマットプラグイン

時には、以前は理想的ではなかったコードを自分でフォーマットしていることに気づくことがあります。 時間を節約するために、次のVS Codeプラグインのいずれかをインストールして、既存のコードをすばやくフォーマットしてリファクタリングすることができます。

  • Beatufy:JavaScript、JSON、CSS、およびHTMLをサポートするjsBeautifierプラグイン。 .jsbeautifyrcファイルを介してカスタマイズできます。 これは最も人気のあるフォーマットツールで、現在230万ダウンロードがあります。
  • Prettier Code Formatter:JavaScript、TypeScript、およびCSSプラグインに対するPrettierのサポートを利用して、現在150万を超えるダウンロードがあります。
  • JS Refactor:変数やメソッドの抽出、矢印関数とテンプレート文字列を使用した既存のコードの等価形式への変換、関数のエクスポートなど、JavaScriptコードをリファクタリングするための便利なメソッドや操作を多数提供します。
  • JavaScript Booster:素晴らしいコードリファクタリングツール。 varconstまたはletにする、余分なelse文を削除する、宣言をマージする、初期化するなどのコード操作が必要です。 インスピレーションは主にWebStormに触発されています。 ソースコード:vscode-javascript-booster。

6.ブラウザプラグイン

あなたがJavaScriptでコンソールプログラムを書いていない限り、あなたはたぶんあなたのブラウザであなたのJavaScriptコードを実行するでしょう。 つまり、コードを更新する頻度を確認するために、ブラウザを頻繁に並べ替えることになります。 毎回手動でブラウザを並べ替えるのではなく、開発の繰り返しプロセスを大幅に減らすことができるツールがいくつかあります。

  • Chrome用デバッガ:エディタでブレークポイントを設定すると、ChromeでJavaScriptを簡単にデバッグできます。 ソースコード:vscode-chrome-debug。

  • ライブサーバー:ローカル開発タイムサーバーをオンにして、静的ページと動的ページをリアルタイムで更新します。 ソースコード:vscode-chrome-debugvscode-live-server。

  • Webサーバーでプレビュー:Webサーバーとリアルタイムのプレビューを提供します。
  • PHPサーバー:クライアント上でしか実行できないJavaScriptコードをテストするのに役立ちます。
  • RESTクライアント:ブラウザーまたはCURLプログラムを使用してREST APIエンドポイントをテストする代わりに、このツールをインストールしてHTTP要求をエディター内で互いに直接送信することができます。

7.フレームクラスプラグイン

ほとんどのプロジェクトでは、開発時間を短縮するために適切なフレームワークを使用してコードを構築します。 VS Codeはプラグインを通してほとんどの主流のフレームワークをサポートします。 ただし、まだ完全にはサポートされていない特定のフレームワークがいくつかあります。 強力な機能を提供するいくつかのVS Codeプラグインはここにあります。

  • Angular 6:TypeScript、HTML、Angular Material ngRx、RxJS、およびFlex LayoutをサポートするAngular 6コードスニペットを提供します。 現在220万以上のダウンロードと172のAngularコードスニペットがあります。
  • Angular v5スニペット:TypeScript、RxJS、HTML、およびDockerファイル用のコードスニペットを提供します。 現在270万以上のダウンロードがあります。
  • es6 / es7用のReact Native / React / Reduxスニペット:これらのフレームワーク用のES6 / ES7構文のコードスニペットを提供します。
  • React Native Tools:React Nativeフレームワーク用のコードヒント、コマンドラインツール、およびデバッグ機能を提供します。
  • Vetur:構文の強調表示、コードスニペット、Emmet、コード検出、スマートヒント、およびVueフレームワークのデバッグサポートを提供します。 それはGitBook上のファイルの素晴らしいリリースが付属しています。
  • Ember:Emberのコマンドラインサポートとスマートなヒントを提供します。 インストール後、すべてのember cliコマンドは、VS Code独自のコマンドラインリストで直接使用できます。
  • Cordava Tools:CordavaプラグインとIonicフレームワークをサポートし、Cordovaのプロジェクトに基づいたインテリジェントなヒントを提供し、他の機能によるサポートを既にデバッグしています。
  • jQueryコードスニペット: jqプレフィックスで有効にされた130以上のjQueryコードスニペットを提供します。

8.テストクラスプラグイン

テストは、特にプロダクションプロジェクトにとって、ソフトウェア開発の重要な部分です。 JavaScriptテストの概要は、JavaScriptテスト:ユニットテストと機能テストと統合テストの対比で読むことができます。 テスト用のVS Codeプラグインは次のとおりです。

  • モカサイドバー:プロジェクトの単体テストを提供するためにモカライブラリを使用してください。 このフレームワークは、コード内で直接テストを実行し、デコレータとしてエラー情報を表示するのに役立ちます。
  • ES Mocha Snippets:ES 6構文を提供するMochaコードスニペット。 このプラグインの焦点は、波かっこの使用を最小限に抑え、コードをコンパクトに保つ​​ためにarrow関数を使用することです。 設定によりセミコロンを使用できます。
  • Jasmineコードスニペット:Jasmineテストフレームワークのコードスニペット。
  • 分度器スニペット:分度器のエンドツーエンドのテストフレームワークのためのコードスニペット。 JavaScriptとTypeScriptをサポートします。
  • Node TDD:NodeおよびJavaScriptプロジェクトに対してテスト駆動開発サポートを提供します。 自動テストの構築は、ソースコードが更新された直後に起動することができます。 ソースコード:node-tdd

9.その他の素晴らしいプラグ

この記述はまさに正しいので、私はVSコードの次のバッチを「素晴らしい」と分類します。

  • Quokka.js:JavaScriptにクイックビルドプロトタイプのウォークスルーと優れたドキュメントを提供する非常に強力なデバッグツール。
  • JSONとして貼り付け:JSONデータをJavaScriptコードに素早く変換します。 ソースコード:quick-type

  • コードメトリクス:これはJavaScriptとTypeScriptコードの複雑さを計算するもう一つの素晴らしいプラグインです。 ソースコード:codemetrics。

10.外装

最後のカテゴリに到達したので、VS Code市場にはプラグインの分類があることを知っていただきたい。 基本的に、それらは簡単なインストールのためにパッケージされているいくつかのVS Codeプラグインの関連コレクションです。 ここで何かが良いです:

  • Nodejs Extension Pack:このパッケージには、ESLint、npm、JavaScript(ES6)スニペット、Search node_modules、NPM IntelliSense、およびPath IntelliSenseが含まれています。
  • Node.jsのVSコード – 開発パック:これには、NPM IntelliSense、ESLint、Chrome用デバッガー、コードメトリクス、Docker、およびインポートコストが含まれます。
  • Vue.js Extension Pack:VueとJavaScriptプラグインのコレクション。 現在、12のVS Codeプラグインが含まれていますが、auto-rename-tagやauto-close-tagなど、これまでに説明したことのないプラグインもあります。
  • イオン拡張パック:このパッケージには、イオン、Angular、RxJS、Cordova、およびHTML用のプラグインが含まれています。
  • SpreadJSの純粋なフロントエンドテーブルコンポーネント :システムに埋め込むことができるオンラインのExcel機能的なレイアウトはExcelと非常によく似ており、Excelの450の数式と92のチャートと完全に互換性があります。

まとめ

VS Codeには高品質のプラグインがたくさんあり、JavaScript開発者の間で人気があります。 JavaScriptコードを書くことは今より簡単ではありません。

ESLintのようなプラグインはコードの一般的な間違いを防ぐのに役立ちます; Chrome用のDebuggerはコードをより簡単にデバッグするのに役立ちます;スマートなヒント付きのNode.jsプラグインはモジュールを正しく参照するのに役立ちます。 RESTクライアントなどのツールを使用すると、外部のツールへの依存を減らすことができます(たとえば、SpreadJSの純粋なフロントエンドテーブルコントロールコンポーネントを使用すると、 オンラインのExcelをアプリケーションに組み込むことができます)。 これらのツールはすべて、反復プロセスを大幅にスピードアップします。

私はこれらのリストがあなたのワークフローを助けるであろう新しいVS Codeプラグインへのアクセスをあなたに与えることを願っています。

元のリンク