ES6/Babel support

[derekdowling]

Is there a process for enabling ES6/Babel for jshint/jsxhint via this plugin? I know jsxhint --babel src/**/* works for Jsxhint if that's any help.

[jaxbot]

I wonder what happens internally for that. I suspect it runs JSX and then lints the JSX converted, ES6 code. Should be doable, though

[jaxbot]

Can you give me a case where this plugin doesn't do what you want it to in regards to Babel? I added some ES6 syntax to my file and JSX handled it fine and passed the converted code over the jshint correctly.

[derekdowling]

I think I tried:

import 'Module' from './my_module';

and that managed to break it.

[adamalbrecht]

+1 Yeah when I enable this, I get Illegal import declaration errors anytime I use the new ES6 module syntax.

[jaxbot]

Yeah it looks like JSX doesn't support the new import syntax. That's problematic because we pipe code through JSX before jshint-ing it. Looking in to this

[jaxbot]

Related: https://github.com/babel/babel/issues/825

[jaxbot]

Alright, dug into it. Basically it looks like JSX should support this but it's bleeding edge. I couldn't get it to work, but you can try npm install -g react-tools to update jsx and see if that works.

If not, I'm adding the option to use Babel instead of JSX. In the future, it looks like ESLint will be a good candidate to replace this project altogether, but I get the same illegal import declaration error in that aswell, so my understanding of the syntax isn't really clear I guess

[adamalbrecht]

Yeah I discovered ESLint today and it works great.

[jaxbot]

When I use ESLint I get the same illegal declaration error, and it doesn't parse my JSX. Any tips on that?

[adamalbrecht]

First, I installed eslint and babel-eslint. Then, in my vimrc, I added the following:

let g:syntastic_javascript_checkers = ['eslint']]

I'm not quite sure how to configure it globally (it's probably here somewhere), but in my current project, I added the following to my package.json:

esLintConfig: {
  "parser": "babel-eslint",
  // rules, etc
}

[jaxbot]

Awesome, got that working. Do you think this could replace this project altogether?

Also, OT but what rules are you using? My eslint throws an error that require, React, etc., aren't defined. Bah!

[jaxbot]

Also, eslint seems to suffer the same issue as jsxhint where React issues like sibling elements don't transform and instead throw errors like "Unterminated regular expression".

[adamalbrecht]

Oh I forgot to mention one thing - you need to enable jsx and es6 under "settings". Here is my config so far:

  "eslintConfig": {
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "node": true
    },
    "settings": {
      "ecmascript": 6,
      "jsx": true
    },
    "rules": {
      "strict": 0,
      "quotes": 0,
      "no-unused-vars": 0,
      "camelcase": 0,
      "no-underscore-dangle": 0
    }

[adamalbrecht]

And I don't know much about the merits of JSHint vs ESLint, but yeah I think it could probably replace this project. It works great for me so far.

[adamalbrecht]

I also just discovered this to make it even more useful: https://github.com/yannickcr/eslint-plugin-react

[jaxbot]

Wow, this is pretty awesome! I'm in favor of deprecating this and just supplying instructions on setting up that system.

[jaxbot]

I've updated the project readme with instructions for the ESLint way. Does this resolve this issue?

[ghost]

Strange ... it doesnt' work for me; using the plugin does work.