JavaScript
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.
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.
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.
Selecting the snippet with tab
results in:
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: https://github.com/lukehoban/es6features
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 https://github.com/jrieken/es6-vscode-sample
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(workbench.action.tasks.build)
(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
ornpm 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. :)