Visual Studio Code - NEW FEATURES: JavaScript - Salsa Preview

  • Article

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:

JSDoc comment format

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

ES3 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:

commonjs

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:

JSX Support

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:

Salsa status

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.

Salsa status failure

  

 

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

Comments

  • Anonymous
    February 13, 2016
    If you are using OSX and installing typescript globally in order to get salsa, this is the command you need  in your settings.json file: "typescript.tsdk": "usr/local/lib/node_modules/typescript/bin/tsserver" HTH Took me quite some time to figure that out.

  • Anonymous
    February 15, 2016
    Thanks, Julie!

  • Anonymous
    February 15, 2016
    SEE ALSO: Computers Today (part 1 of 6) blogs.msdn.com/.../computers-today.aspx Girls in computer programming... why it matters!!! blogs.msdn.com/.../cs-spotlight-girls-in-computer-programming-why-it-matters.aspx   Why should I teach Java in Visual Studio Code? blogs.msdn.com/.../why-should-i-teach-java-out-of-visual-studio-code-instead-of-out-of-eclipse-or-netbeans.aspx   Computational Thinking - by Jeannette Wing blogs.msdn.com/.../computational-thinking-videos-amp-papers-by-jeannette-wing.aspx

  • Anonymous
    May 26, 2016
    Even with TS 1.8.10 on my machine as the current stable version, the JavaScript intellisense doesn't really seem to be helped. I installed typescript@next and had the language badge change to 1.9-dev-something, but couldn't detect the JS intellisense helpers picking up anything new or helpful.Do you still need TS@next even though 1.8+ is released now?

    • Anonymous
      July 22, 2016
      James, good questions. Please bring them up as Issues in the Visual Studio Code GitHub page:https://github.com/Microsoft/vscode/issues

  • Anonymous
    October 31, 2016
    Hi, I would like to know how you guys generate the jsdoc automatically? I saw the video on the homepage http://www.typescriptlang.org/, Anders press enter after he type 'jsdoc' in VSCode, then jsdoc ( the same as the first code block of this article ) will be generated automatically. I tried to search how it works, but failed, really appreciate for your help.

    • Anonymous
      January 06, 2017
      Chuck,I'm not sure about the details. You can connect and inquire on GitHub:https://github.com/Microsoft/vscodeThanks!