Use eslint to catch import mistakes and style nits

Author: kumar303

.eslintrc

@@ -13,12 +13,72 @@
   "parser": "babel-eslint",
   "rules": {
     "arrow-parens": ["error", "always"],
-    "import/no-unresolved": "off",
+    // This makes sure imported modules exist.
+    "import/no-unresolved": ["error"],
+    // This makes sure imported names exist.
+    "import/named": ["error"],
+    // This will catch accidental default imports when no default is defined.
+    "import/default": ["error"],
+    // This makes sure `*' imports are dereferenced to real exports.
+    "import/namespace": ["error"],
+    // This catches any export mistakes.
+    "import/export": ["error"],
+    // This catches default names that conflict with actual exported names.
+    // For example, this was probably a typo:
+    //   import foo from 'bar';
+    // that should be corrected as:
+    //   import { foo } from 'bar';
+    "import/no-named-as-default": ["error"],
+    // This catches possible typos like trying to access a real export on a
+    // default import.
+    "import/no-named-as-default-member": ["error"],
+    // This prevents exporting a mutable variable.
+    "import/no-mutable-exports": ["error"],
+    // This makes sure package.json defines dev vs. prod dependencies correctly.
+    "import/no-extraneous-dependencies": ["error", {
+      // The following are not allowed to be imported. See .eslintrc in other
+      // directories (like ./test) for where this gets overidden.
+      "devDependencies": false, "optionalDependencies": false, "peerDependencies": false
+    }],
+    // This ensures imports are at the top of the file.
+    "import/imports-first": ["error"],
+    // This catches duplicate exports.
+    "import/no-duplicates": ["error"],
+    // This ensures import statements never provide a file extension in the path.
+    "import/extensions": ["error", "never"],
+    // This ensures imports are organized by type and that groups are separated
+    // by a new line.
+    "import/order": ["error", {
+      "groups": [
+        "builtin", "external", "internal", ["parent", "sibling"], "index"
+      ],
+      "newlines-between": "always"
+    }],
+    // This ensures a new line after all import statements.
+    "import/newline-after-import": ["error"],
     "no-underscore-dangle": "off",
     "space-before-function-paren": ["error", "never"],
     "react/prefer-stateless-function": "off",
     "react/jsx-indent-props": "off",
     "react/jsx-closing-bracket-location": "off",
     "react/jsx-first-prop-new-line": "off"
+  },
+  "settings": {
+    "import/ignore": [
+      // Because of CommonJS incompatibility, we can't
+      // check for bad imports in node_modules.
+      "node_modules",
+      // Ignore non-JS imports.
+      "\\.scss$",
+      "\\.jpg$",
+      "\\.mp4$",
+      "\\.webm$"
+    ],
+    "import/resolver": {
+      "node": {
+        // This adds ./src for relative imports.
+        "moduleDirectory": ["node_modules", "src"]
+      }
+    }
   }
 }

bin/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", {
+      // Allow dev-dependencies in this directory.
+      "devDependencies": true
+    }],
+  }
+}

bin/build-checks.js

@@ -2,7 +2,6 @@
 /* eslint-disable global-require, no-console */
 
 const chalk = require('chalk');
-
 require('babel-register');
 const config = require('config');
 

bin/server.js

@@ -2,7 +2,6 @@
 /* eslint-disable global-require, no-console */
 
 const chalk = require('chalk');
-
 require('babel-register');
 const config = require('config');
 

bin/webpack-dev-server.js

@@ -3,14 +3,13 @@
 /* eslint-disable strict, no-console */
 
 require('babel-register');
-
 const Express = require('express');
+const config = require('config');
 const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpackHotMiddleware = require('webpack-hot-middleware');
-const webpackDevConfig = require('webpack.dev.config.babel').default;
 
-const config = require('config');
+const webpackDevConfig = require('../webpack.dev.config.babel').default;
 
 const host = config.get('webpackServerHost');
 const port = config.get('webpackServerPort');

karma.conf.js

@@ -1,18 +1,20 @@
 // Karma configuration
-/* eslint-disable max-len, no-console, strict */
+/* eslint-disable max-len, no-console, strict, import/no-extraneous-dependencies */
 'use strict';
 
 require('babel-register');
 
 const fs = require('fs');
 
-const babelrc = fs.readFileSync('./.babelrc');
-const babelQuery = JSON.parse(babelrc);
 const webpack = require('webpack');
-const webpackConfigProd = require('./webpack.prod.config.babel').default;
 const config = require('config');
-const getClientConfig = require('src/core/utils').getClientConfig;
+
+const getClientConfig = require('./src/core/utils').getClientConfig;
+const webpackConfigProd = require('./webpack.prod.config.babel').default;
+
 const clientConfig = getClientConfig(config);
+const babelrc = fs.readFileSync('./.babelrc');
+const babelQuery = JSON.parse(babelrc);
 
 const coverageReporters = [{
   type: 'text-summary',

package.json

@@ -138,6 +138,7 @@
   "homepage": "https://github.com/mozillla/addons-frontend#readme",
   "dependencies": {
     "babel-plugin-dedent": "2.0.0",
+    "babel-polyfill": "6.13.0",
     "better-npm-run": "0.0.11",
     "bunyan": "1.8.1",
     "camelcase": "3.0.0",
@@ -156,6 +157,7 @@
     "react": "15.3.0",
     "react-addons-css-transition-group": "15.3.1",
     "react-cookie": "0.4.8",
+    "react-dom": "15.3.1",
     "react-helmet": "3.1.0",
     "react-onclickoutside": "5.3.3",
     "react-redux": "4.4.5",
@@ -165,7 +167,8 @@
     "redux-logger": "2.6.1",
     "serialize-javascript": "1.3.0",
     "url": "0.11.0",
-    "url-loader": "0.5.7"
+    "url-loader": "0.5.7",
+    "webpack-isomorphic-tools": "2.5.7"
   },
   "devDependencies": {
     "autoprefixer": "6.4.0",
@@ -178,7 +181,6 @@
     "babel-plugin-transform-class-properties": "6.11.5",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-plugin-transform-object-rest-spread": "6.8.0",
-    "babel-polyfill": "6.13.0",
     "babel-preset-es2015": "6.13.2",
     "babel-preset-react": "6.11.1",
     "babel-preset-stage-2": "6.13.0",
@@ -213,7 +215,6 @@
     "po2json": "0.4.2",
     "postcss-loader": "0.10.1",
     "react-addons-test-utils": "15.3.1",
-    "react-dom": "15.3.1",
     "react-hot-loader": "1.3.0",
     "react-transform-hmr": "1.0.4",
     "redux-devtools": "3.3.1",
@@ -233,7 +234,6 @@
     "webpack": "1.13.2",
     "webpack-dev-middleware": "1.6.1",
     "webpack-dev-server": "1.14.1",
-    "webpack-hot-middleware": "2.12.2",
-    "webpack-isomorphic-tools": "2.5.7"
+    "webpack-hot-middleware": "2.12.2"
   }
 }

src/amo/client.js

@@ -1,8 +1,9 @@
 import makeClient from 'core/client/base';
-import routes from './routes';
-import createStore from './store';
 
 // Initialize the tracking.
 import 'core/tracking';
 
+import routes from './routes';
+import createStore from './store';
+
 makeClient(routes, createStore);

src/amo/components/AddonMeta.js

@@ -4,7 +4,7 @@ import translate from 'core/i18n/translate';
 
 import 'amo/css/AddonMeta.scss';
 
-export class AddonMeta extends React.Component {
+export class AddonMetaBase extends React.Component {
   static propTypes = {
     i18n: PropTypes.object,
   }
@@ -34,4 +34,4 @@ export class AddonMeta extends React.Component {
   }
 }
 
-export default translate({ withRef: true })(AddonMeta);
+export default translate({ withRef: true })(AddonMetaBase);

src/amo/components/LikeButton.js

@@ -4,7 +4,7 @@ import translate from 'core/i18n/translate';
 
 import 'amo/css/LikeButton.scss';
 
-export class LikeButton extends React.Component {
+export class LikeButtonBase extends React.Component {
   static propTypes = {
     i18n: PropTypes.object,
   }
@@ -21,4 +21,4 @@ export class LikeButton extends React.Component {
   }
 }
 
-export default translate({ withRef: true })(LikeButton);
+export default translate({ withRef: true })(LikeButtonBase);

src/amo/components/ScreenShots.js

@@ -5,7 +5,7 @@ import translate from 'core/i18n/translate';
 import 'amo/css/ScreenShots.scss';
 
 
-export class ScreenShots extends React.Component {
+export class ScreenShotsBase extends React.Component {
   static propTypes = {
     i18n: PropTypes.object,
   }
@@ -36,4 +36,4 @@ export class ScreenShots extends React.Component {
   }
 }
 
-export default translate({ withRef: true })(ScreenShots);
+export default translate({ withRef: true })(ScreenShotsBase);

src/amo/components/SearchBox.js

@@ -5,7 +5,7 @@ import translate from 'core/i18n/translate';
 import 'amo/css/SearchBox.scss';
 
 
-export class SearchBox extends React.Component {
+export class SearchBoxBase extends React.Component {
   static propTypes = {
     i18n: PropTypes.object,
   }
@@ -22,4 +22,4 @@ export class SearchBox extends React.Component {
   }
 }
 
-export default translate({ withRef: true })(SearchBox);
+export default translate({ withRef: true })(SearchBoxBase);

src/amo/containers/App.js

@@ -6,7 +6,7 @@ import 'amo/css/App.scss';
 import translate from 'core/i18n/translate';
 
 
-export class App extends React.Component {
+export class AppBase extends React.Component {
   static propTypes = {
     children: PropTypes.node,
     i18n: PropTypes.object.isRequired,
@@ -25,4 +25,4 @@ export class App extends React.Component {
   }
 }
 
-export default translate({ withRef: true })(App);
+export default translate({ withRef: true })(AppBase);

src/amo/containers/DetailPage.js

@@ -7,7 +7,7 @@ import AddonDetail from 'amo/components/AddonDetail';
 import translate from 'core/i18n/translate';
 import { loadAddonIfNeeded } from 'core/utils';
 
-export class DetailPage extends React.Component {
+export class DetailPageBase extends React.Component {
   static propTypes = {
     addon: PropTypes.object,
   }
@@ -36,4 +36,4 @@ export default compose(
   }]),
   connect(mapStateToProps),
   translate({ withRef: true }),
-)(DetailPage);
+)(DetailPageBase);

src/amo/store.js

@@ -1,7 +1,7 @@
 import { createStore as _createStore, combineReducers } from 'redux';
 import { reducer as reduxAsyncConnect } from 'redux-async-connect';
-import { middleware } from 'core/store';
 
+import { middleware } from 'core/store';
 import addons from 'core/reducers/addons';
 import api from 'core/reducers/api';
 

src/core/api/index.js

@@ -1,9 +1,8 @@
-import { Schema, arrayOf, normalize } from 'normalizr';
 import url from 'url';
 
-import config from 'config';
-
 import 'isomorphic-fetch';
+import { Schema, arrayOf, normalize } from 'normalizr';
+import config from 'config';
 
 const API_BASE = `${config.get('apiHost')}${config.get('apiPath')}`;
 

src/core/client/base.js

@@ -1,15 +1,14 @@
 import 'babel-polyfill';
-import React from 'react';
-
 import config from 'config';
+import Jed from 'jed';
+import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import { ReduxAsyncConnect } from 'redux-async-connect';
+
 import { langToLocale, sanitizeLanguage } from 'core/i18n/utils';
 import I18nProvider from 'core/i18n/Provider';
-import Jed from 'jed';
-
 import log from 'core/logger';
 
 

src/core/components/InstallButton/index.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
-import translate from 'core/i18n/translate';
 
+import translate from 'core/i18n/translate';
 import {
   DOWNLOADING,
   DISABLED,
@@ -19,7 +19,7 @@ import { getThemeData } from 'disco/themePreview';
 
 import './InstallButton.scss';
 
-export class InstallButton extends React.Component {
+export class InstallButtonBase extends React.Component {
   static propTypes = {
     downloadProgress: PropTypes.number,
     enable: PropTypes.func,
@@ -122,4 +122,4 @@ export class InstallButton extends React.Component {
   }
 }
 
-export default translate()(InstallButton);
+export default translate()(InstallButtonBase);

src/core/components/NotFound.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { gettext as _ } from 'core/utils';
 
 export default class NotFound extends React.Component {

src/core/containers/HandleLogin/index.js

@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react';
 import cookie from 'react-cookie';
 import { connect } from 'react-redux';
-
 import config from 'config';
+
 import { setJWT } from 'core/actions';
 import { login } from 'core/api';
 import LoginPage from 'core/components/LoginPage';

src/core/containers/LoginRequired/index.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
+
 import LoginPage from 'core/components/LoginPage';
 
 export function mapStateToProps(state) {
@@ -9,7 +10,7 @@ export function mapStateToProps(state) {
 }
 
 // This class is exported for testing outside of redux.
-export class LoginRequired extends React.Component {
+export class LoginRequiredBase extends React.Component {
   static propTypes = {
     authenticated: PropTypes.bool.isRequired,
     children: PropTypes.node,
@@ -24,4 +25,4 @@ export class LoginRequired extends React.Component {
   }
 }
 
-export default connect(mapStateToProps)(LoginRequired);
+export default connect(mapStateToProps)(LoginRequiredBase);