Use JSCS with .jsx files and React

README.md

How to use JSCS with .jsx files (and React)

Install JSCS and Esprima-FB:

  npm install jscs esprima-fb --save-dev 

In your .jscsrc use esprima-fb as the custom esprima option and include .jsx as a file extension. You will also need to choose a preset so there are rules to check against. If you'd rather, you can also use the --auto-configure option.

  {
    "preset": "airbnb",
    "esprima": "esprima-fb",
    "fileExtensions": [".js", ".jsx"]
  }

Now you should be able run any jscs command and have jsx files included. Happy hunting!

---

Additional Notes

Excluding Failing Files

If you want to be able to get up and running quickly and don't have time to fix all of the style violations, you can just exclude all of the offending files (you'll fix it later, right?). A quick hack to the reporter option will return a list of failing files that can be copied and pasted into the excludeFiles field in your .jscsrc.

Take a look at exclude_files_reporter.js in this gist. Copy the contents and temporarily paste it into one of the existing reporters, like /node_modules/jscs/lib/reporters/inline.js and then run your jscs command with the --reporter=inline flag (or whichever reporter file you edited). Don't forget to revert the contents!

You can also save it as its own reporter and then simply pass the file path to the reporter option --reporter=PATH/TO/REPORTER.

This reporter will print out a list of double quoted, comma separated files that can now be pasted into your .jscrc file as an array to the fileExtensions option. Don't forget to remove the last comma in the list!

"excludeFiles": [
  "path/to/failing/file/1",
  "path/to/failing/file/2"
]

Note: If you don't have any failing tests, nothing will be outputted to the console.

⚠️ Potential Issues

• Can't find JSCS? Try using: ./node_modules/.bin/jscs
• Can't find esprima-fb? Try replacing "esprima-fb" with "./node_modules/esprima-fb" or running jscs as ./node_modules/.bin/jscs
• For more background read the JSCS documentation and this node-jscs pull request

exclude_files_reporter.js

var util = require('util');
/**
 * @param {Errors[]} errorsCollection
 */
module.exports = function(errorsCollection) {
    var errorCount = 0;
    /**
     * Formatting every error set.
     */
    errorsCollection.forEach(function(errors) {
        var file = errors.getFilename();
        if (!errors.isEmpty()) {
            console.log(util.format('"%s",', file));
        }
    });
};