10 tips you may not yet know about VS Code

• Author: Taboo
• Source: Taobao front-end team

Often help some students One-on-One solve problems, in watching some students use VS Code, some lame, in fact, some useful skills can improve our daily work efficiency.

First, refactor the code

VS Code provides some quick refactoring of code, such as:

Extract a whole piece of code as a function: Select the source code fragment to extract, and then click the light bulb in the make-up slot to see which refactoring operations are available. C ode snippets can be extracted into a new method or within different scopes (current closure, within the current function, in the current class, within the current file). During the extraction refactoring, VS Code boots the function to be named.

Extract an expression to a constant: Create a new constant for the currently selected expression.

Move to a new file: Move the specified function to a new file, VS Code automatically names and creates the file, and introduces a new file within the current file.

Convert the export method: export const name or export default

Merge parameters: Combine multiple parameters of a function into a single object argument:

Reference: Refactoring operations, JS/TS refactoring operations

Second, customize the view layout

VS Code's layout system is flexible enough to move views from the activity bar and panel on the workbench.

Reference: Rearrange the view

Third, quickly debug the code

Debugging JS/TS code within VS Code is as simple as using the Debug: Open Link command. This is useful when debugging front-end or Node projects, which typically start a local service by simply filling in the local service address into the Debug: Open Link input box.

Reference: Debug

View and update references to symbols

View references to symbols, quickly modify the context of references: For example, a quick preview of where a function is called and when it is called context, and you can update the code of the calling context in the preview view.

Rename symbols and their references: Then the example above, if you want to update the function name and all the calls, how do you do that? P ress F2 then type the new name you want, and then press Enter to submit. All references to the symbol will be renamed, and the operation will be cross-file.

Ref: Peek, Rename Symbol

V. Symbol navigation

Code positioning can be very painful when viewing a long file. S ome developers use a small map of VS Code, but there's a easier way to use ⇧⌘O shortcut to evoke the symbol navigation panel and quickly locate the code with symbols in the currently edited file. T ype characters in the input box to filter and navigate up and down through arrows in the list. This approach is also very friendly to Markdown files and can be quickly navigated by title.

Ref: Go to Symbol

Six, split the editor

When editing files that are particularly informative, you often need to switch between them in context, when you can update the same file with two editors by splitting the editor: press the shortcut ⌘\ split the active editor into two.

You can continue to split the editor endlessly and arrange the editor views by dragging and dragging the editor group.

Reference: Side by side editing

Seven, rename the terminal

VS Code provides an integrated terminal that makes it easy to perform command-line tasks quickly. With a lot more often open multiple terminals, this time to name the terminal can improve the efficiency of terminal positioning.

Reference: Rename terminal sessions

Eight, Git operation

VS Code has built-in Git source control and provides some convenient ways to operate Git. For example:

Resolve Conflicts: VS Code identifies merge conflicts, differences in conflicts are highlighted, and inline actions are provided to resolve conflicts.

Staging or unstaging selected lines of code: Within the editor, you can undo modifications, staging modifications, and undoing staging for selected lines.

Reference: Using Version Control in VS Code

Nine, search results snapshot

VS Code provides cross-file search capabilities, and search result snapshots provide more information about search results, such as the linecode of the code, the context of the search keyword, and the possible editing and saving of search results.

Ref: Search Editors

Ten, visual construction page

In VS Code, web pages can be generated visually by installing the Iceworks plug-in for VS Code. Once the plug-in is installed, ⇧⌘P evoking the naming panel, entering Visual Build in the command panel evokes the visual build interface, which builds the page by selecting page elements, dragging layouts, setting element styles and properties, and finally clicking Build Code to generate React code.

Ref: Iceworks Visual Build

Related reading

• Discovering a bug from VSCode, Microsoft engineers responded in the early hours of the morning...
• Visual Studio Code uses tutorials