Some commonly used plug-ins and shortcut keys in VSCode can help you improve development efficiency! !

This article will introduce to you some commonly used plug-ins and shortcut keys in VSCode to help you greatly improve the efficiency of software development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

VS Code is an open source cross-platform development tool and is the most convenient editor I currently use. This article introduces some commonly used plug-ins and shortcut keys to help you greatly improve the efficiency of software development, giving you more time to play iron and pick up girls. [Recommended learning: "vscode tutorial"]

First introduction to VS Code

First put its official website:

https://code.visualstudio.com/

The full name of VSCode is Visual Studio Code. Judging from the name alone, some people may mistake VSCode and Visual Studio Code at first. Studio is confusing. They are both products of Microsoft's father's company. The latter has long been famous and has long been at the top of the list of programmers' favorite editors. In order to make the new son VSCode popular, they gave it a similar name, just like Javascript. For Java.

It is not an exaggeration to say that VSCode is a newborn. It has only been 4 years since its birth. Compared with the major editors with a long history, it is just a younger brother. But in the last one to two years, it has grown rapidly and its market share has begun to soar, far ahead of other editors. Sublime Text has declined rapidly, Atom has been tepid, and WebStorm has been experiencing low domestic usage due to charging issues. Not high, Vim is gradually withdrawing from the stage of history due to the high learning cost. If you happen to switch from another editor to VS Code, don’t worry. It provides the corresponding Keymap plug-in, which can migrate your keyboard settings and help you get started quickly without having to spend time getting used to the shortcut keys. .

And it provides good support for each language. It packages the Extensions needed for development into a collection. Basically, download the corresponding extensions during development. Extension Package can get good support.

Microsoft’s definition of VSCode is: free, open source, and cross-platform. Redefining the code editor. Coupled with Microsoft's acquisition of Github last year, these all show that Microsoft has made more and more attempts in open source.

#Open source is extremely important for the long-term development of a product. Among the four editors, Sublime is closed source, VS Code, Vim and Atom are all open source, and VS Code can be said to be the best open source.

VS Code is not just about making code open source. Instead, we base the entire product development process on open source, cooperate deeply with the entire community, and listen to user feedback on GitHub to make VS Code better and better:

Every year, the VS Code team will Publish a Roadmap on GitHub Wiki to list the plan for the entire year.

At the beginning of each month, during the product design stage, the VS Code team will publish an Iteration Plan on GitHub Issue, listing every function that will be done this month. Each function will basically correspond to a GitHub Issue. You You can see detailed designs and mockups, and put forward your own opinions.

At the end of each month, when the product is released, you can see Endgame on GitHub and learn how VS Code conducts product testing and release.

Not only is the code open source, the entire product planning, design and release management of VS Code are "open source": every stage is open and transparent to every user. Not only can you open an issue and send a PR, you can You can even participate in the design and discussion of each function!

There has always been a controversy about VSCode in the industry - is it an IDE? For Visual Studio, Microsoft directly defines it as the best IDE of its kind, while for VSCode, Microsoft currently only defines it as a Code Editor.

Visual Studio Code is a lightweight but powerful source code editor

In order to solve this problem, we must first understand a concept, what is an IDE? Its full name is Integrated development environment, which literally means integrated development environment. That is to say, some of the main activities and tools used in the development process are integrated into a development environment, so that we can write code in one program. , debugging code, running command line, version control and other development processes.

Currently VSCode has strong API support and can basically implement IDE. We use it to write code, use the built-in Terminal to quickly run the command line, download the Debug plug-in, set breakpoints, and easily debug the code. Use built-in Git for version control and easily manage source code. Regardless of the language, you can download the corresponding plug-in collection, package and install it in one go, and the entire development process can be completed in this one tool. It truly redefines the code editor. In Stack Overflow's 2018 developer survey , VS Code has become the most popular development tool.

Basic plug-ins

This section introduces some must-install development plug-ins to help you greatly improve the efficiency of code editing.

VS Code has a rich and rapidly growing plug-in ecosystem. Today, there are more than 10,000 plug-ins. Not only is there a centralized plug-in market, but you can also easily search for plug-ins in the VS Code editor and install and manage them directly. In comparison, Sublime has less than 5,000 plug-ins, and it is not easy to search and manage plug-ins in the editor; although Vim has many plug-ins, it is troublesome to find plug-ins because there is no centralized plug-in market; Atom has more than 8,000 plug-ins. There are fewer plug-ins than VS Code. Although plug-ins can also be found in the editor, VS Code's search and browsing functions are better than Atom.

Chinese(Simplified) Language Pack for Visual Stidio Code Chinese Chinese Pack

For some friends who are not very good at English, the first thing to do is to switch Into the Chinese language environment, after installing the Chinese package plug-in, press the shortcut key Ctrl Shift P to bring up the command panel, enter Configure Display Language, select zh-ch, and then restart vs code.

open-in-browser View in the browser

VS Code does not provide a built-in way to run the program directly in the browser function, so we need to install this plug-in to view the running effect of our program in the browser.

Live Server real-time preview

After installing this plug-in, we modify the code in the editor, press Ctrl S to save and modify The effect will be synchronized in real time and displayed in the browser, no need to refresh manually.

Auto Close Tag Automatically close the tag

When you enter the tag name, a closed tag is automatically generated, which is particularly convenient.

Auto Rename Tag The tail closed tag is modified synchronously

Automatically detect paired tags and synchronize Revise.

Bracket Pair Colorizer Highlights matching bracket

pairs with different colors The brackets are colored to facilitate distinction. Before the plug-in is installed, the brackets are uniformly white.

Highlight Matching Tag Highlight matching tags

This plug-in automatically helps us Selected matching tags are highlighted, so you don't have to search hard anymore.

Vscode-icons VSCode file icon

This plug-in can help us generate corresponding icons according to different file types, so that we When viewing the file list in the sidebar, you can distinguish file types directly through the icons.

Friends who use mac can choose to download Vscode-icons-mac. The basic icons are similar to Vscode-icons, but the folder adopts mac style.

TODO Highlight

If we want to make a mark somewhere when writing code, and then improve or modify the content later, we can use this plug-in to highlight , which can then help us quickly locate the line of code that needs to be modified.

Code Spell Checker Word spell checker

We often do this when writing code Accidental spelling errors caused the software to fail to run. After installing this plug-in, it will automatically help us identify spelling errors and give modification suggestions, which greatly reduces the pressure for us to eliminate bugs.

##Code Runner runs the selected code segment

If you need to learn or be exposed to various Various development languages, then the Code Runner plug-in allows you to run the code of the corresponding language directly through this plug-in without setting up a development environment for various languages. It is very suitable for learning or testing various development languages. You can directly right-click to select the usage method. Run Code supports a large number of languages, including Node.

Improt Cost Cost Tip

This plug-in can prompt you for the volume of the tool package when you import it. If the volume is too large You need to consider compressing the package to prepare for later online optimization.

GitLens View Git information

Move the cursor to the line of code. Displays the latest commit information and author of the current line, which is very useful when multiple people are developing. Responsibility is assigned to each person to prevent blame shifting.

##Bookmarks Bookmarks

Bookmark the code and jump quickly through shortcut keys Go to bookmark location.

Specific shortcut keys can be customized in the keyboard shortcuts:

Extension plug-in

This part mainly introduces some plug-ins for specific development environments

Vscode-element-helper

You can install it using the element-ui library This plug-in automatically prompts for the element tag name when writing tags.

Version Lens Tool package version information

Display in package.json that you downloaded The version information of the installed npm tool package will also tell you the latest version of the current package.

Vetur VUE language pack

VUE is one of the most popular js frameworks nowadays , many companies will choose to build products based on VUE, and Vetur provides good language support for VUE.

The code was white when writing a file with the suffix .vue before installing the plug-in

Installation After plugging in, write the vue file and enter s, and press the Tab key to automatically complete the template.

WakaTime Calculate Code Workload

This is a time recording tool that can help you record effective programming time in vs code.

And display the data in the form of a line chart to show you the work trend within a week. When I used to write projects, I could program for nearly 12 hours a day at most. Your The dedication and effort wakatime all know.

At the same time, on his official website, it will also display the proportion of time you spend writing each language in the form of a fan chart, as well as the time you spend on each project. Proportion is a very good data report. At the end of the project, you can clearly see how your time is allocated in its Dashboard.

Settings Sync VSCode settings are synchronized to Gist

Sometimes we arrive at a new company or change a new computer and need to configure new development Environment, at this time, it is very troublesome to download plug-ins one by one and then reconfigure vs code, and you may not remember it so comprehensively. Through this plug-in, we can upload the current configuration in vs code to Gist, and then download it through Gist. Synchronized all configurations to the new environment.

Click the avatar on the Github homepage and select Settings to enter the settings page.

Click Developer settings on the left sidebar to enter the developer settings.

Select Personal access tokens and click Generate new token on the right.

Fill in the token name and check gist below.

Click the Generate token button below to generate a new token.

Save the generated new token.

Install the Settings Sync plug-in in vscode, enter Ctrl Shift p and enter Sync, and select Update/Upload configuration.

Enter the token generated in github and click Enter.

Automatically generate a string of ids in the console, and then you can synchronize the configuration through the token and id.

Enter Ctrl Shift p and enter Sync, select download configuration, enter token and id to download synchronously.

The vs code configuration introduced in this article has all been synchronized to Gist. Friends who need it can download it.

token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6

Id:338d5dfb6b7784c980250cffe8365899

You can choose whether to automatically upload and download in the configuration file

"sync.removeExtensions": true,
      "sync.syncExtensions": true,
      "sync.autoDownload": true,
      "sync.autoUpload": true,
      "sync.gist": "338d5dfb6b7784c980250cffe8365899"

Color theme

As a programmer, most of the time every day We are sitting in front of the computer typing code, and need to deal with the editor for a long time. Choosing a good-looking color theme for our vscode can greatly enhance the pleasure in the process of writing code. In order to protect the eyes, here is a dark color recommended The theme installation package contains the following skins.

My personal favorites are the following two dark themes. I generally don’t change themes back and forth once I’m used to them. , so just choose one that is comfortable for you to use.

Dracula Official vampire theme (the one I am currently using)

One Dark Pro

常用快捷键

编辑器与窗口管理

Ctrl+Shift+P: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

切分窗口：Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+H：最小化窗口

Ctrl+B：显示/隐藏侧边栏

Ctrl+"+/-"：放大/缩小界面

文件操作

Ctrl+N：新建文件

Ctrl+W：关闭文件

Ctrl+Tab：文件切换

格式调整

Ctrl+C/Ctrl+V：复制或剪切当前行/当前选中内容

Alt+Up/Down：向上/下移动一行

Shift+Alt+Up//Down：向上/下复制一行

Ctrl+Delete：删除当前行

Shift+Alt+Left/Right：从光标开始向左/右选择内容

代码编辑

Ctrl+D：选中下一个相同内容

Ctrl+Shift+L：选中所有相同内容

Ctrl+F：查找内容

Ctrl+Shit+F：在整个文件夹中查找内容

常用设置

我们可以在settings.json中手动进行一些设置，让我们的编辑器更好用。

关闭标签介绍信息

我们在编写代码的时候鼠标移动到某个标签上，经常会自动弹出一些介绍信息，挡住部分代码，给我们的阅读带来了很大的困难，一直没有找到关闭它的方法，目前可以通过设置时间延迟暂时实现这个效果，我设置的5000毫秒，你可以设置的更大一些，基本上它就不会弹出来了。

"editor.hover.delay": 5000

自动折行

设置代码根据编辑器窗口大小自动折行

"editor.wordWrap": "on"

字体设置

      // 一款适合代码显示的字体包（需要将字体包下载到本地）
      "editor.fontFamily": "Source Code Pro, 'Source Code Pro'",
      // 设置代码字体大小
      "editor.fontSize": 15,

自动保存

目前有四个选项：

• off：关闭自动保存。
• afterDelay：当文件修改后的时间超过"Files：Auto Save Delay"中配置的值时自动进行保存。
• onFocusChange：编辑器失去焦点时自动保存更新后的文件。
• onWindowChange：窗口失去焦点时自动保存更新后的文件。

"files.autoSave": "off"

关闭代码提示

"editor.quickSuggestions": { "other": false, "comments": false, "strings": false }

更多编程相关知识，请访问：编程教学！！

The above is the detailed content of Some commonly used plug-ins and shortcut keys in VSCode can help you improve development efficiency! !. For more information, please follow other related articles on the PHP Chinese website!