Boost Your Productivity: 10 Must‑Know VS Code Tricks for Developers

Introduction

VS Code has become the go‑to editor for many developers because of its lightweight nature and rich extension ecosystem. Below are ten highly useful tips collected from Alibaba’s Taobao tech team.

Source: Alibaba Taobao Technology – 10 very useful VS Code tips (originally from Zhihu)

1. Refactor Code

VS Code offers quick refactoring actions such as extracting a selected block into a function, extracting an expression into a constant, moving a function to a new file (which automatically creates and imports the file), converting export syntax ( export const name or export default), and merging multiple parameters into a single object.

2. Custom View Layout

The layout system is flexible; you can move views between the activity bar and panels to suit your workflow.

3. Quick Debugging

Debug JavaScript/TypeScript instantly with the Debug: Open Link command, then paste the local server address into the same command to start debugging front‑end or Node projects.

4. Symbol References and Updates

You can preview where a function is called, view its call context, and update the code directly from the preview.

5. Rename Symbol and References

Press F2, type the new name, and hit Enter to rename a symbol across all files.

6. Symbol Navigation

Use ⇧⌘O to open the symbol navigation panel, filter by typing, and jump to any symbol, which works well for long files and Markdown headings.

7. Split Editor

Press ⌘\ to split the active editor into two panes, and drag to arrange multiple splits as needed.

8. Rename Terminal

Give each integrated terminal a custom name to locate it quickly when multiple terminals are open.

9. Git Operations

VS Code’s built‑in Git UI helps resolve merge conflicts with inline actions, stage or discard selected lines, and view a snapshot of search results with context.

10. Visual Page Builder

Install the Iceworks extension, press ⇧⌘P to open the command palette, type “visual builder”, and drag‑drop UI components to generate React code automatically.

Additional Handy Shortcuts

File navigation: cmd+P to open any file or symbol.

Tab switching: ctrl+tab to cycle recent tabs.

Search: shift+cmd+F for global search.

Terminal: cmd+` to toggle the integrated terminal.

Multi‑cursor editing: alt+click, ⌘\, shift+option+down, etc.

These tips empower developers to work faster and write cleaner code in VS Code.