Editor vscode use experience

If we want to do a good job, we must first sharpen our tools. The tools we use will make us get twice the result with half the effort.
I’ve used a lot of editors on the market,

Editor experience

Notepad + + (open source) this should be the lightest. It’s OK to check the code, just edit the code
Official website address:https://notepad-plus-plus.org/

Brackets, (open source) this is also good. GitHub Star: 30K. The last release was on June 18. The reason why I abandoned it at that time was that I was not very friendly to Vue support
Official website:http://brackets.io/

Atom, (open source) GitHub Star: 47.4k, officially produced by GitHub
Official website address:https://atom.io

Webstorm, (charge), this is a very powerful editor, basically zero configuration, rich functions, obvious shortcomings, slow start, and pay, there is no Chinese version, Chinese needs to be sinicized, I don’t know whether the official has a Chinese package now, I haven’t paid attention to it for a long time
Official website address:https://www.jetbrains.com/webstorm/

Sublime text: (charge), this is also a relatively lightweight editor, the function needs to install their own extensions to improve, I used for a long time
Official website address:http://www.sublimetext.com/

HBuilder: is too laggy, and it is a good support in the domestic editor. It supports many functions. At that time, it used to develop app, at that time, it wanted to support the domestic product, but when the project became bigger, it would be stuck. Super card. If several projects started at the same time, it would be hung up.
Official website address:http://www.dcloud.io/

vscode

Vscode is an editor that I will focus on today, Microsoft open source, GitHub Star: 66K
Official website address:https://code.visualstudio.com/
I came into contact with vscode at the beginning of last year and have been using it to this day. I didn’t deny the editors listed above, but vscode is more suitable for me,
Each editor has its own advantages and selling points.
There is no best weapon, only the best one.
A good selling point of vscode is that it supports Chinese, which is the welfare of developers
Like many editors, vscode improves its functions through extensions

Introduction of vscode plug-ins

I have an important reference index for installing plug-ins, that is, the number of downloads

Download volume is a reference indicator of popularity. Generally, I will carefully consider the download volume below 1m,
⚠ Note: the more plug-ins you install, the better. There will be conflicts between some plug-ins. If you install too many plug-ins, the editor will become stuck,
That is to say, choose the one you need most from the best and most popular plug-ins
Git is integrated into vscode. If your team also uses git, then I think vscode must be your first choice

GitLens — Git supercharged

Downloads so far: 11m
introduce

Gitlens enhances git functionality built into vscode code. It helps you see the code author visually through git blast comments and code shots, seamlessly navigate and explore git repositories, gain valuable insights through powerful comparison commands, and so on.

After loading, it looks like this. The author, submission time, commit log and other information of each line of code are clear at a glance.

After successful installation, this icon will appear

If the development is vscode + git, this plug-in is highly recommended. You can see at a glance who changed your code

Git History

Downloads so far: 4.2m
Introduction:

View and search git logs as well as graphics and details.
View the previous copy of the file.
View and search history

• View the history of one or all branches (GIT log)
• View file history
• View the GIT fault of a line in the file.
• View the author’s history

Comparison:

• Compare branches
• Quite
• Cross submission comparison file

Other features:

• GitHub Avatar
• Pick and submit
• Re submit
• Create branch from commit
• View commit information in tree view (snapshot of all changes)
• Merging and rebasing

More functions need to be explored by yourself

Auto Close Tag

Downloads so far: 2.2m
Automatically add HTML / XML closing tag, write the first half of the tag, and automatically complete the second half

Auto Rename Tag

Downloads so far: 1.1m
Automatically rename pairs of HTML / XML tags
Half of the HTML tag (front or back) is modified, and the other half is modified automatically. (note that the input method should be in English mode)

Beautify

Downloads so far: 6.7m
The code beautifies JavaScript, JSON, CSS, sass and HTML.
This will install it, code beautification

Bracket Pair Colorizer

Downloads so far: 3.1m
This extension allows color to identify matching parentheses. The user can define the characters to match and the colors to use.

Pairs of brackets (braces, parentheses) have the same color, which is particularly important when code is nested in multiple brackets.

ESLint

Downloads so far: 15m
This does not need to introduce it, code format validation, support custom configuration, error is red wavy line, warning is green

JavaScript (ES6) code snippets

Downloads so far: 2.9m
Javascript code snippet in ES6 syntax for vscode editor (supports both JavaScript and typescript).

I often use this function
Click CLG in JS, then enter = > console.log (object);
It is convenient and practical in debugging

One Dark Pro

Downloads so far: 7.8m
Editor color theme has always been my favorite style,

Material Icon Theme

Downloads so far: 4.8m
Very beautiful icon library, for the editor left tree menu file and folder icon display

Vetur

Downloads so far: 7.1m
Vue project must install plug-ins for Vue code highlighting and formatting

Bookmarks

Downloads so far: 1.3m

When the number of lines of code is very large, bookmarking the code is no longer afraid of getting lost. If you forget the shortcut key, you can right-click the mouse in the code

Easy to use

Project Manager

Downloads so far: 2.2m
If there are many local projects, you can use this plug-in to manage projects, switch projects quickly, and open only one project at a time. This is the best choice for multi project parallel development

There are so many plug-ins for vscode

Custom code snippet

In the command panel, enter configure user snippets

Select the code fragment you want to edit, and let’s take Vue as an example
choice vue.json Edit
Here is my configuration

"Print to console": {
        "prefix": "log1",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
    "Vue base Template": {
        "prefix": "vue",
        "body": [
            "<!--$0-->",
            "<template>",
            "<div>",
            "$1",
            "</div>",
            "</template>\n",
            "<script>",
            "export default {",
            "  components: {},",
            "  data() {",
            "    return {",
            "$2",
            "   };",
            "  },",
            "  created() {",
            "$3",
            "  },",
            "  methods: {",
            "$4",
            "}",
            "};",
            "</script>\n",
            "<style lang=\"scss\" scoped>",
            "</style>",
        ],
        "Description": "Vue basic template"
    }
}

All formats support customization. After saving, create a new Vue file, enter Vue in the editor, and then press enter

The template is divided into three parts

• Prefix: shortcut key name (in the Vue file, click Vue, and then press enter to directly display the custom template)
• Body: template content
• Description: template description information (for you to see, will not be displayed in the template)

Grammar:

1. In the body, use escape characters to write tab, double quotation marks, etc.; use ${num: default
2. Use ${num: default name} to define the input position, and press the tab key to advance the cursor to the next one;
3. The value of num is 0,1,2,3. 0 is the final position of the cursor, 1, 2, 3… Determine the order of the cursor position;
4. Default name is the default value. You can press tab to skip without editing.

The above templates are for Vue files. You can also configure templates for other files as needed, and support global file templates
Select new global snippets file
Create a new global template

{
    "Print to mounted": {
        "prefix": "mounted",
        "body": [
            "mounted(){",
            "this.$nextTick(()=>{",
            "$5",
            "})",
            "},",
        ],
        "Description": "mounted template"
    }
}

It’s convenient

Some suggestions on vscode

Vscode supports the command line, which can be used according to the dependency package, similar to NPM install
However, it is not recommended to start a project from the command line, similar to NPM start
Why? When you restart the editor, the service will also restart. You will say, why do I restart the editor?
I have encountered the following situations, the editor will overload

1. Editor is too laggy, code format is invalid.
2. The editor is too laggy, and the code is missing.
3. Editor inexplicably into English, although it does not affect the use, but look uncomfortable
4. Editor upgrade, auto restart
5. The plug-in is loaded or unloaded by pressing, and the plug-in is enabled or disabled. It needs to be reloaded

The above situations will restart the editor, resulting in the restart of command-line tools started in the editor. Therefore, it is not recommended to start the project service in the command line

Plug in installation should be careful, do not install too much, only install what you need, install too much, it will slow down the editor, pay attention to the download amount of plug-ins, plug-ins with the same function should not be installed repeatedly, there may be conflicts.

Or that sentence:There is no best weapon, only the best one.

(personal advice only)

There are so many experiences about vscode, I hope it can help you.

Original link