@@ -14,7 +14,7 @@ The core editor in VS Code is packed with features. This page highlights a numb
### 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 the code block below:
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 <spanclass="mac-only windows-only">any combination of kb(cursorColumnSelectDown), kb(cursorColumnSelectRight), kb(cursorColumnSelectUp), kb(cursorColumnSelectLeft) to select a block of text, you can also press</span><spanclass="shortcut mac-only">`⇧⌥`</span><spanclass="shortcut windows-only linux-only">`Shift+Alt`</span> while selecting text with the mouse.
2. Add a cursor - press kb(editor.action.insertCursorAbove) or kb(editor.action.insertCursorBelow) to add a new cursor above or below, you can also use your mouse with <spanclass="shortcut mac-only">`⌥+Click`</span><spanclass="shortcut windows-only linux-only">`Alt+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.
...
...
@@ -82,7 +82,7 @@ function Book(title, author) {
}
```
> **JSDoc Tip:** The example above also showcased another way to get IntellSense hints by using `JSDoc` comments. You can try this out by invoking the `Book` function and seeing the enhanced context in the IntelliSense Experience for the function as well as parameters.
> **JSDoc Tip:** The example above also showcased another way to get IntelliSense hints by using `JSDoc` comments. You can try this out by invoking the `Book` function and seeing the enhanced context in the IntelliSense Experience for the function as well as parameters.
### Formatting
...
...
@@ -144,7 +144,7 @@ You can greatly accelerate your editing through the use of snippets. Simply sta
### 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. To use emmet simply press tab after a valid piece for Emmet syntax and the expansion will occur. Try it by pressing tab after `ul>li.item$*5` to see Emmet in action.
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. To use Emmet simply press tab after a valid piece for Emmet syntax and the expansion will occur. Try it by pressing tab after `ul>li.item$*5` to see Emmet in action.
```html
ul>li.item$*5
...
...
@@ -156,10 +156,10 @@ ul>li.item$*5
## 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](https://code.visualstudio.com/docs) and [introductory videos](https://code.visualstudio.com/docs/introvideos/overview) 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 whats possible by [reviewing the terminal documentation](https://code.visualstudio.com/docs/editor/integrated-terminal)
- Open the Integrated Terminal by pressing kb(workbench.action.terminal.toggleTerminal) then see what's possible by [reviewing the terminal documentation](https://code.visualstudio.com/docs/editor/integrated-terminal)
- Work with version control by pressing kb(workbench.view.git) understand how to stage, commit, change branches, and view diffs and more by reviewing the [version control documentation](https://code.visualstudio.com/docs/editor/versioncontrol)
- Browse thousands of extensions in our integrated gallery by pressing with kb(workbench.view.extensions) the [documentation](https://code.visualstudio.com/docs/editor/extension-gallery) will show you how to see the most popular extensions, disable installed ones and more.
<li><buttondata-href="command:workbench.action.showInterfaceOverview"><h3>Interface overview</h3><span>Get a visual overlay highlighting the major components of the UI</span></button></li>
<li><buttondata-href="command:workbench.action.selectTheme"><h3>Color theme</h3><span>Make the editor and your code look the way you love</span></button></li>
<li><buttondata-href="command:workbench.action.keybindingsReference"><h3>Keyboard shortcuts</h3><span>A printable PDF with the most common keyboard shortcuts</span></button></li>
<li><buttondata-href="command:workbench.action.showCommands"><h3>Show all commands</h3><span>Rapidly access and search commands from the control pannel (<spanclass="shortcut"data-command="workbench.action.showCommands"></span>)</span></button></li>
<li><buttondata-href="command:workbench.action.openGlobalSettings"><h3>Configure settings</h3><span>Unlock the full power of VS Code by tweeking the settings</span></button></li>
<li><buttondata-href="command:workbench.action.showCommands"><h3>Show all commands</h3><span>Rapidly access and search commands from the control panel (<spanclass="shortcut"data-command="workbench.action.showCommands"></span>)</span></button></li>
<li><buttondata-href="command:workbench.action.openGlobalSettings"><h3>Configure settings</h3><span>Unlock the full power of VS Code by tweaking the settings</span></button></li>
<li><buttondata-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3>Change Default Keyboard Shortcuts</h3><span>Install an extension to adopt the keyboard shortcuts from another tool</span></button></li>
<li><buttondata-href="command:workbench.action.showInteractivePlayground"><h3>Interactive playground</h3><span>Try essential editor features out in a short walkthrough</span></button></li>
