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 Code
The project,Peacock
Plug-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 2
andVue 3
Code snippet
Vetur
VS Code
In theVue
Syntax 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-cli
With the speak
Prettier
Formatting plug-ins for latervue-cli
With 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.