Improve development efficiency VS Code Basic Configuration chapter

background

Prior has been the only WebStorm to write code as IDE, but because:

1. This Mac in the hands of the two monitors connected after using WebStorm will Caton.
2. WebStorm pay (although some may be harmonious through method).

So we need to find a new editor or IDE to while writing code.

Why VS Code

1. The performance was due to the VS Code Atom.
2. Ease of use of plug-in system VS Code is much higher than Sublime.
3. VS Code with respect to WebStorm is free.

VS Code Configuration

Note: The current VS Code related configuration based v1.20.1 version.

user settings

In 首选项->设置, it is possible for the VS Code related properties are set, there are adaptation field follows:

• "editor.fontSize": 16The editor is provided for adjusting the font size, the size of the current 16 is provided.
• "files.autoSave": "onFocusChange"The strategy adjustment is arranged to automatically save the editor, meaning the current field when the file is saved out of focus, i.e., switching to another application or a file when saved automatically.
• "editor.cursorWidth": 2This setting is used to control the thickness of the cursor is currently set size is 2.
• "editor.suggestSelection": "recentlyUsedByPrefix"This setting is used to control the auto-complete suggestions, currently set to be carried out in accordance with recommendations before completion than recommended prefix, meaning that you probably last through coselected const, you then enter the cotime, also advise you choose const.

code segment

VS Code named by 代码片段inserting a specified text image editor function, specific steps 首选项->用户代码片段->新建全局代码片段.

We can add some frequently used code snippets file statement notes, common template, so as to avoid frequent copy and paste and duplication of effort.

Let me give a simple 文件声明注释example to illustrate this function:

{
    // 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."
    }
}

Wherein JS & TS descriptionrepresents the name of the fragment, other specific meaning of the fields in the table below:

Field	Explanation
prefix	Prefix, that prefix specified content, can choose this fragment in the editor proposed what you type in the editor is.
body	Specifically text, after selecting the fragment, according to this array may \nbe combined output to the editor. Some of which specific constants, you can get some of the information at the time of input, such as: $ {CURRENT_YEAR}: the current year, the specific field can see here Description: In writing this article, section 1.20.0 version adds constants are not above the document, specific fields: CURRENT_YEAR: Year (4 digits) CURRENT_YEAR_SHORT: Year (2 digits) CURRENT_MONTH: month CURRENT_DATE: day CURRENT_HOUR: hours CURRENT_MINUTE: minutes CURRENT_SECOND: seconds
description	Description explains, this field displays the text fragments in the description.

Specific examples of the following effects:

After inserting the results are as follows:

Plug

In the left panel of the plug, you can search for, install and uninstall plug-ins. Recommended plug-ins are as follows:

• Auto Close TagIt can help you automatically add the closing tag in your writing HTML.
• Auto Rename TagIt can automatically adjust when you change a label paired with another label.
• js-beautify for VS CodeYou can format your JavaScript file. Of course, it also provides the ability to format the JSON.
• Beautify css/sass/scss/lessIt allows you to relevant CSS file format.
• Better CommentsYou can make your comments look more friendly.
• Document This, Can automatically add comments to the functions and methods.
• ESLintThis goes without saying, to the VS Code provides ESLint related functions.
• PostCSS Syntax Highlighting, Allowing VS Code support PostCSS syntax.
• vscode-icons, Allows you to increase the file tree icon.

to sum up

VS Code as a whole is a relatively easy to use editor, can improve the efficiency of your work through some specific plugins. Compared to other IDE or editor of view, he has his own unique advantages.