A complete collection of convenient and practical skills for VSCode

Visual Studio Code (VSCode) is a powerful open source code editor, free and open source. With its rich scalability, good performance and simple interface, VSCode has become one of the preferred editors for front-end development, back-end development and even full-stack development. Many people have some tips when using VS Code. In fact, mastering these skills can greatly improve our work efficiency. This article will share some commonly used VSCode tips to help you improve your development efficiency and programming experience.

1. Quick navigation and file search

1.1 Quickly open the file (Ctrl + P）

In large projects, there are many files, and finding a file can take a lot of time. VSCode providesCtrl + P(Windows) orCmd + P(Mac) shortcut keys can quickly open files. Just enter some characters of the file name and VSCode will list all matching files.

# After pressing Ctrl + P, enter part of the file name# For example，enter "app" Come and open quickly  document

In addition, useCtrl + P, you can also enter a function or variable name in the file to quickly jump to that location.

1.2 Quickly jump to symbol (Ctrl + Shift + O）

When there are many functions or classes in your code, jumping to a specific symbol can be troublesome. useCtrl + Shift + O, you can quickly list all the functions, classes, variables and other symbols in the current file and jump directly to where you need it.

# After pressing Ctrl + Shift + O, enter the function name or symbol name# For example，enter "handleClick" To quickly locate the function

1.3 File content search (Ctrl + F）

VSCode's built-in search is very convenient to find a specific content in a file. PressCtrl + FOpen the search box and enter the keyword you want to find, and VSCode will highlight all matching content.

# After pressing Ctrl + F, enter the keywords you searched for# More advanced searches can be performed using regular expressions

2. Shortcut keys to improve coding efficiency

2.1 Automatic completion and smart prompts

VSCode provides powerful code automatic completion and smart prompt functions. When writing code, VSCode will automatically prompt methods, attributes and other contents when entering, greatly improving coding efficiency.

For example, in JavaScript or TypeScript, enter the object name and press., VSCode lists all available properties and methods of the object:

const person = {
  name: 'John',
  age: 30,
};

person. // VSCode It will prompt all attributes，like name、age wait

2.2 Quick Repair (Ctrl + .）

When your code errors, VSCode will give an error message. You can useCtrl + .(Windows) orCmd + .(Mac) Quickly view and apply the recommended fixes. For example, if you miss an imported module, VSCode will prompt you to automatically complete or import the missing module.

import { useState } from 'react'; // If you forget to import，Press Ctrl + . Automatic import suggestions will be given

2.3 Multi-cursor editing (Alt + Click）

Using a single cursor appears inefficient when editing multiple positions. VSCode provides multi-cursor editing function, press and holdAltKey (Windows) orOptionClick on multiple locations to edit content in multiple places at the same time.

// Press and hold Alt and click on different positions to edit multiple variable names at the same timeconst name = 'John';
const age = 30;
const job = 'developer';

2.4 Code collapse (Ctrl + Shift + [）

When the file is large and there are many functions or classes, the readability of the code will be affected. VSCode supports code folding, which can help you fold up the parts you don't need to view and focus on the parts you are currently editing.

# Use Ctrl + Shift + [ to collapse code blocks# use Ctrl + Shift + ] Expand the code block

3. Use integrated terminal

VSCode has built-in powerful integrated terminal functions, allowing you to open the terminal directly in the editor and execute commands. You can use `Ctrl + `` to open or close the terminal.

3.1 Switch terminal (Ctrl + Shift + ）

If you have multiple terminal windows open,Ctrl + Shift + (Windows) orCmd + Shift + (Mac) can quickly switch to the next terminal window.

3.2 Run code in terminal

You can run project-related commands directly in the integrated terminal. For example, for a project, you can enter it directly in the terminalnode to run the code, or usenpm startStart the development server.

# Enter a command in the terminal to start the applicationnpm start

4. Code snippets and custom shortcut keys

4.1 Using code snippets

VSCode allows you to create shortcuts for common code snippets to improve development efficiency. You can create custom code snippets, or use community-provided code snippet extensions.

For example, you can create a JavaScript function template:

"Print Function": {
  "prefix": "func",
  "body": [
    "function ${1:funcName}(${2:params}) {",
    "  ('${3:message}:', ${2});",
    "}"
  ],
  "description": "A simple function template"
}

By enteringfunc, VSCode will automatically completefunction funcName(params) { (message, params); }and jump to each editable field.

4.2 Use custom shortcut keys

If you use certain commands frequently, you can set custom shortcuts for them. OpenFile -> Preferences -> Keyboard Shortcuts, find the command you need to set the shortcut keys, click the pencil icon on the right, and enter the shortcut keys you want.

For example, you can set it for "Switch Terminal"Ctrl + TShortcut keys, or set for "Format Document"Ctrl + Shift + F。

V. Debugging function

VSCode's debugging function is very powerful and supports debugging of multiple languages ​​such as JavaScript, TypeScript, Python, and Java.

5.1 Setting the breakpoint

Next to the line number of a line in the code, you can set a breakpoint. The debugger will stop executing on that line, making it easier for you to view the current variables and execution stack.

5.2 Debugging configuration

By clicking the "Run" icon in the activity bar on the left, you can configure and start a debugging session. VSCode supports a variety of debugging configurations, including browser debugging, debugging, etc.

// .vscode/ Configuration Example{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/"
    }
  ]
}

6. Easy to use vscode plug-in

After the vscode installation is completed, you can install some plug-ins to make your development go smoother according to specific needs.

Auto Rename Tagmmet

Automatically rename paired HTML tags, modify the start tag, and modify the end tags synchronously.

ESLint

Syntax checking and formatting for JavaScript/TypeScript code.

Live Server

A plug-in for real-time preview and automatic refresh for HTML, CSS, and JavaScript, and preview static web pages in real-time in the browser.

image preview

When you preview the function of the picture in the preview code, you will see a small window displaying the picture when you move the mouse up.

Code Spell Checker

Check whether the spelling of words in the code is correct. When the words are abnormal, a wavy line will appear below to prompt. You can also customize the dictionary and ignore the check of a certain word.

Will know

Open the source code to automatically analyze all contained English words and display the explanation results. Learn the words first and then read the code.

7. Commonly used shortcut keys for vscode

Whether you are proficient in vscode, the first thing is to see if you know how to use shortcut keys. The following table lists some commonly used shortcut keys!

The above mentioned are some more important shortcut keys. In addition to the above shortcut keys, you can also customize shortcut keys in vscode.

Search for keyboard shortcuts in settings to view and modify all shortcut key tables.
 

8. Summary

With these practical VSCode tips, you can significantly improve development efficiency and reduce unnecessary repetitions, thus focusing on business logic development. Whether it is file navigation, code editing, debugging or terminal operation, VSCode can provide a wealth of functions to help you quickly build high-quality applications. Mastering these skills will not only make you more familiar with the powerful features of VSCode, but also allow you to achieve twice the result with half the effort in daily development.