背景

以前は、IDEとして書き込みコードにのみWebStormあったが、理由ました：

このMacはWebStorm意志カトンを使用した後に接続されている2台のモニタの手インチ
WebStorm有料（一部はメソッドを介して調和のとれたかもしれないが）。

だから我々はコードを書いている間に新しいエディタやIDEを見つける必要があります。

なぜVSコード

パフォーマンスはVSコードのAtomによるものでした。
プラグインシステムVSコードの使いやすさは崇高よりもはるかに高いです。
WebStormに関してVSコードは無料です。

VSコードの設定

注：現在VSコード関連の設定に基づくv1.20.1バージョン。

ユーザー設定

では首选项->设置、VSコード関連のプロパティが設定されていることは可能である、アダプテーションフィールドがあり、次のとおりです。

"editor.fontSize": 16エディタは、フォントサイズを調整するために設けられている、電流16の大きさが提供されます。
"files.autoSave": "onFocusChange"戦略調整はファイルは、すなわち、別のアプリケーションまたは自動的に保存されたファイルへの切り替え、フォーカスの外に保存されている現在のフィールドを意味し、エディタのセーブ自動的に配置されています。
"editor.cursorWidth": 2この設定は、カーソルの厚さを制御するために使用される現在設定されているサイズは2です。
"editor.suggestSelection": "recentlyUsedByPrefix"この設定は、あなたはおそらく通じ最後のことを意味し、現在推奨されているプレフィックスよりも完了する前に、勧告に従って行われるように設定オートコンプリートの提案を、制御するために使用されco、選択しconst、あなたが入力したcoアドバイスも、時間をあなたが選びますconst。

断片

VSコードで指定された代码片段指定されたテキスト画像編集機能、具体的な手順を挿入します首选项->用户代码片段->新建全局代码片段。

私たちは頻繁にコピーを回避し、貼り付け作業の重複するように、いくつかの頻繁に使用されるコードスニペットファイルステートメントノート、共通のテンプレートを追加することができます。

私はシンプルましょう文件声明注释この機能を説明するために例を：

{
    // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "JS & TS description": {
        "prefix": "jsfile",
        "body": [
            "/**",
            "* @module ${TM_FILENAME_BASE}",
            "* @author: Hjava",
            "* @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
            "*/",
            "",
            "'use strict';",
            ""
        ],
        "description": "Insert description."
    }
}

ここでJS & TS description、以下の表のフィールドの他の特定の意味は、フラグメントの名前を表します。

フィールド	説明
接頭辞	プレフィックスは、その接頭辞がコンテンツを指定し、エディタでこのフラグメントを選択することができますが、エディタに入力した提案。
体	具体的には、断片を選択した後、この配列に従ってテキストできる`\n`エディタへの出力を組み合わせること。：これは特定の定数のいくつかは、あなたのような、入力時の情報の一部を取得することができます $ {CURRENT_YEAR}：現在の年、特定のフィールドを見ることができ、ここで説明：この記事を書いて、セクション1.20.0のバージョンは定数が上記ではありません追加します文書、特定のフィールド：`CURRENT_YEAR`：年（4桁）`CURRENT_YEAR_SHORT`：年（2桁）`CURRENT_MONTH`：月`CURRENT_DATE`：日`CURRENT_HOUR`：時間`CURRENT_MINUTE`：分`CURRENT_SECOND`：秒
説明	説明このフィールドには、説明にテキスト断片を表示し、説明しています。

次のような効果の具体例としては：

次のように結果を挿入した後です。

プラグ

プラグの左側のパネルで、あなたは、の検索インストールおよびアンインストールプラグインすることができます。次のように推奨プラグインは以下のとおりです。

Auto Close Tagそれはあなたが自動的にあなたの文章をHTMLで終了タグを追加することができます。
Auto Rename Tagあなたが別のラベルとペアにラベルを変更すると、自動的に調整することができます。
js-beautify for VS CodeあなたはあなたのJavaScriptファイルをフォーマットすることができます。もちろん、それはまた、JSONをフォーマットする機能を提供します。
Beautify css/sass/scss/lessそれは、関連するCSSファイル形式にことができます。
Better Commentsあなたの意見は、より友好的に見えるようにすることができます。
Document This、自動的に関数やメソッドにコメントを追加できます。
ESLintこれは、VSコードESLint関連する機能を提供する、言うまでもないです。
PostCSS Syntax Highlighting、VSコードPostCSS構文をサポートできます。
vscode-icons、あなたはファイルツリーのアイコンを増やすことができます。

概要

全体としてVSコードは、比較的簡単なエディタを使用することですいくつかの特定のプラグインを通して、あなたの仕事の効率を向上させることができます。他のIDEまたはビューの編集者と比較すると、彼は彼自身のユニークな利点を持っています。

開発効率VSコードの基本設定の章を改善

背景

なぜVSコード

VSコードの設定

ユーザー設定

断片

プラグ

概要

おすすめ