The installation of the Node environment and the installation and configuration of some basic NPM packages is the basic infrastructure. In this article I’m going to introduce the configuration of the Code editor VS Code and some commonly used plug-ins, which are the basic tools. I have to say, from notepad++ to sublime text and now vs code main +sublime text auxiliary, vs code for front-end project development and sublime text for single document browsing and editing (due to its large document handling capabilities). If you’re stuck between several editors, try this one.

The installation

Installation is not much, directly download the installation package installation on the line.

configuration

Next talk about my current simple configuration, enough, with comfortable on the line.

{
  // Theme
  "workbench.colorTheme": "Dracula"."workbench.iconTheme": "material-icon-theme".// Typography
  "editor.fontFamily": "'FiraCode Nerd Font'"."editor.formatOnSave": true."editor.formatOnPaste": true."editor.lineHeight": 24."editor.cursorStyle": "underline".// Formatter
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  // Git
  "git.autofetch": true
}
Copy the code

The theme

Personally, I prefer dark themes. Dracula is the one I use now

Another favorite dark theme is the Gruvbox Material

For lighter themes I usually use VS Code’s built-in Solarized Light beige theme

Or Gruvbox Material Light for occasional relief from visual fatigue

Icon theme

I’m used to this flat material-icon-theme

The font

Fira Code font itself is a has been recommended font, such as wide, increase readability, the concrete may have a look of Fira Code | born to write programs font introduction to this blog. Fira Code Nerd Font is the addition of some Font icon support, like when I introduced the Oh-my-Posh theme in [Environment Configuration]Windows Terminal beautification, some specific themes were displayed as ICONS in the shell. This requires a Nerd Fonts that support font ICONS. Download Fira Code Nerd Font here

other

VS Code already carries simple formatting functionality natively, which is enough without installing any plug-ins. But it seems to me that some engineering projects and team work still install formatting plug-ins (like Prettier) for easy management and consistency. And I’m in the habit of setting up some plug-in configurations at the Project/Workspace level to keep the user level clean. There is also the ability to adjust the height, cursor style, etc., how comfortable

Common plug-in

Plug-in is not much, enough to go, I am introduced below at present with a few practical also.

Auto Close Tag

Automatic completion of HTML/XML end tags Auto Rename Tag

Synchronously rename start/end tags Bracket Pair Colorizer 2

Enhanced readability of multiple layers of nested parentheses

Indent-Rainbow

Improved readability of indent alignment

Before



After



Peacock

Sometimes you have to open more than oneVS CodeThe project,PeacockPlug-ins can reduce the cost of switching back and forth by changing the color of the form, making it easier to distinguish items by visual differences



Dracula Official

That was introduced at the beginning

Material Icon Theme

That was introduced at the beginning

Live Server

Start a local web server to browse web pages and provide automatic refreshes.

Vue VSCode Snippets

Vue 2andVue 3Code snippet

Vetur

VS CodeIn theVueSyntax enhancement in a single file, for example<template></template>HTML syntax highlighting in the template,<script></script>JavaScript highlight in,<style></style>Highlight the CSS styles in.

EditorConfig

Formatting is related to helping the editor define the encoding format, which will be covered latervue-cliWith the speak

Prettier

Formatting plug-ins for latervue-cliWith the speak

There are a variety of other useful and interesting plug-ins can leave a comment recommendation.

Common Shortcut keys

Remembering some of the most common keyboard shortcuts is really efficient for development, and switching between keyboard and mouse costs as little as possible. Move line: Alt + Up/Down Copy and copy the current line: Shift + Alt + Up/Down Newline (insert line) : Ctrl + Enter Delete Line: Ctrl + X Single line comment: Ctrl + / Multiple line comment: Shift + Alt + A Multiple selection: Ctrl + Alt + Up/Down or Alt + left mouse button to select content: Shift + left/right to select content from current position to the End of the line: Shitf + End To select content from current position to the beginning of the line: Shitf + Home select the content from the current position to the End of the text: Ctrl + Shift + End Select the content from the current position to the beginning of the text: Ctrl + Shift + Home Select all matching content: Ctrl + Shift + L Sidebar: Ctrl + B Console window: Ctrl + ~ Command panel: Ctrl + P

conclusion

This article introduces the simple personalized configuration of VS Code. You still need to explore more personalized configuration according to your own needs. The most important thing is to use comfortable and efficient.