JSX support about standard HOT 21 CLOSED

There ought to be a way to add esprima linting to jscs: cf jscs-dev/node-jscs#708.

I tried adding ecmaScript: {..., "jsx": true} to the .eslintrc - didn't seem to work out of the box. More details on eslint and JSX here.

from standard.

Disabling linting for JSX blocks is a mistaken approach. You won't catch potential issues in them, and constants you use there will appear unused to the linter. The right approach is to use JSX-aware linter, or pipe compiled JSX to linter.

from standard.

@gaearon agreed. Do you have any experience making JSX linters work here, like I looked into above? Help would be great.

from standard.

Wrote an article on teaching ESLint to parse ES6/JSX/some ES7 with Babel a few days ago: https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48

It won't help you with standard though..

from standard.

Validated using "jsx":true in the "ecmaFeatures" section of .eslintrc works great, however its not as clear with jscs. I couldn't find any explicit options.

In searching around their issues, it looks like some folks are suggessing using jsxcs as an alternative. running jsxcs with the current rc file does not show a promising result:

Error: Unsupported rules: disallowOperatorBeforeLineBreak, requireSpacesInForStatement

So... once #45 is done and only eslint remains, jsx support should be possible.

from standard.

+1 if this gets resolved I can tell folks to use this in my upcoming workshop at FluentConf.

from standard.

I'll take another look at adding support for JSX.

Can someone point me to a couple repos with JSX in them? If they already use standard style, even better!

from standard.

@feross Here's mine: https://github.com/BeagleLab/beagle/tree/master/js

Already standardized.

from standard.

@feross also adding you to the little demo app I started on for fluent.

from standard.

Looks like jscs should support jsx now, but its not yet been pushed to npm.
jscs-dev/node-jscs#1132

from standard.

OK, so this works, however it depends on jscs in github. The trick is using esprima-fb

Flet@5fb221e

Detailed by jscs contributor here:
jscs-dev/node-jscs#1131

from standard.

https://github.com/BeagleLab/beagle/blob/master/js/views/graphModal.jsx

old n busted:

Error: Use JavaScript Standard Style (https://github.com/feross/standard)
../beagle/js/views/graphModal.jsx:2:4: Modal is defined but never used
../beagle/js/views/graphModal.jsx:3:4: PublicationList is defined but never used
../beagle/js/views/graphModal.jsx:7:18: Missing space before function parentheses.
../beagle/js/views/graphModal.jsx:9:7: Unexpected token <
../beagle/js/views/graphModal.jsx:26:0: Multiple blank lines not allowed.

new hotness:

node bin/cmd.js ../beagle/js/views/graphModal.jsx
Error: Use JavaScript Standard Style (https://github.com/feross/standard)
../beagle/js/views/graphModal.jsx:2:4: Modal is defined but never used
../beagle/js/views/graphModal.jsx:3:4: PublicationList is defined but never used
../beagle/js/views/graphModal.jsx:7:18: Missing space before function parentheses.
../beagle/js/views/graphModal.jsx:26:0: Multiple blank lines not allowed.

from standard.

Just published 3.1.0 with JSX and React support.

In order to get things like proper detection of used variables inside of JSX, I added eslint-plugin-react. Like with [email protected], let's start with all React rules enabled and relax them as necessary. Open a new issue if you think a rule is too aggressive.

@HenrikJoreteg, note: I noticed an eslint bug that crashes standard while trying to check your demo app. Here's the eslint issue: eslint/eslint#2060 This isn't related to JSX support :)

I think this issue can be closed now! 👍

from standard.

@Flet thanks for looking into this - looks like we were working in parallel :)

from standard.

woot! thanks @feross @Flet you're awesome.

from standard.

Excellent! Good call on the eslint-plugin-react include :)

from standard.

Just released 3.1.1 to automatically lint files that match **/*.jsx in addition to the default of **/*.js. #68

from standard.

@HenrikJoreteg The eslint issue I mentioned (eslint/eslint#2060) is fixed and released now :)

from standard.

just noticed that, thanks @feross :)

from standard.

Works for me! Thanks all!

from standard.

Works great for my React projects!

from standard.