now supporting react / jsx

Author: glebec

README.md

@@ -48,6 +48,22 @@ Any [rules](http://eslint.org/docs/rules/) added to your global or local `.eslin
 
 This turns on enforcing the use of semicolons, a rule which is silenced by default in the current version of the `eslint-config-fullstack` package.
 
+## React / JSX
+
+With version 2, `eslint-config-fullstack` now has preliminary support for React/JSX projects. Note that you must manually install the peer dependency `eslint-plugin-react`:
+
+```sh
+npm install --save eslint-plugin-react
+```
+
+Then change your `.eslintrc.json` to extend the react sub-config:
+
+```json
+{
+  "extends": "fullstack/react"
+}
+```
+
 ## Background
 
 The [ESLint](http://http://eslint.org/) linting system is a popular one for its support of ES6 syntax, pluggable [rules](http://eslint.org/docs/rules/), automatic rule names in warning messages, and [shareable](http://eslint.org/docs/developer-guide/shareable-configs) / [extendable](http://eslint.org/docs/user-guide/configuring#extending-configuration-files) config files.

package.json

@@ -37,6 +37,11 @@
   "devDependencies": {
     "chai": "^3.5.0",
     "eslint": "~3.9.0",
+    "eslint-plugin-react": "^6.7.1",
     "mocha": "^3.0.0"
+  },
+  "peerDependencies": {
+    "eslint": ">=3.9.0",
+    "eslint-plugin-react": "^6.7.1"
   }
 }

react.js

@@ -0,0 +1,84 @@
+'use strict';
+
+// Specifies additional options to use in React / React-JSX projects.
+// Note that you need to manually install `eslint-plugin-react` as a peer
+// dependency (see https://goo.gl/I4AYlb for more details).
+
+// To opt-in, use `"extends": "fullstack/react"`.
+
+module.exports = {
+  extends: [
+    require.resolve('./index'), // base config
+    'plugin:react/recommended' // overridden below, unless this package falls behind plugin
+  ],
+  plugins: [
+    'react'
+  ],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: { // https://github.com/yannickcr/eslint-plugin-react
+
+    // general React rules
+
+    'react/display-name': 1, // Prevent missing displayName in a React component definition
+    'react/forbid-component-props': 0, // Forbid certain props on Components
+    'react/forbid-prop-types': 0, // Forbid certain propTypes
+    'react/no-children-prop': 0, // Prevent passing children as props
+    'react/no-danger': 0, // Prevent usage of dangerous JSX properties
+    'react/no-danger-with-children': 0, // Prevent problem with children and props.dangerouslySetInnerHTML
+    'react/no-deprecated': 1, // Prevent usage of deprecated methods
+    'react/no-did-mount-set-state': 0, // Prevent usage of setState in componentDidMount
+    'react/no-did-update-set-state': 0, // Prevent usage of setState in componentDidUpdate
+    'react/no-direct-mutation-state': 1, // Prevent direct mutation of this.state
+    'react/no-find-dom-node': 1, // Prevent usage of findDOMNode
+    'react/no-is-mounted': 1, // Prevent usage of isMounted
+    'react/no-multi-comp': 0, // Prevent multiple component definition per file
+    'react/no-render-return-value': 1, // Prevent usage of the return value of React.render
+    'react/no-set-state': 0, // Prevent usage of setState
+    'react/no-string-refs': 0, // Prevent using string references in ref attribute.
+    'react/no-unescaped-entities': 0, // Prevent invalid characters from appearing in markup
+    'react/no-unknown-property': 1, // Prevent usage of unknown DOM property (fixable)
+    'react/no-unused-prop-types': 0, // Prevent definitions of unused prop types
+    'react/prefer-es6-class': 0, // Enforce ES5 or ES6 class for React Components
+    'react/prefer-stateless-function': 0, // Enforce stateless React Components to be written as a pure function
+    'react/prop-types': 1, // Prevent missing props validation in a React component definition
+    'react/react-in-jsx-scope': 1, // Prevent missing React when using JSX
+    'react/require-optimization': 0, // Enforce React components to have a shouldComponentUpdate method
+    'react/require-render-return': 1, // Enforce ES5 or ES6 class for returning value in render function
+    'react/self-closing-comp': 0, // Prevent extra closing tags for components without children (fixable)
+    'react/sort-comp': 0, // Enforce component methods order
+    'react/sort-prop-types': 0, // Enforce propTypes declarations alphabetical sorting
+    'react/style-prop-object': 0, // Enforce style prop value being an object
+
+    // JSX-specific rules
+
+    'react/jsx-boolean-value': 0, // Enforce boolean attributes notation in JSX (fixable)
+    'react/jsx-closing-bracket-location': 0, // Validate closing bracket location in JSX (fixable)
+    'react/jsx-curly-spacing': 0, // Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
+    'react/jsx-equals-spacing': 0, // Enforce or disallow spaces around equal signs in JSX attributes (fixable)
+    'react/jsx-filename-extension': 0, // Restrict file extensions that may contain JSX
+    'react/jsx-first-prop-new-line': 0, // Enforce position of the first prop in JSX (fixable)
+    'react/jsx-handler-names': 0, // Enforce event handler naming conventions in JSX
+    'react/jsx-indent': 0, // Validate JSX indentation (fixable)
+    'react/jsx-indent-props': 0, // Validate props indentation in JSX (fixable)
+    'react/jsx-key': 0, // Validate JSX has key prop when in array or iterator
+    'react/jsx-max-props-per-line': 0, // Limit maximum of props on a single line in JSX
+    'react/jsx-no-bind': 0, // Prevent usage of .bind() and arrow functions in JSX props
+    'react/jsx-no-comment-textnodes': 0, // Prevent comments from being inserted as text nodes
+    'react/jsx-no-duplicate-props': 1, // Prevent duplicate props in JSX
+    'react/jsx-no-literals': 0, // Prevent usage of unwrapped JSX strings
+    'react/jsx-no-target-blank': 0, // Prevent usage of unsafe target='_blank'
+    'react/jsx-no-undef': 1, // Disallow undeclared variables in JSX
+    'react/jsx-pascal-case': 0, // Enforce PascalCase for user-defined JSX components
+    'react/jsx-sort-props': 0, // Enforce props alphabetical sorting
+    'react/jsx-space-before-closing': 0, // Validate spacing before closing bracket in JSX (fixable)
+    'react/jsx-tag-spacing': 0, // Validate whitespace in and around the JSX opening and closing brackets (fixable)
+    'react/jsx-uses-react': 1, // Prevent React to be incorrectly marked as unused
+    'react/jsx-uses-vars': 1, // Prevent variables used in JSX to be incorrectly marked as unused
+    'react/jsx-wrap-multilines': 0, // Prevent missing parentheses around multilines JSX (fixable)
+  }
+};

test/test.js

@@ -1,12 +1,16 @@
 /* eslint-disable global-require, no-unused-expressions */
-var linter = require('eslint').linter;
+var path = require('path');
 var expect = require('chai').expect;
+var CLIEngine = require('eslint').CLIEngine;
 
 describe('eslint-config-fullstack', function () {
 
-  var eConfigFs;
+  var eConfigFs, cli;
   before('load the module', function () {
     eConfigFs = require('../index.js');
+    cli = new CLIEngine({
+      configFile: path.join(__dirname, '../index.js')
+    });
   });
 
   it('exports an object', function () {
@@ -22,15 +26,54 @@ describe('eslint-config-fullstack', function () {
   });
 
   it('works with eslint', function () {
-    var messages = linter.verify('var x = 1;', eConfigFs);
-    expect(messages).to.be.an('array');
-    if (messages[0]) expect(messages[0].fatal).not.to.be.true;
+    var report = cli.executeOnText('var x = 1;');
+    expect(report.errorCount).to.equal(0);
   });
 
   it('has a parsing error for invalid source', function () {
-    var messages = linter.verify('if;', eConfigFs);
-    expect(messages).to.be.an('array');
-    expect(messages[0].fatal).to.be.true;
+    var report = cli.executeOnText('if;');
+    expect(report.errorCount).to.equal(1);
+  });
+
+  it('flags broken rules from the base config', function () {
+    var report = cli.executeOnText('var x = typeof 5 === "_oops_"');
+    expect(report.errorCount).to.equal(1);
+  });
+
+});
+
+describe('eslint-config-fullstack/react', function () {
+
+  var cli;
+  before('load the module', function () {
+    cli = new CLIEngine({
+      configFile: path.join(__dirname, '../react.js')
+    });
+  });
+
+  it('works with eslint', function () {
+    var report = cli.executeOnText('var x = 1;');
+    expect(report.errorCount).to.equal(0);
+  });
+
+  it('has a parsing error for invalid source', function () {
+    var report = cli.executeOnText('if;');
+    expect(report.errorCount).to.equal(1);
+  });
+
+  it('flags broken rules from the base config', function () {
+    var report = cli.executeOnText('var x = typeof 5 === "_oops_"');
+    expect(report.errorCount).to.equal(1);
+  });
+
+  it('handles ES6 export and jsx', function () {
+    var report = cli.executeOnText('import React from "react"; export default function Bar () { return (<div>qux</div>); } Bar.displayName = "Bar"\n');
+    expect(report.errorCount).to.equal(0);
+  });
+
+  it('flags broken jsx', function () {
+    var report = cli.executeOnText('export default ({ foo }) => (<divs>{ foo }</div>);');
+    expect(report.errorCount).to.equal(1);
   });
 
 });