Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the skills of using VS Code. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

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

Refactoring the code

VS Code provides some operations for quickly refactoring code, such as:

Extract an entire piece of code into a function: select the source code snippet to extract, and then click the light bulb in the slot to see the available refactoring operations. The code snippet can be extracted into a new method or in a different scope (current closure, current function, current class, current file) into a new function. During the extraction and refactoring, VS Code guides the naming of the function.

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

Move to a new file: move the specified function to a new file, VS Code will automatically name and create the file, and introduce the new file within the current file.

Convert the export method: export const name or export default.

Merge parameters: merge multiple parameters of a function into a single object parameter:

Reference: refactoring operation, JS/TS refactoring operation

Second, customize the view layout

The layout system of VS Code is very flexible and can move the view in the active bar and panel on the workbench.

Reference: rearranging view

Third, quickly debug 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 usually start a local service, where you just need to fill in the local service address into the Debug: Open Link input box.

Reference: Debug

IV. View and update references to symbols

View the reference of the symbol, quickly modify the context of the reference: for example, quickly preview where a function is called and the context in which it is called, and update the code for the calling context in the preview view.

Rename symbols and their references: follow the above example, what if you want to update the function name and all the calls? Press 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 is cross-file.

Reference: Peek, Rename Symbol

V. symbolic navigation

Code positioning can be very painful when viewing a long file. Some developers will use VS Code's mini-map, but there is a more convenient way: you can use the ⇧⌘ O shortcut to evoke the symbol navigation panel and quickly locate the code through symbols in the currently edited file. Type 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 you can navigate quickly by title.

Reference: Go to Symbol

VI. Split editor

When editing a file with a lot of content, you often need to switch in context, so you can update the same file with two editors by splitting the editor: press the shortcut key ⌘\ to split the active editor into two.

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

Reference: Side by side editing

7. Rename the terminal

VS Code provides an integrated terminal that can easily and quickly perform command-line tasks. If you use more than one terminal, you will often open multiple terminals. Naming the terminal at this time can improve the efficiency of terminal positioning.

Reference: Rename terminal sessions

VIII. Git operation

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

Conflict resolution: VS Code identifies merge conflicts, highlights differences in conflicts, and provides inline operations to resolve conflicts.

Temporarily save or undo selected lines of code: you can undo changes, save changes, and undo temporary storage for selected lines in the editor.

Reference: Using Version Control in VS Code

IX. Snapshot of search results

VS Code provides cross-file search function, and snapshots of search results can provide more information about search results, such as the line code in which the code is located, the context of search keywords, and the ability to edit and save search results.

Reference: Search Editors

Build pages visually.

Web pages can be generated visually in VS Code, which is achieved by installing the Iceworks plug-in for VS Code. After installing the plug-in, call up the naming panel through ⇧⌘ P, type "Visual build" in the command panel to evoke the visual build interface, build the page by selecting web page elements, dragging and dropping the layout, setting element styles and attributes, and finally click "generate Code" to generate React code.

These are all the contents of this article entitled "what are the skills for using VS Code?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.