10はVSCode効率的な開発ウィジェットをインストールされます。
この記事ではVSCodeが大幅にソフトウェア開発の効率を改善するために開発された10のプラグインをインストールします、現在最も人気のあるフロントエンドの開発ツールについて説明します。
基本的な使用VSCodeは「VSCode効率的な開発は、プラグインをインストールします。」私のオリジナルのビデオチュートリアルを参照することができます
VSCode（Visual Studioのコード）は、Microsoftがほぼ完璧なソフトウェア開発ツールのフロントエンド開発と見なさ無料、オープンソース、クロスプラットフォームのテキスト（コード）エディタを開発しています。
公式サイトには、次のとおりです。https://code.visualstudio.com/
1. VSCode基本的な使用のビデオチュートリアル
当社では、知識の惑星のコミュニティにおける10のビデオチュートリアルのオリジナルセット私と一緒に共有する「VSCode効率的な開発は、プラグインをインストールする必要があります。」
このコースはVSCodeエディタのコースです。VSCode強力なプラグインライブラリは、それがさらに無敵のインストールプラグインを共有するために、開発効率のコースを向上させる上で構成され、知識関連スキルの使用、インストールする必要があります。
ビデオチュートリアルコース概要
- 001 - コースの概要
- 002 - 一目でファイルの種類を作成する方法
- より効率的にプロジェクトを管理する方法 - 003
- 004 - 自動あなたのコードのフォーマット
- 005 - キーテストに語学学習環境のすべての種類を設定する方法
- 006--どのように連携デバッグとChrome
- 自動的にリアルタイムコードの仕様やコードのエラーを検出する方法 - 007
- フロントエンド開発の効率を向上させる方法008--等を反応させます
- VSCodeにあなたの端末を統合し、美化する方法 - 009
- 010 - どのようにVSCodeに移行するにはVisual Studioのヘビーユーザー
ビデオチュートリアル住所：https://devopen.club/course/vscode。
2.10エディタは、プラグインをインストールする必要があります
10を整理するために皆のため再びここにビデオチュートリアルの更新に相当VSCodeエディタプラグインをインストールする必要があります。基本的なプラグインがインストールエディタを使用して直接参照ビデオチュートリアル上にあってもよいです。
2.1ファイルのアイコンvscode、アイコン
- プラグイン名：vscode-アイコン
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
我々は、効率的な、使いやすいインターフェースコーディングを持って最初の注文は、我々はいくつかの造園を行うには、いくつかの不明確なコンポーネントを必要としています。
vscode-アイコンは表示を最適化するために、ファイルの種類の様々な目の前にあるアイコンの上に実現することができるプラグインなので、私たちが直接することができ、ファイルの長いリストを見たとき、あなたはすぐにアイコンファイルを介してファイルの種類を知って、代わりに行くことができますファイルの拡張子。
2.2つダークプロ暗いテーマ
- プラグイン名：ワンダークプロ
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
ロングコーディング、濃い色のコーディング環境では、目の疲労を作る可能性が低いですが、また自身がより集中することを可能にすることができます。
一つのダークProのプラグインをインストールした後で、より快適なコーディング、暗いネクタイにVSCodeエディタの色調整の鍵となることができます。
2.3コードが美しく美化
- 名前をプラグ：美しく
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
他の人が利便性の多くを持つことになりますときに瞬時にコード汚いコードを記述することができますすぐにあなたのコード形式をフォーマットでき美化プラグインは非常に規則的な構造になり、コードが遅く読書で強迫性障害、より良いメンテナンスとコードフォーマットを持っている必要があります。
基本的には現在の言語のすべてのカバーを遮断する、非常にサポートされている言語でプラグインが、あなたはまた、コードのフォーマット構造をカスタマイズすることができます。
2.4タグチェッカーESLint
- プラグイン名：ESLint
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
ESLintは文法的に正しい、統一されたスタイルのコードを書くことを確認するために使用することができ文法規則とコードのスタイルチェックツールです。
ESLintは直接VSCode ESLint機能統合にプラグインの詳細とコードフォーマットの仕様については、インストール後に使用することができ、良いもカスタマイズすることができ、そしてチームは、同じ設定ファイルを共有することができ、そのチームの所有者が書くことコードは、同じコードの仕様を使用し、一人一人が自分のチェックコードの仕様を行うことができます前に、コードを確認することができます。
Chromeの2.5デバッグツールに必要なデバッガ
- プラグイン名：Chromeのデバッガ
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
これは、単に必要なフロントエンドの開発ツールで、大幅に開発およびデバッグモードを変更します。
前のフロントエンドのデバッグ、主にJavaScriptのデバッグは、あなたがして、ブレークポイントを追加し、Chromeのコンソール内の対応するコードセクションを見つけてステップと確認する必要がどこChromeのコンソールの値の変化。
コードはChromeで実行したときにクロームのためのデバッガを使用した後しばらくして、あなたはVSCodeブレークポイントに直接追加することができ、[実行]をクリックし、クロームページでは、VSCodeに追加ブレークポイントまで実行し、実行し続けますあなたは直接VSCodeをステップ実行することができます。
デバッグツールの使用上のChromeは、あなたが私の元のビデオチュートリアルで惑星の私たちの知識を共有を参照することができ、「50のChromeデベロッパーツール不可欠なスキルを」、不可欠なブラウザのデバッグツール内の共有フロントエンド開発コースは、Chromeデベロッパーツールを使用しますプロセスに必要な50社の使用とデバッグ技術は、そのような知識は、あなたが有能な人材に必要なフロントエンドの開発スキルになるということです。
2.6ユニバーサル言語ランタイムコードのランナー
- プラグイン名：コードランナー
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
あなたが学ぶか、開発言語の多種多様に接触してする必要があり、コードのランナープラグイン場合は、言語の開発環境の多様性を構築していないので、直接このプラグイン経由で直接言語に対応するコードを実行することができ、それは学習やテストの様々な理想的です開発言語。
サポートされている言語：C、C ++、Javaのは、JavaScript、PHP、PythonやPerlやPerl 6の、ルビー、ゴー、ルア、Groovyの、PowerShellの、BAT / CMD、BASH / SH、F＃スクリプト、F＃（。NETコア）、 C＃スクリプト、C＃（。NETコア）、VBScriptの、活字体、CoffeeScriptの、スカラ座、スウィフト、ジュリア、クリスタル、OCamlのスクリプト、R、AppleScriptを、エリクサー、Visual Basic .NETの、Clojureの、haXeの、Objective-Cの、錆、ラケット、 AutoHotkeyを、AutoItで、Kotlin、ダーツ、無料パスカル、ハスケル、ニム、D、だけでなく、いくつかのカスタムコマンド。
2.7クイックノート資料この
- プラグイン名：ドキュメントこの
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=joelday.docthis
優れた性能、標準化された形式に加えて、優れたコードは、コメントにも不可欠であるが、コメントは特にJavaScript言語のために、標準の注釈方法を持っている必要があります。
ドキュメントこれは、すぐにコメントを生成するためのお手伝いをするなど、注釈など一部の機能やあなたのように抽出されたパラメータを定義することができますが、ツールを使用すると、コードの仕様を記述することが不可欠です。
2.8 CSSクラス名のスマートのヒント
- HTMLでのCSSクラス名のIntelliSenseの名前を差し込み
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
あなたがHTMLで定義されたスタイル名を呼び出すと、時々、頻繁に使用すると、CSSクラス名を定義していることを確認するために、前後に切り替えるにはHTMLとCSSファイルを切り替えます。
そして、HTMLプラグインでのCSSクラス名用のIntelliSenseで、あなたはHTML内の場所のCSSクラス名を呼び出す必要があり、このプラグインはインテリジェントにCSSクラス名が定義されているあなたにヒントを与えるだろう。
2.9コードチェッカーコードはスペルチェッカースペル
- プラグイン名：コードは、スペルチェッカー
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
このプラグインは、インストール後に十分にコントロールしていない、スペルミスがある場合、あなたはあなたのコード内でその利点ことがわかります、我々は後に、すべてのコード、英語の単語の変数定義を大量に書くので、プラグインはまた、スペルミスを与えることができます推奨言葉。
2.10 MEMOプラグTODOハイライト
- プラグイン名：TODOハイライト
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
他のコードエディタの多くの機能部品を必要とし、そのようなあなたが書いたコードの特定の部分として、TODOアノテーション機能は、これはあなたがに対応するコードでのTODOコメントを追加できるタイプであることを、後に実現するために来ていますそして後者はすぐに実施していきまたは最適化する必要が書き続け、プロジェクトの多くの時間、TODOがより便利になったときに、時々TODOヘルプの数十があるかもしれないので、あなたがこれらの機能をマークし、このセクションにジャンプすることができます。
3.まとめ
もちろん、プラグインここに提示するだけで、必要なプラグイン10で、実際には、あなたが開発した言語に応じて、開発ツールの効率を改善するために多くの非常にできがありますが、中心VSCodeの自分自身の問い合わせにプラグインをダウンロードしてインストールすることができ、インストールする必要があります。
この記事ではVSCodeが大幅にソフトウェア開発の効率を改善するために開発された10のプラグインをインストールします、現在最も人気のあるフロントエンドの開発ツールについて説明します。
基本的な使用VSCodeは「VSCode効率的な開発は、プラグインをインストールします。」私のオリジナルのビデオチュートリアルを参照することができます
VSCode（Visual Studioのコード）は、Microsoftがほぼ完璧なソフトウェア開発ツールのフロントエンド開発と見なさ無料、オープンソース、クロスプラットフォームのテキスト（コード）エディタを開発しています。
公式サイトには、次のとおりです。https://code.visualstudio.com/
1. VSCode基本的な使用のビデオチュートリアル
当社では、知識の惑星のコミュニティにおける10のビデオチュートリアルのオリジナルセット私と一緒に共有する「VSCode効率的な開発は、プラグインをインストールする必要があります。」
このコースはVSCodeエディタのコースです。VSCode強力なプラグインライブラリは、それがさらに無敵のインストールプラグインを共有するために、開発効率のコースを向上させる上で構成され、知識関連スキルの使用、インストールする必要があります。
ビデオチュートリアルコース概要
- 001 - コースの概要
- 002 - 一目でファイルの種類を作成する方法
- より効率的にプロジェクトを管理する方法 - 003
- 004 - 自動あなたのコードのフォーマット
- 005 - キーテストに語学学習環境のすべての種類を設定する方法
- 006--どのように連携デバッグとChrome
- 自動的にリアルタイムコードの仕様やコードのエラーを検出する方法 - 007
- フロントエンド開発の効率を向上させる方法008--等を反応させます
- VSCodeにあなたの端末を統合し、美化する方法 - 009
- 010 - どのようにVSCodeに移行するにはVisual Studioのヘビーユーザー
ビデオチュートリアル住所：https://devopen.club/course/vscode。
2.10エディタは、プラグインをインストールする必要があります
10を整理するために皆のため再びここにビデオチュートリアルの更新に相当VSCodeエディタプラグインをインストールする必要があります。基本的なプラグインがインストールエディタを使用して直接参照ビデオチュートリアル上にあってもよいです。
2.1ファイルのアイコンvscode、アイコン
- プラグイン名：vscode-アイコン
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
我々は、効率的な、使いやすいインターフェースコーディングを持って最初の注文は、我々はいくつかの造園を行うには、いくつかの不明確なコンポーネントを必要としています。
vscode-アイコンは表示を最適化するために、ファイルの種類の様々な目の前にあるアイコンの上に実現することができるプラグインなので、私たちが直接することができ、ファイルの長いリストを見たとき、あなたはすぐにアイコンファイルを介してファイルの種類を知って、代わりに行くことができますファイルの拡張子。
2.2つダークプロ暗いテーマ
- プラグイン名：ワンダークプロ
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
ロングコーディング、濃い色のコーディング環境では、目の疲労を作る可能性が低いですが、また自身がより集中することを可能にすることができます。
一つのダークProのプラグインをインストールした後で、より快適なコーディング、暗いネクタイにVSCodeエディタの色調整の鍵となることができます。
2.3コードが美しく美化
- 名前をプラグ：美しく
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
他の人が利便性の多くを持つことになりますときに瞬時にコード汚いコードを記述することができますすぐにあなたのコード形式をフォーマットでき美化プラグインは非常に規則的な構造になり、コードが遅く読書で強迫性障害、より良いメンテナンスとコードフォーマットを持っている必要があります。
基本的には現在の言語のすべてのカバーを遮断する、非常にサポートされている言語でプラグインが、あなたはまた、コードのフォーマット構造をカスタマイズすることができます。
2.4タグチェッカーESLint
- プラグイン名：ESLint
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
ESLintは文法的に正しい、統一されたスタイルのコードを書くことを確認するために使用することができ文法規則とコードのスタイルチェックツールです。
ESLintは直接VSCode ESLint機能統合にプラグインの詳細とコードフォーマットの仕様については、インストール後に使用することができ、良いもカスタマイズすることができ、そしてチームは、同じ設定ファイルを共有することができ、そのチームの所有者が書くことコードは、同じコードの仕様を使用し、一人一人が自分のチェックコードの仕様を行うことができます前に、コードを確認することができます。
Chromeの2.5デバッグツールに必要なデバッガ
- プラグイン名：Chromeのデバッガ
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
これは、単に必要なフロントエンドの開発ツールで、大幅に開発およびデバッグモードを変更します。
前のフロントエンドのデバッグ、主にJavaScriptのデバッグは、あなたがして、ブレークポイントを追加し、Chromeのコンソール内の対応するコードセクションを見つけてステップと確認する必要がどこChromeのコンソールの値の変化。
コードはChromeで実行したときにクロームのためのデバッガを使用した後しばらくして、あなたはVSCodeブレークポイントに直接追加することができ、[実行]をクリックし、クロームページでは、VSCodeに追加ブレークポイントまで実行し、実行し続けますあなたは直接VSCodeをステップ実行することができます。
デバッグツールの使用上のChromeは、あなたが私の元のビデオチュートリアルで惑星の私たちの知識を共有を参照することができ、「50のChromeデベロッパーツール不可欠なスキルを」、不可欠なブラウザのデバッグツール内の共有フロントエンド開発コースは、Chromeデベロッパーツールを使用しますプロセスに必要な50社の使用とデバッグ技術は、そのような知識は、あなたが有能な人材に必要なフロントエンドの開発スキルになるということです。
2.6ユニバーサル言語ランタイムコードのランナー
- プラグイン名：コードランナー
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
あなたが学ぶか、開発言語の多種多様に接触してする必要があり、コードのランナープラグイン場合は、言語の開発環境の多様性を構築していないので、直接このプラグイン経由で直接言語に対応するコードを実行することができ、それは学習やテストの様々な理想的です開発言語。
サポートされている言語：C、C ++、Javaのは、JavaScript、PHP、PythonやPerlやPerl 6の、ルビー、ゴー、ルア、Groovyの、PowerShellの、BAT / CMD、BASH / SH、F＃スクリプト、F＃（。NETコア）、 C＃スクリプト、C＃（。NETコア）、VBScriptの、活字体、CoffeeScriptの、スカラ座、スウィフト、ジュリア、クリスタル、OCamlのスクリプト、R、AppleScriptを、エリクサー、Visual Basic .NETの、Clojureの、haXeの、Objective-Cの、錆、ラケット、 AutoHotkeyを、AutoItで、Kotlin、ダーツ、無料パスカル、ハスケル、ニム、D、だけでなく、いくつかのカスタムコマンド。
2.7クイックノート資料この
- プラグイン名：ドキュメントこの
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=joelday.docthis
優れた性能、標準化された形式に加えて、優れたコードは、コメントにも不可欠であるが、コメントは特にJavaScript言語のために、標準の注釈方法を持っている必要があります。
ドキュメントこれは、すぐにコメントを生成するためのお手伝いをするなど、注釈など一部の機能やあなたのように抽出されたパラメータを定義することができますが、ツールを使用すると、コードの仕様を記述することが不可欠です。
2.8 CSSクラス名のスマートのヒント
- HTMLでのCSSクラス名のIntelliSenseの名前を差し込み
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
あなたがHTMLで定義されたスタイル名を呼び出すと、時々、頻繁に使用すると、CSSクラス名を定義していることを確認するために、前後に切り替えるにはHTMLとCSSファイルを切り替えます。
そして、HTMLプラグインでのCSSクラス名用のIntelliSenseで、あなたはHTML内の場所のCSSクラス名を呼び出す必要があり、このプラグインはインテリジェントにCSSクラス名が定義されているあなたにヒントを与えるだろう。
2.9コードチェッカーコードはスペルチェッカースペル
- プラグイン名：コードは、スペルチェッカー
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
このプラグインは、インストール後に十分にコントロールしていない、スペルミスがある場合、あなたはあなたのコード内でその利点ことがわかります、我々は後に、すべてのコード、英語の単語の変数定義を大量に書くので、プラグインはまた、スペルミスを与えることができます推奨言葉。
2.10 MEMOプラグTODOハイライト
- プラグイン名：TODOハイライト
- プラグ住所：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
他のコードエディタの多くの機能部品を必要とし、そのようなあなたが書いたコードの特定の部分として、TODOアノテーション機能は、これはあなたがに対応するコードでのTODOコメントを追加できるタイプであることを、後に実現するために来ていますそして後者はすぐに実施していきまたは最適化する必要が書き続け、プロジェクトの多くの時間、TODOがより便利になったときに、時々TODOヘルプの数十があるかもしれないので、あなたがこれらの機能をマークし、このセクションにジャンプすることができます。
3.まとめ
もちろん、プラグインここに提示するだけで、必要なプラグイン10で、実際には、あなたが開発した言語に応じて、開発ツールの効率を改善するために多くの非常にできがありますが、中心VSCodeの自分自身の問い合わせにプラグインをダウンロードしてインストールすることができ、インストールする必要があります。