<p dir="auto"><em>From <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kristianmandrup/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/kristianmandrup">@kristianmandrup</a> on March 2, 2016 11:59</em></p>
<p dir="auto">Trying to create a React component as a class. Currently my file is called <code class="notranslate">GiftedMessengerExample.js</code> and detected as <code class="notranslate">Javascript (Salsa)</code></p>
<p dir="auto">Following guidelines here: <a href="https://babeljs.io/blog/2015/06/07/react-on-es6-plus" rel="nofollow">https://babeljs.io/blog/2015/06/07/react-on-es6-plus</a></p>
<p dir="auto">Converting method into a property declaration with arrow function. However, when I do this, the IDE complains that this is only supported with TypeScript <code class="notranslate">.ts</code> files.<br>
However, if I change the extension to <code class="notranslate">.ts</code> it complains about my JSX and type declarations for React imports such as <code class="notranslate">Text</code> and <code class="notranslate">StyleSheet</code> etc.</p>
<p dir="auto">Please fix this :)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class GiftedMessengerExample extends Component {

  handleSend = (message = {}, rowID = null) =&gt; {
    this._gm.setMessageStatus('ErrorButton', rowID); 
  }"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">GiftedMessengerExample</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>

  <span class="pl-c1">handleSend</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">message</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">rowID</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_gm</span><span class="pl-kos">.</span><span class="pl-en">setMessageStatus</span><span class="pl-kos">(</span><span class="pl-s">'ErrorButton'</span><span class="pl-kos">,</span> <span class="pl-s1">rowID</span><span class="pl-kos">)</span><span class="pl-kos">;</span> 
  <span class="pl-kos">}</span><span class="pl-kos"></span></pre></div>
<p dir="auto"><em>Copied from original issue: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="137855492" data-permission-text="Title is private" data-url="https://github.com/microsoft/vscode/issues/3628" data-hovercard-type="issue" data-hovercard-url="/microsoft/vscode/issues/3628/hovercard" href="https://github.com/microsoft/vscode/issues/3628">microsoft/vscode#3628</a></em></p>
<p dir="auto"><em>From <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/nwehrle/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/nwehrle">@nwehrle</a> on February 9, 2016 21:17</em></p>
<p dir="auto">I use eslint to lint my jsx files. Before I switched to salsa, the linting inside the editor worked fine. After switching to salsa the linting fails inside the editor.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/832234/12930466/c222d796-cf78-11e5-9720-5f5403bea683.png"><img width="497" alt="bildschirmfoto 2016-02-09 um 22 00 18" src="https://cloud.githubusercontent.com/assets/832234/12930466/c222d796-cf78-11e5-9720-5f5403bea683.png" style="max-width: 100%;"></a></p>
<p dir="auto">Salsa is enabled:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/832234/12930762/7cfdc1ba-cf7a-11e5-86d8-fffef477db6c.png"><img width="392" alt="bildschirmfoto 2016-02-09 um 22 13 44" src="https://cloud.githubusercontent.com/assets/832234/12930762/7cfdc1ba-cf7a-11e5-86d8-fffef477db6c.png" style="max-width: 100%;"></a></p>
<p dir="auto">Linting from the shell still works without any errors or warnings.<br>
I expect vscode to not show any linting errors.</p>
<p dir="auto">System:<br>
OSX 10.11.2<br>
vscode 0.10.8<br>
db71ac615ddf9f33b133ff2536f5d33a77d4774e</p>
<p dir="auto">jsconfig.json:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ES6&quot;,
    &quot;module&quot;: &quot;system&quot;,
    &quot;experimentalDecorators&quot;: true
  },

  &quot;exclude&quot;: [
    &quot;node_modules&quot;
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "compilerOptions": {
    "target": "ES6",
    "module": "system",
    "experimentalDecorators": true
  },

  "exclude": [
    "node_modules"
  ]
}
</code></pre></div>
<p dir="auto">User settings:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;javascript.validate.enable&quot;: false,
  &quot;editor.tabSize&quot;: 2,
  &quot;files.trimTrailingWhitespace&quot;: true,
  // Migrated from previous &quot;File | Auto Save&quot; setting:
  &quot;files.autoSave&quot;: &quot;onFocusChange&quot;
}"><pre class="notranslate"><code class="notranslate">{
  "javascript.validate.enable": false,
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  // Migrated from previous "File | Auto Save" setting:
  "files.autoSave": "onFocusChange"
}
</code></pre></div>
<p dir="auto">Partial eslintrc:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &quot;rules&quot;: {
    &quot;func-names&quot;: 0,
    &quot;no-unused-expressions&quot;: 0,
    &quot;id-length&quot;: 0,
    &quot;no-multi-spaces&quot;: 0,
    &quot;no-mixed-spaces-and-tabs&quot;: 2,

    &quot;no-unused-vars&quot;: [1, {&quot;vars&quot;: &quot;all&quot;, &quot;args&quot;: &quot;none&quot;}],
    &quot;react/jsx-uses-react&quot;: 1,
    &quot;react/prop-types&quot;: 0,
    &quot;no-console&quot;: 0
  },
  &quot;plugins&quot;: [
    &quot;react&quot;
  ]"><pre class="notranslate"><code class="notranslate"> "rules": {
    "func-names": 0,
    "no-unused-expressions": 0,
    "id-length": 0,
    "no-multi-spaces": 0,
    "no-mixed-spaces-and-tabs": 2,

    "no-unused-vars": [1, {"vars": "all", "args": "none"}],
    "react/jsx-uses-react": 1,
    "react/prop-types": 0,
    "no-console": 0
  },
  "plugins": [
    "react"
  ]
</code></pre></div>
<p dir="auto"><em>Copied from original issue: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="132536504" data-permission-text="Title is private" data-url="https://github.com/microsoft/vscode/issues/2866" data-hovercard-type="issue" data-hovercard-url="/microsoft/vscode/issues/2866/hovercard" href="https://github.com/microsoft/vscode/issues/2866">microsoft/vscode#2866</a></em></p>