Visual Studio Code - NEW FEATURES: 12 Language Improvements (JavaScript, TypeScript, & C#)

  • Article

The Visual Studio Code 0.10.10 release features a fiesta of language improvements, including...

Languages - JavaScript

The Salsa JavaScript language service was available as preview in January and it is now the default language service for JavaScript in the February update.

Improvements

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 support

 

There is now support for JSX/React:

React/JSX Support

 

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

 

Tip: When you use eslint for linting (see below) and you used eslint --init to create an eslint configuration and you answered  yes to "Do you use React?", then the setting experimentalObjectRestSpread is enabled. Support for ObjectRestSpread is not yet provided by Salsa but it is on the roadmap (see #2103).

 

There is now support for React Native:

React Native Support

 

Tip: To get IntelliSense for React Native, install the typings for react-native by running tsd install react-native or typings install --ambient react-native from the terminal. Or even better... if you also want debugging support then install the preview of the React Native extension.

 

Tip: There is a known issue in that Salsa Doesn't Provide IntelliSense When Using Import Statements.

 

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.

Migration Notes

The following sections describe a few of VS Code's features that have changed with the move to Salsa and provide information about maintaining previous behaviors.

Linters

Previously the JavaScript language support provided some linting options enabled by the javascript.validate.lint.* settings. With jshint and eslint, there are powerful linters for JavaScript available. Also, there are now extensions for VS Code available that integrate these linters. Therefore, we have decided to deprecate the built-in linter and Salsa now reports syntax errors only. We strongly recommend that you install and configure a JavaScript linter if your project hasn't done so already.

In particular, the previous JavaScript infrastructure provided an implicit lint rule which warned about undeclared variables unless they are mentioned in a /*global*/ comment block. This rule is no longer active and needs to be configured in your linter of choice.

Here are the steps to set up eslint:

  • npm install eslint to install eslint into your workspace or npm install -g eslint to install it globally.
  • install the VS Code eslint extension.
  • use eslint --init to create an initial eslint configuration by answering questions or by picking a popular configuration.

Tip: If you use JSON as the format of the eslint configuration file, then VS Code can provide you with IntelliSense when you edit the .eslintrc.json file.

This .eslintrc.json corresponds roughly to the lint settings of the old JavaScript infrastructure.

Changes in jsconfig.json

exclude lists

The previous JavaScript language service had a built-in list for folders that should be excluded from the project context. This list included the folders: node_modules, bower_components, jspm_packages, tmp, and temp. This implicit behavior has changed in favor of an explicit list defined by the user. Therefore if you use...

  • node exclude the node_modules folder
  • bower exclude the bower_components folder
  • ember exclude the tmp and temp folder
  • jspm exclude the jspm_packages folder
  • webpack then exclude the output folder, e.g., dist.

Tip: After editing the jsconfig.json, do not forget to run the Reload JavaScript command to ensure that everything is up to date.

Defaults

If you do not have a jsconfig.json in your workspace then the following defaults are used:

  • the exclude list includes the node_modules folder and the folder defined by the out attribute.

What has not changed, but that you should be aware of, is that if you have no jsconfig.json defined to mark the root of your project, then each JavaScript file is considered an island by Salsa.

js-is-jsx etension deprecation

The js-is-jsx extension is no longer needed since Salsa gives you coloring for JSX constructs inside .js files out of the box. We recommend you uninstall this extension.

No longer supported

Salsa undoubtedly provides a much better experience writing JavaScript applications in VS Code. By moving to Salsa, we give up a few features previously available with our old JavaScript language service:

  • The source language level is now always ECMAScript 6. Previously, 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 previous JavaScript infrastructure attempted to resolve references for AMD modules. This hasn't worked in all cases and support for AMD to resolve references across files is currently no longer supported.
  • There is no longer support for IntelliSense in script sections inside HTML documents.
  • The javascript.validate.* settings are no longer supported and are ignored (see above).
  • The previous JavaScript infrastructure provided quick fixes to add an undefined variable as a global and to fetch a type definition from definitely typed. These quick fixes are no longer available.
  • A file without a .js suffix that VS Code identifies as a JavaScript file is now treated as a .ts file and you get unexpected type errors (#issue 7291).

Languages - TypeScript

VS Code now ships with the latest TypeScript 1.8.2 version.

Languages - C#

C# language support is now an optional install from the Marketplace. You can install it from within VS Code by searching for 'C#':

Installing C# extension

Or if you already have a project with C# files, VS Code will prompt you to install the extension as soon as you open a C# file.

 

      

 

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

https://code.visualstudio.com/updates

 

You're looking visual and studious,

   - Ninja Ed