<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> win <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/alexandrudima/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/alexandrudima">@alexandrudima</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> os x <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/weinand/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/weinand">@weinand</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> linux <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/isidorn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/isidorn">@isidorn</a></li>
</ul>
<p dir="auto">General information about salsa can be found in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="106431620" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/4789" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/4789/hovercard" href="https://github.com/microsoft/TypeScript/issues/4789">microsoft/TypeScript#4789</a>.<br>
Information about what will be new in <a href="https://github.com/Microsoft/TypeScript-wiki/blob/editing-1.8/What's-new-in-TypeScript.md">TS 1.8</a>.</p>
<h2 dir="auto">Differences between Salsa and the current JS language service</h2>
<p dir="auto">These are the differences as we currently understand them.</p>
<ul dir="auto">
<li>The JS source level is always ES6 when using Salsa, the <code class="notranslate">target</code> attribute inside <code class="notranslate">jsconfig.json</code> file defines the target for down level compilation.</li>
<li>Salsa doesn't support the linting options that we had as <code class="notranslate">javascript.validate.lint.*</code> (In TS 1.8 TS will support detecting unreachable code and implicit returns). The <code class="notranslate">javascript.validate.lint.*</code> options are no longer supported. The recommendation is to install the <a href="https://marketplace.visualstudio.com/items/dbaeumer.vscode-eslint" rel="nofollow">eslint extension</a> if you want to get linting.</li>
<li>The current JS support implicitly excludes the following folders from the project: .git, node_modules, bower_components, jspm_packages,tmp, and temp. With Salsa you have to exclude them explicitly using the <code class="notranslate">excludes</code> property in the jsconfig.json file (waiting for confirmation from the Salsa team).</li>
<li>Salsa doesn't support the AMD module system.</li>
<li>It didn't make it into TS 1.8, but Salsa plans to acquire .d.ts automatically for the user.</li>
</ul>
<h2 dir="auto">Enabling Salsa</h2>
<ul dir="auto">
<li>Set the environment variable <code class="notranslate">CODE_TSJS</code>. On OS X it is recommended to change this in the <code class="notranslate">.bash_profile</code> using <code class="notranslate">export CODE_TSJS=1</code>, then the environment variable isn't "lost".</li>
<li><em>until Code isn't on TypeScript 1.8beta</em> set <code class="notranslate">typescript.tsdk</code> to point to the path of the lib folder of the <code class="notranslate">typescript</code> module installed with <code class="notranslate">npm install typescript@next</code>. Alternatively, you can also install a typescript@next version inside your test work space directly.</li>
</ul>
<h2 dir="auto">Testing the Salsa enablement</h2>
<ul dir="auto">
<li>Verify that when Salsa is enabled you get a salsa status indicator when editing JS files in the bottom right corner. The used TypeScript installation is shown in the hover.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/172399/12555169/1e9d5a8c-c380-11e5-9252-7440fa50b9c2.png"><img src="https://cloud.githubusercontent.com/assets/172399/12555169/1e9d5a8c-c380-11e5-9252-7440fa50b9c2.png" alt="salsa" style="max-width: 100%;"></a></li>
<li>Verify that when <code class="notranslate">CODE_TSJS</code> is set but the used Typescript version is not <code class="notranslate">typescript@next</code> the salsa status indicator shows an error state.</li>
</ul>
<h2 dir="auto">Testing Code's JavaScript support powered by Salsa</h2>
<p dir="auto">See also <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="106431972" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/4793" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/4793/hovercard" href="https://github.com/microsoft/TypeScript/issues/4793">microsoft/TypeScript#4793</a> for information related to the expected developer experience.</p>
<p dir="auto">Test the Code features below in an exploratory style for the features described below.</p>
<ul dir="auto">
<li>Hovers (simple, definition <kbd>CMD</kbd>)</li>
<li>Mark occurrences</li>
<li>Intellisense</li>
<li>Parameter hints, signature help</li>
<li>Go to definition</li>
<li>Rename symbol</li>
<li>Format on type (enabled using <code class="notranslate">editor.formatOnType:true</code>)</li>
<li>Format Document</li>
<li>Format Selection/Range</li>
<li>Quick outline (<kbd>CMD+SHIFT+O</kbd>)</li>
<li>Show all symbols (<kbd>CMD+T</kbd>)</li>
<li>Validation - Salsa flags syntax errors and type errors like duplicate identifiers. Salsa doesn't perform linting.</li>
</ul>
<h3 dir="auto">Project setup support</h3>
<p dir="auto">Salsa supports a <code class="notranslate">jsconfig.json</code> configuration file. It also supports <code class="notranslate">tsconfig.json</code>, to enable JavaScript for the project using a <code class="notranslate">tsconfig.json</code> you have to set <code class="notranslate">allowJs: true</code>. This enables to open up existing TS  projects for JS.</p>
<ul dir="auto">
<li>Verify that salsa works without a <code class="notranslate">jsconfig.json</code> (the module property is not defined in this case)</li>
<li>Verify that salsa works with a <code class="notranslate">jsconfig.json</code> (the <code class="notranslate">module</code> property defaults to <code class="notranslate">commonjs</code>).</li>
</ul>
<h3 dir="auto">Intellisense support:</h3>
<p dir="auto">Salsa shows first the list of inferred proposals first and then all global identifiers found in the project.</p>
<ul dir="auto">
<li>verify that the inferred proposals are visually distinct from the global identifiers.</li>
</ul>
<h3 dir="auto">Modules, cross file dependencies</h3>
<p dir="auto">Salsa support commonjs modules and dependencies expressed using /// references</p>
<ul dir="auto">
<li>Verify that salsa supports commonjs modules</li>
<li>Verify that Salsa supports /// references</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// &lt;reference path=&quot;ref.js&quot; /&gt;"><pre class="notranslate"><span class="pl-c">/// &lt;reference path="ref.js" /&gt;</span></pre></div>
<ul dir="auto">
<li>Verify that Intellisense works across files/modules</li>
<li>Verify that goto definition works across files/modules</li>
<li>Verify that the rename refactoring works across files/modules</li>
<li>Verify that reference searching works across files/modules</li>
</ul>
<h3 dir="auto">Typings/.d.ts files</h3>
<p dir="auto">Salsa understands .d.ts files that installed inside the project and that are part of the project context.</p>
<ul dir="auto">
<li>Verify that .d.ts files installed with <code class="notranslate">tsd</code> works</li>
<li>Verify that .d.ts files bundled with node modules work.</li>
</ul>
<h3 dir="auto">Classes</h3>
<p dir="auto">Salsa supports ES3 and ES6 style classes</p>
<ul dir="auto">
<li>Verify that Salsa supports Intellisense for ES3 style classes and their properties and methods.</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function Person(name, age) {
    this.name = name;
}

Person.prototype.getName = function getName() {
  return this.name;
};"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-v">Person</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">age</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s1">name</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-v">Person</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">getName</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-en">getName</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<ul dir="auto">
<li>Verify that Salsa supports Intellisense for ES6 style classes and their properties and methods.</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Book {
  constructor(title) {
    this.title = title;
  }
  get title() {
    return this.title;
  }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Book</span> <span class="pl-kos">{</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">title</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">title</span> <span class="pl-c1">=</span> <span class="pl-s1">title</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">get</span> <span class="pl-en">title</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">JSDoc support</h3>
<p dir="auto">Salsa supports JSDoc.</p>
<ul dir="auto">
<li>Verify that the JSDoc information is honoured for Intellisense, parameter hints.</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/**
 * A person
 * @constructor
 * @param {string} name - The name of the person.
 * @param {number} age - The age of the person.
 */
function Person(name, age) {
    this.name = name;
    this.age = age;
}"><pre class="notranslate"><span class="pl-c">/**</span>
<span class="pl-c"> * A person</span>
<span class="pl-c"> * <span class="pl-k">@constructor</span></span>
<span class="pl-c"> * <span class="pl-k">@param</span> {<span class="pl-smi">string</span>} name - The name of the person.</span>
<span class="pl-c"> * <span class="pl-k">@param</span> {<span class="pl-smi">number</span>} age - The age of the person.</span>
<span class="pl-c"> */</span>
<span class="pl-k">function</span> <span class="pl-v">Person</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">age</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s1">name</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">age</span> <span class="pl-c1">=</span> <span class="pl-s1">age</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Settings</h3>
<p dir="auto">Salsa doesn't support the existing <code class="notranslate">javascript.validate.lint.*</code> settings.</p>
<ul dir="auto">
<li>Verify that are should no longer shown to user when Salsa is active.</li>
</ul>
<h3 dir="auto">React/JSX</h3>
<p dir="auto">Salsa supports JSX. To get Intellisense for React install the typings for <code class="notranslate">react-global</code> using <code class="notranslate">tsd install react-global</code>.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var CommentBox = React.createClass({
  render: function() {
    return (
      &lt;div className=&quot;commentBox&quot;&gt;
        Hello, world! I am a CommentBox.
      &lt;/div&gt;
    );
  }
});

ReactDOM.render(
  &lt;CommentBox /&gt;,
  document.getElementById('content')
);"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">CommentBox</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-en">render</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"commentBox"</span><span class="pl-c1">&gt;</span>
        Hello, world! I am a CommentBox.
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-v">CommentBox</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
  <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'content'</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<ul dir="auto">
<li>Verify that you get Intellisense inside the JSX constructs.</li>
</ul>
<p dir="auto"><code class="notranslate">tsc</code> supports to translate <code class="notranslate">.jsx</code> files to .js files by defining the <code class="notranslate">jsx</code> property inside the jsconfig.json (<g-emoji class="g-emoji" alias="warning" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/26a0.png">⚠️</g-emoji> currently tsc only honours <code class="notranslate">tsconfig.json</code> files).</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" &quot;jsx&quot;: &quot;react&quot;,"><pre class="notranslate"> <span class="pl-s">"jsx"</span>: <span class="pl-s">"react"</span><span class="pl-kos">,</span></pre></div>
<ul dir="auto">
<li>Verify that you can translate .jsx files</li>
</ul>
<h3 dir="auto">ReactNative</h3>
<p dir="auto"><g-emoji class="g-emoji" alias="warning" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/26a0.png">⚠️</g-emoji> Not yet supported in <code class="notranslate">1.8.0-dev.20160125</code><br>
Salsa supports ReactNative, where the JSX constructs are used inside normal .js files.</p>
<ul dir="auto">
<li>Verify that you do not get syntax errors inside .js file when using .jsx constructs.</li>
<li>Verify that you get Intellisense inside JSX constructs.</li>
</ul>
<h3 dir="auto">Down level compilation</h3>
<p dir="auto">Salsa supports to down compile ES6 to ES5, ES3, etc. You can define the <code class="notranslate">target</code> and <code class="notranslate">outDir</code> attribute inside the jsconfig.json. <g-emoji class="g-emoji" alias="warning" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/26a0.png">⚠️</g-emoji> currently only supported inside a <code class="notranslate">tsconfig.json</code> that includes <code class="notranslate">allowJs:true</code>. As a workaround you can use <code class="notranslate">tsc -p jsconfig.json</code>.</p>