facebook

Using JavaScript in CodeMix

Add CodeMix to your Eclipse for exceptional JavaScript support, with little to no configuration required. This includes:

  • IntelliSense—content assist & parameter hints
  • Validation and linting
  • JSDoc support
  • Formatting
  • JSON support
  • Debugging

This page details JavaScript support using CodeMix or Angular IDE by CodeMix. For JavaScript support in MyEclipse, refer to this page.

JavaScript Projects & Files

JavaScript editing, with content assist and validation, typically works out of the box when editing .js files. There is no need to create a JavaScript “project”, or add a facet or nature for JavaScript support.

To create a JavaScript file, select File>New>Other>CodeMix >JavaScript File. 


Creating a new JavaScript file using the wizard

Advanced Tip: There are some cases where you need a more advanced configuration; for instance, you may want to exclude some files from the JavaScript model, or you have a single Eclipse project with more than one JavaScript project context in it (like frontend and backend code). In such cases, you can create one or more jsconfig.json files for advanced project configuration, please read this document for more details.

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.

Setting

Description

// @ts-nocheck
Comment at the top of the file
Turns off type checking for the file.
// @ts-check
Comment at the top of the file
Turns on type checking for the file.
// @ts-ignore
Comment on line before a type error
Error ignored by validator.
checkJS
Property in jsconfig.json
Controls whether type checking is enabled for the project.

Implicit Project Config: Check JS preference

Controls whether advanced type checking is enabled globally – true by default. Can be overridden by the finer grained settings above.

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.