Rich Editing Support

Visual Studio Code uses the TypeScript language service to make authoring JavaScript easy. In addition to syntactical features like format, format on type and outlining, you also get language service features such as Peek, Go to Definition, Find all References, and Rename Symbol just by right clicking in any JavaScript file.

Right Click

JavaScript Projects (jsconfig.json)

You can create a JavaScript project by dropping in a jsconfig.json file. It's a subset of tsconfig.json. The presence of a jsconfig.json file in a directory indicates that the directory is the root of a JavaScript project. The file itself lists the files belonging to the project as well as compiler options.

Tip: Just as in tsconfig.json, if no "files" property is present, we default to including all files in the containing directory and subdirectories. When a "files" property is specified, only those files are included.


Tip: VS Code optionally supports multiple jsconfig.json files. This is good, for instance, when you wish to exclude subdirectories.

/// References for .d.ts

With the introduction of jsconfig.json, you no longer need to use /// references in each file (these were required in the initial versions of VS Code). As the file set is defined in jsconfig.json, VS Code knows what files and symbols are part of your project.

As an example, you can just drop a new type definition .d.ts file into your project folder and VS Code will pick it up automatically.

Defining Global Variables Outside .d.ts

VS Code also supports the global directive /*global varName*/ to declare variables. In comparison to .d.ts files, it’s a faster but less powerful way to define variables to be used inside source files.

Global directive

IntelliSense Support

VS Code provides IntelliSense for built-in symbols of browsers, Node.js, and virtually all other environments through the use of type definition .d.ts files. DefinitelyTyped is a repository of typings files for all major JavaScript libraries and environments. The typings are easily managed using TSD, the TypeScript Definition manager. IntelliSense is automatically provided for CommonJS and AMD modules inside your project folders.

Snippets for JavaScript

VS Code has several built-in snippets that will come up as you type or you can press kb(editor.action.triggerSuggest) (Trigger Suggest) and you will see a context specific list of suggestions.

Try Suggestions

Selecting the snippet with tab results in:

Try Result

Tip: You can add in your own User Defined Snippets for JavaScript. See User Defined Snippets to find out how.

ES6 Support

VS Code supports ES6 (ECMAScript 6, the latest update of JavaScript) and understands the new ES6 syntax elements and their semantics. A good overview of the new ES6 features can be found here:

Note: Super-references in deriving object-literals is still on our plate; currently if you try this in VS Code you'll receive a faulty compiler error, which you can suppress by setting the javescript.validate._surpressSuperWithoutSuperTypeError: [true|false] option.

We have a sample on GitHub that shows off some of the ES6 love in VS Code:

git clone
cd es6-vscode-sample
npm install

Run Babel inside VS Code

The Babel transpiler turns ES6 files into readable ES5 JavaScript with Source Maps. You can easily integrate Babel into your workflow by adding this code to your tasks.json file. The isBuildCommand switch makes this task the Task: Run Build Task gesture. isWatching tells VS Code not to wait for this task to finish. To learn more go to Tasks.

    "version": "0.1.0",
    "command": "${workspaceRoot}/node_modules/.bin/babel",
    "isShellCommand": true,
    "tasks": [
            "args": ["src", "--out-dir", "lib", "-w", "--source-maps"],
            "taskName": "watch",
            "suppressTaskName": true,
            "isBuildCommand": true,
            "isWatching": true

Once you have added this you can start Babel with the kb( (Run Build Task) gesture and it will compile all files from the src-directory into the lib-directory.

JavaScript Linters (ESLint, JSHint)

VS Code provides support for ESLint and JSHint. If enabled the JavaScript code is validated as you type and reported problems can be navigated to and fixed inside VS Code.

To enable one of the linters do the following:

  • install the corresponding linter globally or inside the workspace folder that contains the JavaScript code to be validated. For example using npm install eslint or npm install jshint, respectively.
  • enable ESLint or JSHint via the corresponding settings "eslint.enable": true or "jshint.enable": true, respectively.
  • optionally disable VS Code's built-in JavaScript validation via the setting "javascript.validate.enable": false
  • use the .eslintrc or .jshintrc file to configure the linter.

JavaScript Validation Settings

Validation is supported by a set of configuration rules. In addition to syntax checks, User Settings allow you to configure additional checks for JavaScript files. Such as:

Id Description Default
comparisonOperatorsNotStrict Favors the use of !== and === over != and ==. ignore
curlyBracketsMustNotBeOmitted Even single-line block-statements should have curly brackets ignore
emptyBlocksWithoutComment An empty block should at least have a comment ignore
forcedTypeConversion Don’t force a type conversion ignore
functionsInsideLoops Function inside loops often don’t do what you think they do ignore
missingSemicolon Statements should be terminated with a semi-colon ignore
mixedTypesArithmetics Don’t force a conversion with arithmetic operations, like ”C” + 0 + “de” ignore
newOnLowercaseFunctions Functions that are used as constructors should be upper-case ignore
newOnReturningFunctions Functions that are used as constructors should not return something ignore
parametersDontMatchSignature Invoking a function with wrong types or wrong number of parameters ignore
primitivesInInstanceOf The instanceof=operator cannot be used with primitive types error
redeclaredVariables Don’t redeclare a variable with a different type warning
semicolonsInsteadOfBlocks Don’t replace a block with a semi-colon, as in while(true);{ break; } warning
tripleSlashReferenceAlike A comment that looks like a ///-reference warning
undeclaredVariables Use of an undeclared variable warning
unknownProperty Use of an unknown property ignore
unknownTypeOfResults The typeof-operation has a fixed set of possible results warning
unusedFunctions A function that isn’t used warning
unusedVariables A variable that isn’t used warning

Next Steps

OK, read on to find out about:

  • TypeScript - VS Code has great support for TypeScript which brings structure and strong typing to your JavaScript code, without compromising the good parts

Common Questions

Q: Can you Debug minified/uglified JavaScript?

A: Yes, you can. :)