Configure ESLint

Author: willdurand

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "extends": [
+    "amo",
+    "plugin:amo/recommended",
+    "plugin:jest/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "globals": {
+    "document": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    // TS configuration for the `indent` rule.
+    // https://github.com/typescript-eslint/typescript-eslint/blob/5b0b3d9edbcb3ab588a34c431037d9deece30824/packages/eslint-plugin/docs/rules/indent.md#options
+    "indent": "off",
+    "@typescript-eslint/indent": ["error", 2],
+      "import/no-extraneous-dependencies": ["error", {
+        "devDependencies": ["**/*.test.*"]
+      }
+    ],
+    // We use `.tsx` instead of `.jsx` for files with JSX inside.
+    "react/jsx-filename-extension": ["error", {
+        "extensions": [".tsx"]
+      }
+    ],
+    // We decided to prefer types over interfaces.
+    "@typescript-eslint/prefer-interface": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".ts", ".tsx"]
+      }
+    }
+  }
+}

.travis.yml

@@ -40,3 +40,6 @@ jobs:
     - name: prettier
       <<: *node-prod
       script: yarn prettier-ci
+    - name: linter (node@production)
+      <<: *node-prod
+      script: yarn lint

README.md

@@ -45,6 +45,14 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 
 This runs the [eject](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) command. Hopefully we won't ever need this 😭
 
+###  `yarn eslint`
+
+This runs [ESLint][] to discover problems within our codebase without executing it and it enforces some patterns and practices.
+
+###  `yarn lint`
+
+This runs all the _lint_ commands at once.
+
 ### `yarn prettier`
 
 This runs [Prettier][] to automatically format the entire codebase.
@@ -83,3 +91,4 @@ To learn React, check out the [React documentation](https://reactjs.org/).
 
 [prettier]: https://prettier.io/
 [typescript]: https://www.typescriptlang.org/
+[eslint]: https://eslint.org/

package.json

@@ -25,17 +25,24 @@
   "devDependencies": {
     "@types/enzyme": "^3.1.15",
     "@types/enzyme-adapter-react-16": "^1.0.3",
+    "@typescript-eslint/eslint-plugin": "^1.1.1",
+    "@typescript-eslint/parser": "^1.1.1",
     "codecov": "^3.1.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
-    "jest-enzyme": "7.0.1",
+    "eslint": "^5.12.1",
+    "eslint-config-amo": "^1.10.0",
+    "eslint-plugin-amo": "^1.9.1",
+    "jest-enzyme": "^7.0.1",
     "prettier": "1.16.1",
     "pretty-quick": "^1.8.1",
     "type-coverage": "^1.6.2"
   },
   "scripts": {
     "build": "react-scripts build",
     "eject": "react-scripts eject",
+    "eslint": "eslint --ext .js --ext tsx src/",
+    "lint": "yarn eslint",
     "prettier": "prettier --write '**'",
     "prettier-ci": "prettier --list-different '**' || (echo '\n\nThis failure means you did not run `yarn prettier-dev` before committing\n\n' && exit 1)",
     "prettier-dev": "pretty-quick --branch master",
@@ -45,9 +52,6 @@
     "type-coverage": "type-coverage",
     "typecheck": "tsc"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": [
     ">0.2%",
     "not dead",

src/components/App/index.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import App from '.';
 import styles from './styles.module.scss';
 import configureStore from '../../configureStore';
 
+import App from '.';
+
 it('renders without crashing', () => {
   const store = configureStore();
   // TODO: Use shallowUntilTarget()

src/components/App/index.tsx

@@ -34,6 +34,7 @@ class App extends React.Component<
             <button
               onClick={this.handleToggleClick}
               style={{ padding: '32px' }}
+              type="button"
             >
               {toggledOn ? 'OFF' : 'ON'}
             </button>

src/configureStore.tsx

@@ -1,5 +1,13 @@
-import { Dispatch, Action, AnyAction } from 'redux';
-import { Store, applyMiddleware, combineReducers, createStore } from 'redux';
+import {
+  Action,
+  AnyAction,
+  Dispatch,
+  Reducer,
+  Store,
+  applyMiddleware,
+  combineReducers,
+  createStore,
+} from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import { createLogger } from 'redux-logger';
 
@@ -13,7 +21,7 @@ export type ApplicationState = {
   example: ExampleState;
 };
 
-const createRootReducer = () => {
+const createRootReducer = (): Reducer<ApplicationState> => {
   return combineReducers<ApplicationState>({ example });
 };
 

src/index.tsx

@@ -1,3 +1,4 @@
+/* global: document */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';

src/reducers/example.tsx

@@ -5,7 +5,7 @@ type TogglePayload = {};
 
 export const actions = {
   toggle: createAction('TOGGLE', (resolve) => {
-    return () => resolve({} as TogglePayload);
+    return () => resolve({});
   }),
 };