Rename Refactoring

It's easy to rename a symbol such as a function name or variable name. Hit F2 while
in the symbol Book to rename all instances - this will occur across all files in a
project. You can also see refactoring in the right-click context menu.

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.

Copy a line and insert it above or below the current position with ⇧⌥↓ or ⇧⌥↑
respectively.
Move an entire line or selection of lines up or down with ⌥↑ and ⌥↓ respectively.
Delete the entire line with ⇧⌘K.
12345
{ "name": "John", "age": 31, "city": "New York"}

Tip: Another very common task is to comment out a block of code - you can toggle
commenting by pressing ⌘/.

Rename Refactoring
It's easy to rename a symbol such as a function name or variable name. Hit F2 while
in the symbol Book to rename all instances - this will occur across all files in a
project. You can also see refactoring in the right-click context menu.

1234567891011
// Reference the functionnew Book("War of the Worlds", "H G Wells");new Book("The
Martian", "Andy Weir"); /** * Represents a book. */function Book(title, author) {
this.title = title; this.author = author;}

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 menu for the function as well as
parameters.

Refactoring via Extraction

Sometimes you want to refactor already written code into a separate function or
constant to reuse it later. Select the lines you want to refactor out and press ⌘.
or click the little light bulb and choose one of the respective Extract to...
options. Try it by selecting the code inside the if-clause on line 3 or any other
common code you want to refactor out.

12345678
function findFirstEvenNumber(arr) { for (let i = 0; i < arr.length; i++) {
if (typeof arr[i] === 'number' && arr[i] % 2 === 0) { return arr[i];
} } return null;}

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 ⇧⌥F or for the current
selection with ⌘K ⌘F. Both of these options are also available through the right-
click context menu.

123456
var cars = ["Saab", "Volvo", "BMW"]; for (var i=0; i < cars.length; i++) {// Drive
the carconsole.log(`This is the manufacturer [${cars[i]}])`); }

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 ⌥⌘[ to fold or press ⌥⌘] to unfold
the ranges at the current cursor position. Folding can also be done with the +/-
icons in the left gutter. To fold all sections use ⌘K ⌘0 or to unfold all use ⌘K
⌘J.

1234567891011
<div> <header> <ul> <li><a href=""></a></li> <li><a
href=""></a></li> </ul> </header> <footer> <p></p>
</footer></div>

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 ⌘K ⌘1 through to ⌘K ⌘5.

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 F8 you can navigate
across them in sequence and see the detailed error message. As you correct them the
squiggles and scrollbar indicators will update.

1234567
// This code has a few syntax errorsConsole.log(add(1, 1.5)); function Add(a :
Number, b : Number) : Int { return a + b;}

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 Tab 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 Tab 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.

1
ul>li.item$*5

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.
1234
// @ts-nocheck let easy = true;easy = 42;

Tip: You can also enable the checks workspace or application wide by adding
"javascript.implicitProjectConfig.checkJs": true to your workspace or user settings
and explicitly ignoring files or lines using // @ts-nocheck and // @ts-ignore.
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 ⌃`, then see what's possible by reviewing
the terminal documentation
Work with version control by pressing ⌃⇧G. 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 ⇧⌘X. The
documentation will show you how to see the most popular extensions, disable
installed ones and more.
That's all for now,

Happy Coding!

PROBLEMS
8
OUTPUT
DEBUG CONSOLE
TERMINAL

Downloading package 'C/C++ language components (OS X)' (6982 KB) Done!Downloading
package 'ClangFormat (OS X)' (854 KB) Done!Downloading package 'Mono Framework
Assemblies' (5368 KB) Done!Downloading package 'Mono Runtime (OS X)' (1676 KB)
Done!Downloading package 'LLDB 3.8.0 (OS X)' (19125 KB) Done! Installing package
'C/C++ language components (OS X)'Installing package 'ClangFormat (OS X)'Installing
package 'Mono Framework Assemblies'Installing package 'Mono Runtime (OS
X)'Installing package 'LLDB 3.8.0 (OS X)' Finished installing dependencies Updating
C/C++ dependencies...

3
70-- NORMAL --
Update Now
Later
Release Notes