Visual Studio Code - NEW FEATURES: JavaScript - Salsa Preview

The 0.10.8 January release features a myriad of improvements, including...

JavaScript - Salsa Preview

The JavaScript language service in VS Code has always been powered by TypeScript. We are migrating to a new JavaScript language service implementation called Salsa. Salsa will become available with TypeScript 1.8 but for the January update, we are providing way to preview Salsa in VS Code.

Salsa Improvements

Salsa provides important improvements over the existing JavaScript language service.

The JSDoc comment format is now understood and used to improve IntelliSense proposals and parameter hints:

You now get IntelliSense proposals for properties in 'ECMAScript 3 style classes':

IntelliSense offers both inferred proposals and the global identifiers of the project. The inferred symbols are presented first, followed by the global identifiers (with the document icon), as you can see in the image above.

The commonjs support has been improved as well:

Tip: When using commonjs, exclude the node_modules folder using the exclude property in jsconfig.json. This is due to issue 6673 which is fixed but not yet in typescript@next.

There is now support for JSX:

Tip: To get IntelliSense for React/JSX, install the typings for react-global by running tsd install react-global from the terminal.

Salsa also understands JSX constructs inside JavaScript (.js) files to support React Native development. We haven't updated the grammar for .js files yet but you can enable JSX syntax coloring for JS using the js-is-jsx extension. This extension tell VS Code to treat .js files as .jsx files so that the JSX syntax coloring is used.

It is now possible to have mixed TypeScript and JavaScript projects. To enable JavaScript inside a TypeScript project, you can set the allowJs property to true in the tsconfig.json.

Tip: The tsc compiler does not detect the presence of a jsconfig.json file automatically. Use the –p argument to make tsc use your jsconfig.json file, e.g. tsc -p jsconfig.json.

Finally, the TypeScript compiler tsc can down-level compile JavaScript files from ES6 to another language level.

Changes from the existing VS Code JavaScript support

Salsa will undoubtedly provide a much better experience writing JavaScript applications in VS Code. By moving to this new service, we give up a few features previously available with our custom JavaScript language service.

• When using Salsa, the language level is always ECMAScript 6. In the existing JavaScript language service, the default level was ES6 but there was support to define a lower level using the target attribute inside jsconfig.json. This support has been removed and the target attribute is now only used by tsc to define the target version when a JavaScript file is compiled to a lower ECMAScript version.
• The existing JavaScript language service implicitly excluded some folders from the project, see the JavaScript topic. This is no longer the case and you must exclude these folders explicitly in your jsconfig.json file.
• Salsa flags syntax errors but the JavaScript linting options javascript.validate.lint.* defined in the user settings are no longer supported. To get these linting options back, we recommend that you use a linter combined with a VS Code linter extension like ESLint or JSHint.
• Salsa doesn't support the AMD module system.

Enabling Salsa

To enable Salsa for your workspace:

• Set the environment variable VSCODE_TSJS. On OS X, it is recommended that you change this in your .bash_profile using export VSCODE_TSJS=1. That way the environment variable is persisted.
• Salsa requires TypeScript 1.8 but the final 1.8 release isn't available yet. Therefore, you need to install the nightly TypeScript build. You have two options:
  • Install TypeScript locally into your workspace using npm install typescript@next. VS Code will pick up the TypeScript version from there.
  • Install TypeScript globally to share the installation across workspaces. In this case, you install it using npm install -g typescript@next. You then have to tell VS Code the install location using the typescript.tsdk setting. Set typescript.tsdk to the path of the lib folder containing the tsserver.js file of the installed TypeScript module.

Please note, the TypeScript nightly is continually being updated. During our testing, we have been very successful using typescript@1.9.0-dev.20160128.

You can verify that you have Salsa enabled and you have an installed TypeScript version that supports Salsa by checking the status indicator in the Status Bar. This shows that all is OK:

When the TypeScript version doesn't support Salsa, you will see the indicator below. If you hover over the status indicator, you will see the path to the TypeScript installation that you have configured.

Check out all the new features and update to Visual Studio Code v0.10.9:

https://code.visualstudio.com/updates

Thanks for stopping. Bye!

   - Ninja Ed