VSCode Installation and Configuration Tutorial

preamble

Visual Studio Code is a lightweight and powerful source code editor with support for syntax highlighting, code auto-completion (aka IntelliSense), code refactoring, view definitions, and built-in command line tools and Git version control system. Available for Windows, macOS, and Linux, it has built-in support for JavaScript, TypeScript, and Node.js, and a rich ecosystem of extensions for other languages and runtimes (e.g., C++, C#, Java, Python, PHP, Go, .NET). In order not to interfere with the reader’s immersive reading and learning, if you need to use the catalog please just use it on the left side.

VSCode downloads

We’ve gotten a general idea of the power of VSCode through the introduction, so let’s get down to business.

---

Go to the official VSCode download page and select the corresponding download address according to your system requirements.

Official download page —>:Link to the official VSCode download pageIf you want to download the program, choose the download link that corresponds to your own system. Explanation of the green text for Windows downloads

copies	text interpretation
User Installer	The default installation is in the current computer account directory, so if you log in to your computer with another account, you will not be able to use someone else’s installation of vscode. vscode is provided by default with theUser Installer
System Installer	Installed in a non-user directory, such as the root of the C drive, it can be used by any account.

I did a lot of research on exactly which version to download and found that most of the tutorials on the web opted for the one provided by VSCode by defaultUser Installer version.But for our practical and real development, and our difficulty in managing system files IWe recommend the System Installer version, which allows you to customize the installation path, making it easy for us to manage it at a later stage.

VSCode Installation

Here I have chosenSystem Installer version, for no other reason, because it can be customized to install the path, so that we can later for its management is very convenient, I also very much recommend that you choose this version of the installation.

consent agreement

optionconsent agreementClickthe next step

Selection of mounting location

To select the installation location, clickskim overSelect the installation path location you want to set up as desired. Then clickthe next stepcan immediately (do sth) Caution:For later stability, do not use Chinese paths.

Select the Start Menu folder

If you need to modify, please click Browse to set up, without modification directly clickthe next stepcan immediately (do sth)

Select Additional Tasks

Select the additional tasks you need, here I recommend that all the other options in the check box, for the creation of desktop mode as needed to choose whether to check, I here because I do not need it, so I do not check it. When you are done with the settings finally click onthe next step Caution:Add to PATH must be checked, it’s important.

Preparing for installation

Confirm that your previous settings are correct, no error, then click themountingcan immediately (do sth)

Installation completed

If you see the following interface, then congratulations, your VSCode installation is complete.

VSCode Basic Configuration

Introduction to the VSCode interface

VS Code uses a common user interface and an explorer layout on the left side that shows all the files and folders you have access to, and an editor on the right side that displays the contents of your open files.

Regarding the regional interpretation of the interface above:

Block Color	Block name	role of blocks
red (color)	activity bar	Located on the far left, it lets you switch between views and gives you additional context-specific metrics, such as the number of changes passed out when Git is enabled.
greener	sidebar	Includes different views, such as Explorer, to help you as you work on your project.
powdered (with make-up)	status line	Information about open projects and files you have edited.
violet	kneading board	You can display different panels below the editor area for output or debugging information, errors and warnings, or integration terminals. Panels can also be moved to the right for more vertical space.
fig. reactionary	editorial district	The main area for editing files. You can open any number of editors vertically and horizontally side by side.
yellow (color)	menu bar	Perform VSCode operations

VSCode setup Chinese interface

Because we installed VSCode at this time or the English interface, for the English is not so good partners is not very friendly, so we need to install a plug-in to VSCode at this time for Chinese culture processing.

Activity bar brief introduction	corresponds English -ity, -ism, -ization
	Files opened by the editor
	global search
	Git Management
	Debug
	Plug-in Installation
	user login
	VSCode Settings

After a basic understanding of the VSCode interface, as above, we are in theActivity bar arealocatePlug-in InstallationThis option, click on it, in thesearch boxChina SearchChinese Just select the first one. SelectInstallPerform the installation.

After the installation is complete, the following prompt box will pop up in the lower right corner, click theRestartRestart VSCode to finish.

VSCode Personalization

We found it.set upSelectionColor Themes

The following box will pop up, at this point weChoose according to your preferenceThat’s it, and if you don’t think so, you can also choose to browse other color themes for preview options.

The rest of the personalization settings for the file icon themes and product icon themes are the same.

Common VSCode Settings

show (a ticket)activity barVSCodeset upWe’re in theCommon SettingsTo set font size, font, whether to save automatically and other commonly used settings, here you can select the settings as needed.

For the rest of the setup it’s the same thing.Select settings on demand。 For the common settings item, my personalThe suggestion is to change the off of the Files: AutoSave option to the onFocusChange option(automatically saves the editor with changes when it loses focus)

---

---

VSCode shortcuts

To make it easier for you to use the shortcuts, I’ve once again included a table to regularize the instructions.

General Shortcuts

(computer) shortcut key	clarification
Ctrl+Shift+P, F1	Show Command Palette
Ctrl+P	Quick open, go to file…
Ctrl+Shift+N	New window/example
Ctrl+Shift+W	Close window/example
Ctrl+	user settings
Ctrl+K Ctrl+S	Keyboard Shortcuts

Basic Editing Shortcuts

(computer) shortcut key	clarification
Ctrl+X	Cutline (empty selection).
Ctrl+C	Copy Row (empty selection).
Alt+↑/↓	Move rows up/down.
Shift+Alt+↓/↑	Copy rows up/down.
Ctrl+Shift+K	Delete the line.
Ctrl+Enter	Insert the line below.
Ctrl+Shift+Enter	Insert rows above.
Ctrl+Shift+\	Jumps to the matching brackets.
Ctrl+]/[	Indent/bump out lines.
Home/End	Go to the beginning/end of the line.
Ctrl+Home	Go to the beginning of the document.
Ctrl+End	Go to the end of the document.
Ctrl+↑/↓	Scrolls rows up/down.
Alt+PgUp/PgDn	Scroll up/down the page.
Ctrl+Shift+[	Folded (collapsed) area.
Ctrl+Shift+]	Expand (unfold) the area.
Ctrl+K Ctrl+[	Collapse (fold) all subregions.
Ctrl+K Ctrl+]	Expand (expand) all subregions.
Ctrl+K Ctrl+0	Collapse (fold) all areas.
Ctrl+K Ctrl+J	Expand (unfold) all areas.
Ctrl+K Ctrl+C	Add a line comment.
Ctrl+K Ctrl+U	Remove line comments.
Ctrl+/	Toggles line comments.
Shift+Alt+	Toggles block annotations.
Alt+Z	Toggle auto line feed

navigator

(computer) shortcut key	clarification
Ctrl+T	Displays all symbols.
Ctrl+G	Turn to the line ….
Ctrl+P	Go to file ….
Ctrl+Shift+O	Go to symbols…..
Ctrl+Shift+M	Displays the Problems panel.
F8	Go to the next error or warning.
Shift+F8	Go to the previous error or warning.
Ctrl+Shift+Tab	Navigation editor group history.
Alt+←/→	Backward/Forward
Ctrl+M	Toggle tabs to move focus

---

---

Plug-in Recommendations

Theme/Appearance beautification area

Material Icon Theme:

It’s styled in Google Material Design, with very comprehensive coverage of file icons and folder icons, and works better in dark mode. Material Theme:

It can be said to be in the same vein as the Material Icon Theme. The latest version of the Rainbow Brackets plugin for VSCode is built-in and does not require installation.Please use Rainbow Brackets if you need anything else:

Rainbow bracket extension for vscode. Highlight Matching Tag：

This extension highlights the matching start and/or end tags. It also displays the path to the tag in the status bar. Even though VSCode has some basic tag matching, it’s just that – basic. This extension will try to match tags anywhere: from tag attributes, inside strings, to any file, while also providing a wide range of styling options to customize how tags are highlighted.

---

Git Related Plugins

GitHub Pull Requests and Issues：

Allows you to inspect and manage GitHub pull requests and issues in Visual Studio Code. Git History：

View Git logs, commit file history, compare branches or commits GitLens — Git supercharged：

Git Under annotations and CodeLens allow you to display code authors in a straightforward manner, seamlessly navigate and explore Git repositories, gain valuable insights through rich visualizations and powerful comparison commands, and more! Git Graph：

View the repository’s Git Graph and easily perform Git operations from that graph

---

Markdown syntax plugin

Markdown All in One ：

 Markdown All in One It’s a popular Markdown plugin for VSCode that allows you to write on the left and preview instantly on the right. The image below shows you the commonly used shortcuts for your reference.

Key	Command
Ctrl + B	bold (typeface)
Ctrl + I	italic (font style)
Alt + S	strikethrough
Ctrl + Shift + ]	Title (uplevel)
Ctrl + Shift + [	Title (downlevel)
Ctrl + M	Switching Math Environments
Alt + C	Check/uncheck task list items

Markdown Preview Enhanced：

Markdown preview enhancements, auto-scroll synchronization, math typesetting, PlantUML, pandoc, PDF export, code blocks, presentation writer, and more. Markdown Preview Enhanced Common shortcuts:

(computer) shortcut key	clarification
cmd-k v or ctrl-k v	Open Preview to Side
cmd-shift-v or ctrl-shift-v	Open Preview
ctrl-shift-s	Sync Preview/Sync Source
shift-enter	Run Code Block
ctrl-shift-enter	Run all code blocks
cmd-= or cmd-shift-=	Preview Zoom
cmd– or cmd-shift-_	Preview Shrink
cmd-0	Preview Reset Zoom
Esc key	Toggle Sidebar Catalog

---

Learning\Touching Fish

LeetCode:

Solving LeetCode Problems in VS Code daily anime:

VSCode to catch up with the fish watching the drama must, the following shows the use of the command line to use this plug-in method

ctrl+shift+p	Open the Command Panel
command line inputanime	Open Tomodrama Page
command line inputhitokoto	A sentence can be randomly displayed

Ze:

A must for playing games at work! A must for the king of gropers! Beyond the Encourager:

Dream Beyond will encourage you in your boring editor.

---

Front-end plug-ins

Better Comments：

Helps to create more user-friendly comments in code, with this extension you can categorize your comments as:Alerts, Queries, To-Do’s, Highlights. The commented out code can also be styled to make it clear that the code shouldn’t be there, any other comment styles you want can be specified in the settings, and different comments can display different effects.  ESLint:

Integration of ESLint JavaScript into VS Code, a specification hinting plugin for front-ends.  vetur：

This plugin can be said to be a front-end must-have, vetur features: syntax highlighting, code snippets (emmet gives me the feeling of a well-written snippet), the quality of the tips & errors, formatting / styles, smart tips and so on. Vue VScode Snippets：

Abbreviations for building code snippets save development time JavaScript (ES6) code snippets

JavaScript code snippets in the ES6 syntax ES7+ React/Redux/React-Native snippets：

Extend React, React-Native and Redux in JS/TS with ES7+ syntax Image preview：

Display image preview in the slot and hover, whether the picture is correctly introduced to the display tool, press ctrl at the link, mouse hover can be used to determine whether to correctly find the picture under the path. Auto Rename Tag：

Automatic renaming of pairs of HTML/XML tags, same as Visual Studio IDE. HTML CSS Support：

CSS-awareness for HTML, support for linked and embedded stylesheets, support for template inheritance, support for other stylesheets, support for other languages like HTML, validation of CSS selectors as needed. Usage: View the list of id and class attribute suggestions via Ctrl + space. Thank you for watching this article carefully, if this article is helpful to you, please alsopointing and calling (e.g. camera)、favorite、commentaries, which has helped me a lot.