feat(lint): add prettier and eslint

Author: sonicoder86

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "plugins": ["prettier"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2019,
+    "sourceType": "module"
+  },
+  "extends": ["airbnb"],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "rules": {
+    "import/first": 0,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": 0,
+    "object-curly-newline": ["error", { "consistent": true }],
+    "no-return-assign": 0,
+    "no-underscore-dangle": 0,
+    "react/jsx-filename-extension": 0,
+    "react/prefer-stateless-function": 0,
+    "react/forbid-prop-types": 0,
+    "react/destructuring-assignment": 0,
+    "react/state-in-constructor": 0,
+    "react/button-has-type": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/control-has-associated-label": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "max-len": ["error", { "code": 120 }],
+    "comma-dangle": ["error", "never"],
+    "arrow-parens": ["error", "as-needed"]
+  }
+}

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "bracketSpacing": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "printWidth": 120
+}

README.md

@@ -19,6 +19,18 @@ The well-known TodoMVC built with React Hooks and Redux in a structured and test
 - [PropTypes](https://github.com/facebook/prop-types)
 - [Classnames](https://github.com/JedWatson/classnames)
 
+## Usage
+
+After installing the dependencies the following NPM scripts become available:
+
+- `start`: starts the application in development mode on [http://localhost:9300](http://localhost:9300)
+- `build`: bundles the application for production into the `build` folder
+- `test`: runs unit and E2E tests
+- `test:unit`: runs unit tests with [Jest](https://jestjs.io/) in the `src` folder suffixed with `*.spec.js`
+- `test:e2e`: runs E2E tests with [Cypress](https://www.cypress.io/) in the `tests/e2e` folder suffixed with `*.spec.js`
+- `format`: formats the code with [Prettier](https://prettier.io/) within the `src` folder
+- `lint`: lint files with [ESLint](https://eslint.org/) based on [Airbnb's styleguide](https://github.com/airbnb/javascript) and the Prettier config
+
 ## Component architecture
 
 ![Architecture](./images/architecture.png)

package-lock.json

@@ -8,6 +8,8 @@
   "scripts": {
     "start": "PORT=9300 BROWSER=none react-scripts start",
     "build": "CI=false react-scripts build",
+    "format": "prettier --write 'src/**/*.{js,jsx}'",
+    "lint": "eslint 'src/**/*.{js,jsx}'",
     "test": "npm run test:unit",
     "test:unit": "react-scripts test --watchAll=false",
     "test:e2e": "start-server-and-test start http://localhost:9300 cypress",
@@ -30,8 +32,16 @@
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^10.0.2",
     "cypress": "^4.3.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "history": "^4.10.1",
     "jest-extended": "^0.11.5",
+    "prettier": "^2.0.4",
     "react-scripts": "^3.4.1",
     "start-server-and-test": "^1.10.11"
   },

package.json

@@ -12,9 +12,7 @@ export function App() {
   const todos = useSelector(state => state.todos);
 
   useEffect(() => {
-    dispatch(
-      onLoad(TodoLocal.loadTodos())
-    );
+    dispatch(onLoad(TodoLocal.loadTodos()));
   }, [dispatch]);
 
   useEffect(() => {
@@ -25,14 +23,8 @@ export function App() {
     <div id="app">
       <section className="todoapp">
         <Header />
-        {
-          !!todos.length &&
-          <List />
-        }
-        {
-          !!todos.length &&
-          <Footer />
-        }
+        {!!todos.length && <List />}
+        {!!todos.length && <Footer />}
       </section>
       <CopyRight />
     </div>

src/components/app/app.js

@@ -4,8 +4,12 @@ export function CopyRight() {
   return (
     <footer className="info">
       <p data-testid="instruction">Double-click to edit a todo</p>
-      <p>Created by <a href="http://github.com/blacksonic/">blacksonic</a></p>
-      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+      <p>
+        Created by <a href="http://github.com/blacksonic/">blacksonic</a>
+      </p>
+      <p>
+        Part of <a href="http://todomvc.com">TodoMVC</a>
+      </p>
     </footer>
   );
 }

src/components/copy-right/copy-right.js

@@ -17,15 +17,18 @@ export function Footer() {
   const itemsLeft = useSelector(state => selectNotCompleted(state.todos).length);
   const filter = useSelector(state => state.filter);
   const clearCompleted = () => dispatch(onClearCompleted());
-  const filterSelect = filter => dispatch(onFilterSelect(filter));
+  const filterSelect = selectedFilter => dispatch(onFilterSelect(selectedFilter));
 
   const itemText = itemsLeft === 1 ? 'item' : 'items';
 
   return (
     <footer className="footer">
-      <span className="todo-count"><strong>{itemsLeft}</strong><span> {itemText} left</span></span>
+      <span className="todo-count">
+        <strong>{itemsLeft}</strong>
+        <span> {itemText} left</span>
+      </span>
       <ul className="filters">
-        {filterTitles.map(filterTitle =>
+        {filterTitles.map(filterTitle => (
           <li key={filterTitle.key}>
             <a
               href="#"
@@ -35,12 +38,13 @@ export function Footer() {
               {filterTitle.value}
             </a>
           </li>
-        )}
+        ))}
       </ul>
-      {
-        !!completedCount &&
-        <button className="clear-completed" onClick={clearCompleted}>Clear completed</button>
-      }
+      {!!completedCount && (
+        <button className="clear-completed" onClick={clearCompleted}>
+          Clear completed
+        </button>
+      )}
     </footer>
   );
 }