Introduction to the

This will be a new series, will be based on Visual Studio Code (hereafter referred to as VSCode) operation, environment configuration, plug-in introduction, for everyone to introduce some of the operation skills of VSCode, so it is called VSCode chicken soup. This article will cover the basics of VSCode installation, as well as the basic editing functions in VSCode

VSCode installation

Since VSCode is chicken soup, so VSCode is essential, otherwise it is boiled onion and ginger (´▽ ‘), you can find the corresponding system of VSCode download or install on the official website

Windows and macOS

It’s easy for Windows and macOS users to install by downloading the official installer or DMG file

Linux

Linux has always been a tortuous endorsement, so Linux installation will be more troublesome, but for the mainstream Linux distribution of VSCode official have provided the corresponding software source, as long as the version is not too partial should be easy to install, here are some distributions of installation methods

Most of the content below comes from the official documentation Visual Studio Code on Linux

Debian and Ubuntu

The fastest and easiest way to install the software in Debian and Ubuntu is to download the installation package. Deb Package (64-bit) and install the software directly on the GUI or command line. You can then manually add software sources to install it

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/ sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode  stable main" > /etc/apt/sources.list.d/vscode.list'Copy the code

You can use apt-get install Code to install the INSIDER version or apt-get install code-Insiders.

sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install code # or code-insiders
Copy the code

RH: RHEL, CentOS, and Fedora

Install the software repository first

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.c om/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'Copy the code

Later versions of Fedora 22 or later can be installed directly through DNF

dnf check-update
sudo dnf install code
Copy the code

If it is other (Fedora < 22, CentOS, RHEL) then use yum to install it

yum check-update
sudo yum install code
Copy the code

The RH system can also be installed by downloading the RPM package. However, software parameters cannot be automatically updated after installation. Therefore, this installation is not recommended

Packages are

Install the software repository first

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ntype=rpm-md\ngpgcheck=1\ngpgkey=https://package s.microsoft.com/keys/microsoft.asc" > /etc/zypp/repos.d/vscode.repo'Copy the code

Install using Zypper

sudo zypper refresh
sudo zypper install code
Copy the code

ArchLinux

ArchLInux has a community-maintained AUR package that can be installed directly

Begin to use

Once installed, most systems will create a launcher or shortcut for the application, which is usually just a click away. When you open the application, you will see the main screen of VSCode

Here’s what you need to know to use VSCode

Activity Bar

On the left is VSCode’s Activity Bar, which starts from top to bottom with “Explorer”, “Search”, “Source Control”, “Debug”, The five “Extensions” features, which are also the foundation of VSCode, may add new buttons to the Activity Bar after installing other plug-ins

The project structure of VSCode

When you open the Explorer screen without opening any projects, you will see the currently open file and will be prompted that you have not opened the directory yet

In VSCode, opening a directory is basically a project. After opening a directory, you can add, delete, or modify files in the Explorer interface. You can also use the quick open function to open files in the current open directory

If you need to open multiple directories at a time, right-click in the blank area of the Explorer and choose Add Folder to Workspace to Add a new directory

The Explorer will now display all projects under Workspace

The search function will search all the directories in the Workspace and show which directory the files belong to

. Vscode directory

When a project is opened, if there are specific Settings or debug Settings for the current project or workspace, VSCode creates a.vscode directory under the project directory to store VSCode’s specific Settings for the project or workspace

⌘ -, (Ctrl -,) to open the Settings screen, where Workspace Setting is set to the current Workspace

If you have multiple directories in your open workspace, you can also set it individually for each directory

terminal

⌘ – ‘(Ctrl -‘) to quickly open a terminal to the current working path, use the add button to open a new terminal, use the trash can button to close the current terminal, click the terminal to select the pull-down to select the current terminal, click the fork to hide the bottom area and will not close

Other common tips

  • Recent projects: On the launch page, this is available if the project has been opened beforeCtrl - rSelect the recently opened project (folder or workspace)

  • Quick open: use⌘ -pYou can open the quick open interface, you can quickly search all files under the current workspace by name, enter in the quick open search box>You can go to the Command Palette and enter@To search for the current file symbol, type#You can search for entire project tags by name, these are commonly used, type?You can see all the functionality

  • For VIM users: It is strongly recommended to use the VIM plugin and turn on EasyMotion

  • Change the file Icon Theme: The Material Icon Theme looks good, but you can change it occasionally

  • Change color themes: VSCode has a lot of color themes, change them over time for a different mood and mood

conclusion

This is my first bowl VSCode bring little chicken soup, content may not be very high, major is given priority to with simple installation and configuration, and use, the subsequent will catch up with some skill or to use environmental structures, such as the theme, hope this article can bring some help to you move brick life, write the place with bad you don’t mean the throw brick to throw brick

Modern text editors such as VSCode can gradually approach IDE in some aspects with the combination of plug-ins. I have been fully using VSCode for about two years, and now I have gradually alienated my favorite VIM in project development. After all, with the combination of VIM plug-in, I have become very close to VIM. And there are a lot of tools out of the box, and the principle that I’ve always followed is to use the right hand weighing tool, not to show off what you have to use

Finally, please subscribe to my wechat official account Little Code

  • The public number mainly hair some development related technical articles
  • Talk about your understanding and experience of technology
  • Maybe they’ll talk about life lessons
  • I am not very productive, but strive for quality and originality