I often help some students to solve problems One by One. When I see some students using VS Code, I feel a little awkward. In fact, some useful skills can improve our daily work efficiency.
Refactor the code
VS Code provides some quick actions to refactor Code, such as:
Extract a whole piece of code as a function: Select the source fragment to extract, and then click the bulb in the make-trough to see the refactoring operations available. Snippets can be extracted into a new method, or into a new function in different scopes (current closure, current function, current class, current file). During the extraction refactoring, VS Code guides you to name the function.
Extract an expression to a 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 automatically names and creates the file, and introduces the new file into the current file.
Export const name or export default.
Merge arguments: To combine multiple arguments of a function into a single object argument:
Reference: Reconstruction operation, JS/TS reconstruction operation
Custom view layout
VS Code’s layout system is flexible enough to move views around in active bars and panels on the workbench.
Reference: Rearrange views
Quick debug code
Debugging JS/TS Code within VS Code is very easy, just use the Debug: Open Link command. This is useful when debugging front-end or Node projects, where a local service is usually started, simply type the address of the local service into the Debug: Open Link input box.
Reference: the Debug
View and update symbol references
View symbol references, quickly modify the context of references: for example, quickly preview where a function is called and the context in which it was called, and update the code calling the context in the preview view.
Rename symbols and their references: Following the example above, if you want to update the function name and all the calls, how do you do that? Press F2, then type the new name you want, and press Enter to submit. All references to symbols are renamed, again across files.
See Peek, Rename Symbol
Symbol navigation
Code location can be a pain when viewing a long file. Some developers will use VS Code’s little map, but there is a more convenient way: to use the ⇧⌘O shortcut to invoke the symbol navigation panel to quickly locate Code using symbols in the currently edited file. You can filter by typing characters into the input box and navigate up and down the list with arrows. This approach is also very friendly to Markdown files and can be quickly navigated by title.
Go to Symbol
Split editor
When editing a particularly heavy file, which often requires a context switch, you can use two editors to update the same file by splitting the editor: press the shortcut key to ⌘\ to split the active editor into two.
You can continue to split editors endlessly, arranging editor views by dragging and dropping editor groups.
Side by Side editing
Renaming terminal
VS Code provides an integration terminal that makes it easy to quickly perform command-line tasks. In this case, naming terminals can improve the efficiency of locating terminals.
See: Rename Terminal Sessions
Git operation
VS Code has built-in Git source management, which provides some convenient ways to operate Git. Such as:
Conflict resolution: VS Code identifies merge conflicts, conflict differences are highlighted, and provides inline actions to resolve conflicts.
Temporary or unselected lines of code: In the editor, you can undo changes, temporary changes, and unselected lines.
Using Version Control in VS Code
Search Result Snapshot
VS Code provides cross-file search capabilities. Snapshots of search results provide more information about search results, such as the line Code of the Code, the context of the search keywords, and the ability to edit and save search results.
Reference: Search Editors
Visual Build page
In VS Code can be generated by means of visualization to build a Web page, this is by installing VS Code Iceworks (marketplace.visualstudio.com/items?itemN…). Plug-in implementation. When registering a plugin, invoke the naming palette with a ⇧⌘P, type “Visual Build” in the command palette to invoke the Visual Build interface, which allows registering the page by selecting a web element, dragging and dropping the layout, setting the element style and attributes, and clicking “Generate code” to generate the React code.
