Software engineers probably deal with editors most of the time every day. In the past few years, I have worked with EditPlus, UltraEdit, Visual Studio, EClipse, WebStorm, Vim, SublimeText, Atom, VSCode, VSCode and Vim are still commonly used today. I actually installed the Vim plugin in VSCode and coded it with Vim’s keypress mode, because I tried to avoid touching the mouse as much as possible since I realized the productivity benefits of keeping my hands on the keyboard.

Having struggled with Atom, I had Vim’s lightweight feel when I tried VSCode for the first time. I’ve used SublimeText before Atom, but it annoys me when it pops up buy licenses every now and then when saving files.

Every time I pick up a new editor, it usually takes me a few weeks to tune it up to its ideal state based on my development habits and get familiar with the features of the editor. Next, I will discuss how to configure VSCode to improve happiness at work from four aspects: appearance configuration, style checking, coding efficiency, and feature enhancement.

Appearance of the configuration

Appearance is the first consideration, from the perspective of configuration, nothing more than color, icon, font, etc. As the saying goes, radish and Cabbage have their own preferences, my current color, icon, font can be seen from the following figure, for your reference:

  • Color scheme: Solarized Dark, built-in with VSCode, theme used for at least 5 years, same configuration under Vim;
  • Icons: VSCode Great Icons, which assign different Icons for different types of files, is very intuitive;
  • Font: Fira Code, ever since I discovered and started using Fira Code, I have never looked at another font again. If the font is elegant, especially the handling of mathematical operators, when writing Code, you really feel like writing poetry. Ha ha, Fira Code installation process is a bit more complicated, but the effect is definitely worth it;

    • Color matching, ICONS, fonts, and other appearance configuration items are as follows (note that some configuration items are invalid if you do not install the above plug-in) :

    {
  "editor.cursorStyle": "block",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 24,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.renderIndentGuides": false,
  "editor.rulers": [120],
  "workbench.colorTheme": "Solarized Dark",
  "workbench.iconTheme": "vscode-great-icons"
}Copy the code

    Style to check

    I previously wrote about securing code style during Git commit stages: “Super-smooth Code Review Workflows Using Husky and Lint-Staged”. It is most effective for the individual developer if the editor gives feedback in real time while coding, and mandatory checks at submission only ensure that the coding style is standardized and consistent from the team’s perspective. Front-end engineers write HTML, CSS, Javascript, Markdown, TypeScript, JSON, and the Lint tool is obvious:

    • ESLint: Plugin architecture, with a variety of major coding style rule sets to choose from, such as Airbnb, Google, etc. You can even create your own, press no list;
    • StyleLint, also a style checking tool for a plug-in architecture, takes a bit of work configuring it to check the style of the React-Native styled- Components component, so I can write a separate article;
    • TSLint: TypeScript is not my primary programming language at the moment, but it is already there;
    • MarkdownLint: If Markdown is illegal, it may cause parser exceptions in some cases because Markdown has several sets of standards and some syntax support may be incompatible between standards;

    In addition to the Lint tools listed above, the EditorConfig plugin is also worth having. It is supported by almost all major IDES. You can use a simple configuration file to specify the indentation and encoding format of files for different team members, different ides, and different platforms to avoid confusion. Here are my common configurations:

    [*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2

[{*.yml,*.json}]
indent_style = space
indent_size = 2Copy the code

    With style check, there will naturally be a need to do file formatting according to the configured style rules. We have tried a lot of formatting tools and are still using them as follows:

    • Prettier, the de facto standard for code formatting tools, formats almost all front-end code and, similar to EditorConfig, files for formatting rules.
    • Vetur, format. Vue files, including the CSS, JS, as for the template that is HTML part, the official maintainer said there is no better tool support, the default is not formatted;

    Coding efficiency

    In terms of coding efficiency, after coding almost every day for six consecutive years, my biggest feeling is that the speed of keystroke is increasingly unable to keep up with the speed of thinking. In this case, it is necessary to set appropriate shortcut keys during coding and combine intelligent suggestions, code fragments and automatic completion to maximize the speed.

    VSCode’s built-in smart suggestions are already pretty powerful, but I made the following changes to the default configuration to enable smart suggestions everywhere (especially in comments and strings) similar to Vim:

    {
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
}Copy the code

    Next, I’ll focus on snippets and auto-completion as two efficient tools.

    Code snippet

    English is called Snippets, editor of mainstream support on market, its basic idea is pulled out common code pattern, can expand by 2 ~ 3 key N lines of code, code fragment accumulation on the one hand, is based on personal habits, on the other hand is a learning community in accumulation of good coding mode, if it doesn’t fit you, You can change it (find an existing plug-in and copy it). The code snippets I use are as follows:

    • HTML Snippets, all kinds of HTML tag Snippets, if you’re familiar with Emmet, you can totally ignore this;
    • Javascript (ES6) Code Snippets, common class declaration, ES module declaration, CMD module import, support more than 20 abbreviations;
    • Javascript Patterns Snippets, common coding Patterns like IIFE;

    Automatic completion

    Autocompletion is essentially similar to code snippets, but it uses your typing as heuristic information to provide suggestions for the most likely input in special occasions. The autocompletion tools I use are as follows:

    • Auto Close Tag, for JSX, Vue, HTML, open tabs and type</Can automatically complete the label to be closed;
    • Auto Rename Tag works with JSX, Vue, and HTML. If you Rename a Tag, you can Rename the start Tag as well as the end Tag.
    • Path Intellisense, file Path completion, provides intelligent hints and auto-complete when you import paths in the file system in any way;
    • NPM Intellisense, NPM dependency completion, provides Intellisense and auto-complete when you import any dependencies in node_modules;
    • IntelliSense for CSS Class Names automatically scans CSS class names throughout the project and prompts you when you enter a class name.
    • Emmet, formerly known as Zen Coding, is also very Coding. It can expand csS-like selector strings into HTML tags. VSCode has been built in, see the official introduction document.

    Of course, if you’re writing code in VSCode for other languages, such as PHP, just search the marketplace for “PHP Intellisense.”

    enhancements

    In terms of efficiency improvement, in addition to the above code fragments and automatic completion, I also installed the following plug-ins, which are convenient to browse and understand the code quickly and switch between different projects.

    • Color Highlight, identifies colors in code, including various Color formats;
    • Bracket Pair Colorizer identifies Bracket pairs in code and marks them with different colors so that you can see the matching Bracket easily. When there are too many brackets, you can reduce eye pressure. Editor shortcuts are good, but when there are too many nested brackets, they are not enough.
    • Project Manager, Project management, makes it easy to switch Project folders in the command panel. Of course, you can also directly open the parent folder containing multiple projects, but this can make VSCode slow down;

    conclusion

    Having said all that, I’m sure you’re reading this and want to use tools to increase your productivity.

    Is there a way to improve efficiency? Yes, simple things are repeated, repeated things are standardized, standard things are automated, find a pain point, use plug-ins to solve a pain point, your efficiency will come up naturally.