lint-test

package.json

@@ -53,6 +53,7 @@
     "html-webpack-plugin": "4.0.0-beta.11",
     "html2canvas": "^1.0.0-rc.5",
     "http-proxy-middleware": "^0.19.2",
+    "husky": "^4.2.5",
     "identity-obj-proxy": "3.0.0",
     "jest": "24.9.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
@@ -64,6 +65,7 @@
     "json-stringify-safe": "^5.0.1",
     "less": "^3.12.2",
     "less-loader": "^4.1.0",
+    "lint-staged": "^10.2.11",
     "lodash": "^4.17.19",
     "mini-css-extract-plugin": "0.9.0",
     "node-sass": "^4.14.1",
@@ -121,6 +123,14 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": "prettier --write"
+  },
   "eslintConfig": {
     "extends": "react-app",
     "globals": {

src/components/ts-test/index.tsx

@@ -2,7 +2,9 @@ import React, { useState } from "react"
 import { withRouter } from "react-router-dom"
 
 const TSTest: React.FC = () => {
-  const [count, setCount] = useState(0)
+  const [count,
+      setCount] =
+      useState(0)
 
   function handleAlertClick() {
     setTimeout(() => {
@@ -13,7 +15,8 @@ const TSTest: React.FC = () => {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>Click me</button>
+      <button onClick={() => setCount(count +
+          1)}>Click me</button>
       <button onClick={handleAlertClick}>Show alert</button>
     </div>
   )