add ESLint, Prettier, pre-commit hooks (Husky)

Author: ilyasudakov

.eslintignore

@@ -0,0 +1,6 @@
+/node_modules/
+package-lock.json
+.env
+/coverage/
+build/
+bin/

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  env: {
+    jest: true,
+    browser: true,
+    amd: true,
+    node: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended' // Make this the last element so prettier config overrides other formatting rules
+  ],
+  rules: {
+    'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
+    'prettier/prettier': ['error', {}, { usePrettierrc: true }]
+  }
+}

.prettierignore

@@ -0,0 +1,8 @@
+.env
+/coverage/
+public/
+node_modules/
+internals/generators/
+bin/
+package-lock.json
+package.json

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package.json

@@ -16,7 +16,9 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "presetup": "npm i shelljs compare-versions",
-    "setup": "node ./bin/setup.js"
+    "setup": "node ./bin/setup.js",
+    "lint": "eslint  --fix src/**/*.js",
+    "format": "prettier src/**/*.js --write --config ./.prettierrc"
   },
   "keywords": [],
   "author": "",
@@ -30,11 +32,19 @@
     "@testing-library/user-event": "^12.6.3",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.0.1",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^4.3.8",
     "jest": "^26.6.3",
     "jest-dom": "^4.0.0",
+    "lint-staged": "^10.5.3",
     "mini-css-extract-plugin": "^1.3.5",
     "node-fetch": "^2.6.1",
     "node-sass": "^5.0.0",
+    "prettier": "^2.2.1",
     "sass-loader": "^10.1.1",
     "style-loader": "^2.0.0",
     "webpack": "^5.19.0",
@@ -45,6 +55,15 @@
     "npm": ">=5",
     "node": ">=8.15.1"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint && npm run format"
+    }
+  },
+  "lint-staged": {
+    "*.+(js|jsx)": ["eslint --fix", "git add"],
+    "*.+(json|css|md)": ["prettier --write", "git add"]
+  },
   "dependencies": {
     "compare-versions": "^3.6.0",
     "dotenv": "^8.2.0",

readme.md

@@ -9,6 +9,12 @@ Jest/React Testing Library<br>
 Env Files<br>
 PropTypes<br>
 
+## Setup
+
+Run `git clone https://github.com/ilyasudakov/basic-react-boilerplate.git` to clone repository<br>
+Run `npm run setup` to initiate setup process, where you can create new repo if you want to<br>
+Then you can `npm run start` to view template app
+
 ## Commands
 
 Run `npm i` to install all dependencies<br>

src/components/App.test.js

@@ -1,10 +1,10 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import App from "./App.jsx";
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App.jsx';
 
-describe("App component", () => {
-  test("renders", () => {
+describe('App component', () => {
+  test('renders', () => {
     const { getByText } = render(<App />);
-    expect(getByText("App")).toBeInTheDocument();
+    expect(getByText('App')).toBeInTheDocument();
   });
 });

src/index.js

@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./components/App.jsx";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App.jsx';
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById('root'));

src/setupTests.js

@@ -1 +1 @@
-import "@testing-library/jest-dom/extend-expect";
+import '@testing-library/jest-dom/extend-expect';