Interactive Editor Playground

Interactive Editor Playground

The core editor in VS Code is packed with features. This page highlights a number of them and lets you interactively try them out through the use of a number of embedded editors. For full details on the editor features for VS Code and more head over to our documentation.

• Multi-cursor Editing - block selection, select all occurrences, add additional cursors and more.
• IntelliSense - get code assistance and parameter suggestions for your code and external modules.
• Line Actions - quickly move lines around to re-order your code.${!isServerless ? `
• Rename Refactoring - quickly rename symbols across your code base.` : ‘’}
• Formatting - keep your code looking great with inbuilt document & selection formatting.
• Code Folding - focus on the most relevant parts of your code by folding other areas.
• Errors and Warnings - see errors and warning as you type.
• Snippets - spend less time typing with snippets.
• Emmet - integrated Emmet support takes HTML and CSS editing to the next level.
• JavaScript Type Checking - perform type checking on your JavaScript file using TypeScript with zero configuration.

我的补充

• ctrl + p搜索文件
• ctrl + shift + p输入命令

推荐阅读

• 带你快速了解VSCode的10个特性：https://blog.csdn.net/Zhangguohao666/article/details/105676173

Multi-Cursor Editing

Using multiple cursors allows you to edit multiple parts of the document at once, greatly improving your productivity. Try the following actions in the code block below:

1. Box Selection - press any combination of kb(cursorColumnSelectDown), kb(cursorColumnSelectRight), kb(cursorColumnSelectUp), kb(cursorColumnSelectLeft) to select a block of text. You can also press |⇧⌥||Shift+Alt| while selecting text with the mouse or drag-select using the middle mouse button.
2. Add a cursor - press kb(editor.action.insertCursorAbove) to add a new cursor above, or kb(editor.action.insertCursorBelow) to add a new cursor below. You can also use your mouse with +Click</span> to add a cursor anywhere.
3. Create cursors on all occurrences of a string - select one instance of a string e.g. |background-color| and press kb(editor.action.selectHighlights). Now you can replace all instances by simply typing.

That is the tip of the iceberg for multi-cursor editing. Have a look at the selection menu and our handy keyboard reference guide for additional actions.

CSS Tip: You may have noticed in the example above we also provide color swatches inline for CSS, additionally if you hover over an element such as |#p1| we will show how this is represented in HTML. These swatches also act as color pickers that allow you to easily change a color value. A simple example of some language-specific editor features.

IntelliSense

Visual Studio Code comes with the powerful IntelliSense for JavaScript and TypeScript pre-installed. In the below example, position the text cursor right after the dot and press kb(editor.action.triggerSuggest) to invoke IntelliSense. Notice how the suggestions come from the Canvas API.

Tip: While we ship JavaScript and TypeScript support out of the box other languages can be upgraded with better IntelliSense through one of the many extensions.

Line Actions

Since it’s very common to work with the entire text in a line we provide a set of useful shortcuts to help with this.

1. Copy a line and insert it above or below the current position with kb(editor.action.copyLinesDownAction) or kb(editor.action.copyLinesUpAction) respectively.Copy the entire current line when no text is selected with kb(editor.action.clipboardCopyAction).
2. Move an entire line or selection of lines up or down with kb(editor.action.moveLinesUpAction) and kb(editor.action.moveLinesDownAction) respectively.
3. Delete the entire line with kb(editor.action.deleteLines).

Tip: Another very common task is to comment out a block of code - you can toggle commenting by pressing kb(editor.action.commentLine).

Rename Refactoring

It’s easy to rename a symbol such as a function name or variable name. Hit kb(editor.action.rename) while in the symbol |Book| to rename all instances - this will occur across all files in a project. You also have |Rename Symbol| in the right-click context menu.

JSDoc Tip: VS Code’s IntelliSense uses JSDoc comments to provide richer suggestions. The types and documentation from JSDoc comments show up when you hover over a reference to |Book| or in IntelliSense when you create a new instance of |Book|.

Formatting

Keeping your code looking great is hard without a good formatter. Luckily it’s easy to format content, either for the entire document with kb(editor.action.formatDocument) or for the current selection with kb(editor.action.formatSelection). Both of these options are also available through the right-click context menu.

Tip: Additional formatters are available in the extension gallery. Formatting support can also be configured via settings e.g. enabling |editor.formatOnSave|.

Code Folding

In a large file it can often be useful to collapse sections of code to increase readability. To do this, you can simply press kb(editor.fold) to fold or press kb(editor.unfold) to unfold the ranges at the current cursor position. Folding can also be done with the down and right angle bracket icons in the left gutter. To fold all sections use kb(editor.foldAll) or to unfold all use kb(editor.unfoldAll).

Tip: Folding is based on indentation and as a result can apply to all languages. Simply indent your code to create a foldable section you can fold a certain number of levels with shortcuts like kb(editor.foldLevel1) through to kb(editor.foldLevel5).

Errors and Warnings

Errors and warnings are highlighted as you edit your code with squiggles. In the sample below you can see a number of syntax errors. By pressing kb(editor.action.marker.nextInFiles) you can navigate across them in sequence and see the detailed error message. As you correct them the squiggles and scrollbar indicators will update.

Snippets

You can greatly accelerate your editing through the use of snippets. Simply start typing |try| and select |trycatch| from the suggestion list and press kb(insertSnippet) to create a |try|->|catch| block. Your cursor will be placed on the text |error| for easy editing. If more than one parameter exists then press kb(jumpToNextSnippetPlaceholder) to jump to it.

Tip: The extension gallery includes snippets for almost every framework and language imaginable. You can also create your own user-defined snippets.

Emmet

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Try it by selecting |Emmet: Expand Abbreviation| from the |Edit| menu with the cursor at the end of a valid Emmet abbreviation or snippet and the expansion will occur.

Tip: The Emmet cheat sheet is a great source of Emmet syntax suggestions. To expand Emmet abbreviations and snippets using the |tab| key use the |emmet.triggerExpansionOnTab| setting. Check out the docs on Emmet in VS Code to learn more.

JavaScript Type Checking

Sometimes type checking your JavaScript code can help you spot mistakes you might have not caught otherwise. You can run the TypeScript type checker against your existing JavaScript code by simply adding a |// @ts-check| comment to the top of your file.

Tip: You can also enable the checks workspace or application wide by adding |”js/ts.implicitProjectConfig.checkJs”: true| to your workspace or user settings and explicitly ignoring files or lines using |// @ts-nocheck| and |// @ts-expect-error|. Check out the docs on JavaScript in VS Code to learn more.

Thanks!

Well if you have got this far then you will have touched on some of the editing features in Visual Studio Code. But don’t stop now :) We have lots of additional documentation, introductory videos and tips and tricks for the product that will help you learn how to use it. And while you are here, here are a few additional things you can try:

• Open the Integrated Terminal by pressing kb(workbench.action.terminal.toggleTerminal), then see what’s possible by reviewing the terminal documentation
• Work with version control by pressing kb(workbench.view.scm). Understand how to stage, commit, change branches, and view diffs and more by reviewing the version control documentation
• Browse thousands of extensions in our integrated gallery by pressing kb(workbench.view.extensions). The documentation will show you how to see the most popular extensions, disable installed ones and more.

That’s all for now,

Happy Coding! 🎉

---