Using JavaScript in CodeMix

Editing JavaScript Source

IntelliSense

When typing in JavaScript files, content assist suggestions display as you type—there’s no need to manually invoke content assist or type a trigger character. These suggestions  include documentation when available. When calling functions, you can select between different signatures in the popup to display parameter info and documentation corresponding to the parameter being keyed in.

Automatic Imports

When working with modules, content assist suggests the names of exported symbols found in your project. Using this suggestion adds the import as well. You can control this behavior using the Auto Imports setting on the CodeMix>Extensions>TypeScript>JavaScript Suggest preference page.

Snippets

Snippets are presented as you edit code, some advanced snippets include placeholders that save you from typing repetitive code.

Many extensions add snippets in addition to other functionality. In addition, there are several snippet-specific extensions that can be installed for specialized snippets.

CodeMining & Find References

CodeMining annotations display a count of references for properties, methods, classes and exported objects, within the editor. Click the annotation to view the references in the Search view. Optionally, to invoke Find References, press Ctrl+Shift+G or right-click and select Find References.

You can control the display of these annotations using the References Code Lens setting on the CodeMix>Extensions>TypeScript>JavaScript Common preference page.

Refactoring

To invoke rename refactoring for symbols in your JavaScript source, press Alt+Shift+R, or right-click and select Rename.

To extract code to a method, constant, etc., select a snippet of code, press Ctrl+Shift+P, select Refactor…, and the choose the appropriate refactoring. 

JSDoc Support

Type /** to get a JSDoc template for a function that automatically picks up parameters from the signature. You can then use the placeholders to jump to the documentation for each parameter, specifying types and descriptions.

JSON

Beyond syntax checking and highlighting, with support for JSON schemas, you get content assist, as well as documentation, when editing common JSON files. If you have a custom format, you can manually link it to a custom schema for the same benefits. See this document for more details.

Our package.json support is at another level, content assist provides Node modules names, descriptions, and their latest versions.

A quick outline allows you to efficiently navigate through large JSON files, and snippets reduce the amount of typing required by providing custom completion proposals.

Formatting

Press Ctrl+Shift+F, or right-click and select Format, to format your JavaScript source. You can set Formatter preferences on the CodeMix>Formatter>JavaScript preference page.

Formatting preferences

The formatter can be configured to automatically run on saving a file by selecting this option on the CodeMix>Editors>Save Actions preference page.

Validation and Building

Advanced Type Checking

Besides syntax validation, TypeScript’s advanced type checking capabilities are used in regular JavaScript files to catch some type related mistakes. Please see Appendix A for details on how the language service derives type information for advanced validation.

This validation is enabled by default, for all projects. The following settings will help you control this validation.

For more details, see this document.

Basic Validation

Basic JavaScript validation is also enabled by default, you can control this with the javascript.validate.enable user or workspace setting. Please note that there is no way to override this setting per file or project.

Linting

With the ESLint extension, your JavaScript code is linted, helping you catch issues that you would normally only find at runtime, or bugs that are hard to track down.

To enable linting, you must have an .eslintrc file in your project, and ESLint installed in the project or globally. An easy way to globally install ESLint, is to run npm install -g eslint from any console.

Several linting issues have quick fixes associated with them that can be used to easily fix the problem.

Quick fixes and linting

Sample .eslintrc file

{
  "rules": {
	"quotes": [2, "double"]
  },
  "extends": "eslint:recommended"
}

ESLint can be globally controlled using the eslint.enable setting. You can also use the eslint.autoFixOnSave setting to ensure fixable issues are automatically fixed when you save the file. For more details, read this document.

Building

If you’re using Grunt, Gulp, Webpack, etc. to build your web application, read the Build Pipelines and Tasks pages for instructions on how you can build and serve your projects without leaving your IDE.

Appendix A: JavaScript Types

Having accurate type information helps the tooling provide appropriate IntelliSense, validation, refactoring and even formatting. Type information is derived by the JavaScript Language Service, using first type inference, followed by JSDoc, and TypeScript Declaration Files.

Type Inference

Here a type is inferred by looking at contextual code, the value used to initialize a variable or the values returned by a function.

JSDoc

JSDoc has a number of annotations that can be used to provide typing information.

TypeScript Declaration Files

Values declared in a TypeScript declaration file (.d.ts), as well as classes/interfaces declared in TypeScript, can be referenced in JSDoc, making the typing information available as above.

Many JavaScript libraries already have their APIs defined in .d.ts files, which are automatically downloaded and managed, for packages listed in your project’s package.json file. For example, if your project has jquery-3.3.1.min.js, then a corresponding .d.ts file will be downloaded, providing superior IntelliSense and validation when using jQuery.

For more information on types, please read this document.