Use amo eslint config

.eslintrc

@@ -1,8 +1,5 @@
 {
-  "env": {
-    "mocha": true,
-  },
-  "extends": "airbnb",
+  "extends": "amo",
   "globals": {
     "CLIENT_CONFIG": true,
     "dedent": true,
@@ -13,85 +10,6 @@
     "jest"
   ],
   "rules": {
-    "arrow-body-style": "off",
-    "arrow-parens": ["error", "always"],
-    // Beware about turning this rule back on. The rule encourages you to create
-    // static class methods on React components when they don't use `this`.
-    // However, it will not warn you if you access `this` in a static method
-    // accidentally (which would most likely be a mistake).
-    "class-methods-use-this": "off",
-    "comma-dangle": ['error', {
-      arrays: 'always-multiline',
-      objects: 'always-multiline',
-      imports: 'always-multiline',
-      exports: 'always-multiline',
-      functions: 'ignore',
-    }],
-    // 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 reports when you accidentally import/export an object twice.
-    "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"
-    }],
-    "import/prefer-default-export": ["off"],
-    // This ensures a new line after all import statements.
-    "import/newline-after-import": ["error"],
-    "jest/no-disabled-tests": "warn",
-    "jest/no-focused-tests": "error",
-    "jest/no-identical-title": "error",
-    "jest/valid-expect": "error",
-    "jsx-a11y/no-static-element-interactions": "off",
-    "no-console": "error",
-    // We use import/no-duplicates instead because it supports Flow types.
-    "no-duplicate-imports": "off",
-    "no-plusplus": "off",
-    "no-underscore-dangle": "off",
-    "space-before-function-paren": ["error", "never"],
-    // The airbnb default of this rule mainly encourages `shape` over `object`
-    // but there are too many bugs in the linter to use `shape` accurately.
-    'react/forbid-prop-types': "off",
-    "react/prefer-stateless-function": "off",
-    "react/jsx-indent-props": "off",
-    "react/jsx-closing-bracket-location": "off",
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "react/jsx-first-prop-new-line": "off",
-    "react/jsx-key": "error",
-    "react/no-string-refs": "error",
     // FIXME: Deprecate use of findDOMNode https://github.com/mozilla/addons-frontend/issues/968
     "react/no-find-dom-node": "off",
   },

package.json

@@ -115,7 +115,6 @@
     "deep-eql": "2.0.2",
     "dompurify": "0.9.0",
     "es6-error": "4.0.2",
-    "eslint-plugin-jest": "20.0.3",
     "express": "4.15.2",
     "extract-text-webpack-plugin": "2.1.0",
     "fastclick": "1.0.6",
@@ -184,11 +183,8 @@
     "deepcopy": "^0.6.3",
     "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^13.0.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-config-amo": "^0.0.6",
     "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-react": "^6.10.3",
     "fetch-mock": "^5.10.0",
     "file-loader": "^0.11.1",
     "flow-bin": "^0.46.0",

src/amo/components/Addon/index.js

@@ -67,6 +67,7 @@ export class AddonBase extends React.Component {
     location: PropTypes.object.isRequired,
     params: PropTypes.object.isRequired,
     resetThemePreview: PropTypes.func.isRequired,
+    // eslint-disable-next-line react/require-default-props
     themePreviewNode: PropTypes.element,
     installStatus: PropTypes.string.isRequired,
     toggleThemePreview: PropTypes.func.isRequired,
@@ -135,6 +136,7 @@ export class AddonBase extends React.Component {
           id="Addon-theme-header"
           data-browsertheme={getBrowserThemeData()}
           onClick={this.onClick}
+          role="presentation"
         >
           {installStatus !== ENABLED ? (
             <Button
@@ -171,8 +173,10 @@ export class AddonBase extends React.Component {
 
       footerPropName = 'footerLink';
       content = (
-        <Link className="Addon-all-reviews-link"
-          to={`/addon/${addon.slug}/reviews/`}>
+        <Link
+          className="Addon-all-reviews-link"
+          to={`/addon/${addon.slug}/reviews/`}
+        >
           {linkText}
         </Link>
       );
@@ -190,7 +194,8 @@ export class AddonBase extends React.Component {
       <Card
         header={i18n.gettext('Rate your experience')}
         className="Addon-overall-rating"
-        {...props}>
+        {...props}
+      >
         {addon ?
           <RatingManager
             addon={addon}
@@ -220,10 +225,12 @@ export class AddonBase extends React.Component {
     }
 
     return (
-      <ShowMoreCard header={i18n.sprintf(
-        i18n.gettext('About this %(addonType)s'), { addonType }
-      )} className="AddonDescription">
-        <div className="AddonDescription-contents"
+      <ShowMoreCard
+        header={i18n.sprintf(i18n.gettext('About this %(addonType)s'), { addonType })}
+        className="AddonDescription"
+      >
+        <div
+          className="AddonDescription-contents"
           ref={(ref) => { this.addonDescription = ref; }}
           {...descriptionProps}
         />

src/amo/components/AddonCompatibilityError/index.js

@@ -83,8 +83,10 @@ export class AddonCompatibilityErrorBase extends React.Component {
     }
 
     return (
-      <div className="AddonCompatibilityError"
-        dangerouslySetInnerHTML={sanitizeHTML(message, ['a'])} />
+      <div
+        className="AddonCompatibilityError"
+        dangerouslySetInnerHTML={sanitizeHTML(message, ['a'])}
+      />
     );
   }
 }

src/amo/components/AddonMeta.js

@@ -54,8 +54,12 @@ export class AddonMetaBase extends React.Component {
           <p className="AddonMeta-text AddonMeta-review-count">
             {reviewCount}
           </p>
-          <Rating className="AddonMeta-Rating" rating={averageRating}
-            readOnly styleName="small" />
+          <Rating
+            className="AddonMeta-Rating"
+            rating={averageRating}
+            readOnly
+            styleName="small"
+          />
         </div>
       </div>
     );

src/amo/components/AddonMoreInfo.js

@@ -74,8 +74,10 @@ export class AddonMoreInfoBase extends React.Component {
           ) : null}
           {addon.current_version.license ? (
             <dd>
-              <a href={addon.current_version.license.url}
-                ref={(ref) => { this.licenseLink = ref; }}>
+              <a
+                href={addon.current_version.license.url}
+                ref={(ref) => { this.licenseLink = ref; }}
+              >
                 {addon.current_version.license.name}</a>
             </dd>
           ) : null}
@@ -84,8 +86,10 @@ export class AddonMoreInfoBase extends React.Component {
           ) : null}
           {addon.has_privacy_policy ? (
             <dd>
-              <Link href={`/addon/${addon.slug}/privacy/`}
-                ref={(ref) => { this.privacyPolicyLink = ref; }}>
+              <Link
+                href={`/addon/${addon.slug}/privacy/`}
+                ref={(ref) => { this.privacyPolicyLink = ref; }}
+              >
                 {i18n.gettext('Read the privacy policy for this add-on')}
               </Link>
             </dd>
@@ -95,8 +99,10 @@ export class AddonMoreInfoBase extends React.Component {
           ) : null}
           {addon.has_eula ? (
             <dd>
-              <Link href={`/addon/${addon.slug}/eula/`}
-                ref={(ref) => { this.eulaLink = ref; }}>
+              <Link
+                href={`/addon/${addon.slug}/eula/`}
+                ref={(ref) => { this.eulaLink = ref; }}
+              >
                 {i18n.gettext('Read the license agreement for this add-on')}
               </Link>
             </dd>

src/amo/components/AddonReview.js

@@ -178,7 +178,8 @@ export class AddonReviewBase extends React.Component {
           </div>
           <input
             className="AddonReview-submit"
-            type="submit" value={i18n.gettext('Submit review')}
+            type="submit"
+            value={i18n.gettext('Submit review')}
           />
         </form>
       </OverlayCard>

src/amo/components/AddonsCard/index.js

@@ -24,9 +24,11 @@ export default class AddonsCard extends React.Component {
     const { addons, children, className, type, ...otherProps } = this.props;
 
     return (
-      <CardList {...otherProps}
+      <CardList
+        {...otherProps}
         className={classNames('AddonsCard', `AddonsCard--${type}`, className)}
-        ref={(ref) => { this.cardContainer = ref; }}>
+        ref={(ref) => { this.cardContainer = ref; }}
+      >
         {children}
         {addons && addons.length ? (
           <ul className="AddonsCard-list">

src/amo/components/App/index.js

@@ -211,8 +211,10 @@ export class AppBase extends React.Component {
             {children}
           </ErrorPage>
         </div>
-        <FooterComponent handleViewDesktop={this.onViewDesktop}
-          location={location} />
+        <FooterComponent
+          handleViewDesktop={this.onViewDesktop}
+          location={location}
+        />
       </div>
     );
   }

src/amo/components/Categories.js

@@ -78,15 +78,20 @@ export class CategoriesBase extends React.Component {
           className="Categories-list"
           ref={(ref) => { this.categories = ref; }}
         >
-          {categories.map((category, index) => (
-            <li className="Categories-list-item" key={`category-${index}`}>
+          {categories.map((category) => (
+            <li
+              className="Categories-list-item"
+              key={category.name}
+            >
               {loading ? (
                 <span className="Categories-link">
                   <LoadingText range={25} />
                 </span>
               ) : (
-                <Link className="Categories-link"
-                  to={`/${visibleAddonType(addonType)}/${category.slug}/`}>
+                <Link
+                  className="Categories-link"
+                  to={`/${visibleAddonType(addonType)}/${category.slug}/`}
+                >
                   {category.name}
                 </Link>
               )}

src/amo/components/CategoriesHeader/index.js

@@ -36,6 +36,7 @@ export class CategoriesHeaderBase extends React.Component {
   props: CategoriesHeaderProps;
 
   render() {
+    /* eslint-disable react/no-array-index-key */
     const { addonType, error, loading, i18n } = this.props;
     const categories = this.props.categories[addonType] ?
       Object.values(this.props.categories[addonType]) : [];
@@ -76,11 +77,8 @@ export class CategoriesHeaderBase extends React.Component {
           </div>
         :
           <ul className="CategoriesHeader-list">
-            {categories.map((category, index) => (
-              <li
-                className="CategoriesHeader-item"
-                key={`category-${index}`}
-              >
+            {categories.map((category) => (
+              <li className="CategoriesHeader-item" key={category.name}>
                 <Button
                   className={`CategoriesHeader-link Button--action
                     Button--small

src/amo/components/ErrorPage/NotAuthorized/index.js

@@ -30,8 +30,10 @@ export class NotAuthorizedBase extends React.Component {
     /* eslint-disable react/no-danger */
     return (
       <NestedStatus code={401}>
-        <Card className="ErrorPage NotAuthorized"
-          header={i18n.gettext('Not Authorized')}>
+        <Card
+          className="ErrorPage NotAuthorized"
+          header={i18n.gettext('Not Authorized')}
+        >
           <p>
             {i18n.gettext(`
               Sorry, but you aren't authorized to access this page. If you

src/amo/components/ErrorPage/NotFound/index.js

@@ -29,8 +29,10 @@ export class NotFoundBase extends React.Component {
     /* eslint-disable react/no-danger */
     return (
       <NestedStatus code={404}>
-        <Card className="ErrorPage NotFound"
-          header={i18n.gettext('Page not found')}>
+        <Card
+          className="ErrorPage NotFound"
+          header={i18n.gettext('Page not found')}
+        >
           <p>
             {i18n.gettext(`
               Sorry, but we can't find anything at the address you entered.

src/amo/components/ErrorPage/ServerError/index.js

@@ -28,8 +28,10 @@ export class ServerErrorBase extends React.Component {
     /* eslint-disable react/no-danger */
     return (
       <NestedStatus code={500}>
-        <Card className="ErrorPage ServerError"
-          header={i18n.gettext('Server Error')}>
+        <Card
+          className="ErrorPage ServerError"
+          header={i18n.gettext('Server Error')}
+        >
           <p>
             {i18n.gettext(`
               Sorry, but there was an error with our server and we couldn't

src/amo/components/FeaturedAddons/index.js

@@ -46,8 +46,12 @@ export class FeaturedAddonsBase extends React.Component {
         <h2 className="FeaturedAddons-header">
           {this.headerForAddonType(addonType)}
         </h2>
-        <SearchResults count={results.length} hasSearchParams={hasSearchParams}
-          loading={loading} results={results} />
+        <SearchResults
+          count={results.length}
+          hasSearchParams={hasSearchParams}
+          loading={loading}
+          results={results}
+        />
       </div>
     );
   }