He that will do his work well must first sharpen his tools
What is Visual Studio Code
VSCode is a code editor developed by Microsoft that supports Windows, Linux, macOS and other operating systems. The name VSCode is used to refer to Visual Studio Code in the following sections
Why VSCode
It’s not because of poor (not) XDDD
As a front-end developer, I chose this one after using many ides, simply because it was free and open source, integrated with Terminal, Git, and had rich extensions with Emmet, Snippets, and IntelliSense built in. Supports user customization, such as changing the theme color, keyboard shortcuts and other attributes and parameters.
Compared to Vim, the barrier is much lower, and there is graphical support. If you are used to Vim shortcuts, there is also extension on VSCode that migrates Vim shortcuts, and you will have no problem using it.
Sublime updates faster than sublime, with about one or two updates a month, and Sublime is not open source.
This is probably an awkward existence now compared to Atom, Microsoft bought Github, Atom is made by Github, VSCode is made by Microsoft, so… VSCode may be slightly faster in terms of opening large files.
VSCode is lighter and free compared to WebStorm.
To put it simply: VSCode has what others have, and if not, it will replace it.
Download and Install
- Open Download, select the.zip option, and Download according to your system bits
This folder will be used to contain all VS Code data, including session state, preferences, extensions, etc. To enable it, double-click code.exe directly. Because it is portable version, lost the installation version of the right mouse button menu, you can refer to the right button open
- Installed version
Select System Installer to install
Select an installation location
Little bit of setup
Many people recommend that the first thing after the installation is to install a Chinese extension, I do not recommend doing so, originally English is not good, shouldn’t you think to improve? After all, when I write code and deal with English, I still need to read some English documents and so on sometimes. I think it is no harm to force myself. Even if I encounter words that I cannot understand, I can also solve them through translation. There’s also Settings Sync, which is an extension for synchronizing configuration. It’s very convenient to install, but there are a lot of extensions that we use once or twice after we install them and never use them again. It takes a lot of memory, and VSVCode gets slow. If we don’t install Settings Sync and start from scratch, we’ll be able to view the extensions, weed out the useless ones, and make VSCode run faster.
Theme Settings
I’m using Better Solarized
It is relatively soft and will not cause too much stimulation to the eyes
File icon
Material Icon Theme
The font
Dev Fonts, a font preview site, is recommended
I use Ubuntu Mono
It looks something like this
These Settings are determined by people, depending on their preferences, according to their favorite Settings. The Settings are written to the settings.json file. To Open it, use the shortcut keys Ctrl+Shift+P to enter Settings and select Open Settings.
Set the tabSize
It is said that there is an interview in a report that people who set tabSize to 2 generally earn higher salaries, so you should set it to get higher salaries.
Use the shortcut key Ctrl+ and type tabsize to see it
Set the Emmet
"emmet.triggerExpansionOnTab": true
With Emmet, when we type some code, there will be a prompt, but sometimes the code prompt will not be there, so we have to re-type it to make it appear, which is very inconvenient. After setting this, we can directly press Tab.
Information occlusion problem
Sometimes when the mouse moves over a label, some introductory information will pop up, blocking some code and making us confused to read. You can set delay display to solve the problem, and set it to a larger size
“Editor.hover. Delay “: 10000 set to display after 10 seconds
shortcuts
Ctrl+Shift+P or Fn+F1: Open the command panel.
Ctrl+N: Create a file
Ctrl+D: The selected content is interrupted by Spaces
Ctrl+F: Find content
Ctrl+Shit+F: Find contents in the entire folder
Multiline Code
Ctrl+D press D continuously
One way is to hold Alt+D and click the left mouse button. You can use the arrow keys to control the position.
One way is Ctrl+Shift+Alt+ up and down.
The last
It has been five years since the first preview release of VSCode. From its humble beginnings, it has grown and grown, thanks to the community and Microsoft’s investment in open source, and will continue to do so in the future.
Sweep yards attention
