Update eslint configs

Add husky setup

Author: shellbear

.babelrc

@@ -1,7 +1,5 @@
 {
-  "presets": [
-    "next/babel"
-  ],
+  "presets": ["next/babel"],
   "plugins": [
     [
       "babel-plugin-styled-components",

.eslintrc

@@ -1,18 +1,6 @@
 {
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": ["prettier", "import"],
+  "extends": ["next", "next/core-web-vitals", "prettier"],
   "rules": {
-    "prettier/prettier": "error"
-  },
-  "settings": {
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
-    "import/resolver": {
-      "typescript": {}
-    }
+    "@next/next/no-html-link-for-pages": 0
   }
 }

.prettierignore

@@ -0,0 +1,3 @@
+.next/
+node_modules/
+out/

README.md

@@ -49,5 +49,3 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 ## 🗝 License
 
 This project is licensed under the GPLv3 License - see the [LICENSE](LICENSE) file for details.
-
-

package.json

@@ -7,14 +7,23 @@
     "build": "next build",
     "postbuild": "next-sitemap",
     "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "format": "prettier --write ."
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.+(ts|tsx)": [
+      "prettier --write"
+    ]
   },
   "dependencies": {
     "@types/styled-components": "^5.1.9",
     "@types/styled-system": "^5.1.11",
-    "@typescript-eslint/eslint-plugin": "^4.21.0",
     "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "^7.23.0",
     "fast-glob": "^3.2.5",
     "framer-motion": "^4.1.17",
     "gray-matter": "^4.0.2",
@@ -35,10 +44,13 @@
   "devDependencies": {
     "@types/react": "^17.0.3",
     "@typescript-eslint/parser": "^4.21.0",
+    "eslint": "^7.31.0",
     "eslint-config-next": "^11.0.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.3.1",
+    "husky": "4",
+    "lint-staged": "^11.0.1",
     "next-sitemap": "^1.6.105",
     "typescript": "^4.2.4"
   }

pages/about.tsx

@@ -90,14 +90,14 @@ const About: React.FC<AboutProps> = ({ experiences }) => {
         </Title>
         <Container maxWidth={['100%', '700px']} marginY="2rem">
           <Text>
-            I'm a 21-year-old student at{' '}
+            I&apos;m a 21-year-old student at{' '}
             <a href="https://www.epitech.eu/en/">Epitech</a> in Paris currently
             studying computer-science. I started working as a freelance
             developer when I was 18.
           </Text>
           <Text>
-            Since 2020, I'm living in Seoul and I'm studying computer-science at{' '}
-            <a href="https://www.cau.ac.kr/">Chung-Ang</a> University.
+            Since 2020, I&apos;m living in Seoul and studying computer-science
+            at <a href="https://www.cau.ac.kr/">Chung-Ang</a> University.
           </Text>
           <Text>
             During my free time I like going gym, doing some Bench Press, make

pages/index.tsx

@@ -37,8 +37,8 @@ const Home: React.FC = () => (
       <Container maxWidth="700px" gridGap="3rem">
         <Container>
           <Text textAlign="center">
-            I'm a Full Stack developer with experience in DevOps, Backend,
-            Frontend and mobile development. I'm currently CTO of&nbsp;
+            I&apos;m a Full Stack developer with experience in DevOps, Backend,
+            Frontend and mobile development. Currently CTO of&nbsp;
             <a href="https://shareview.fr">Shareview</a> and living in Seoul.
           </Text>
         </Container>
@@ -54,8 +54,8 @@ const Home: React.FC = () => (
           Get in touch
         </Title>
         <Text textAlign="center">
-          Although I'm not actively looking for job opportunities, my inbox is
-          still open for you. Feel free to ask me anything!
+          Although I&apos;m not actively looking for job opportunities, my inbox
+          is still open for you. Feel free to ask me anything!
         </Text>
         <Grid
           gridGap="2rem"

pages/projects.tsx

@@ -50,7 +50,7 @@ const Projects: React.FC<ProjectProps> = ({ projects }) => (
     <Container alignItems="center">
       <Title>Projects</Title>
       <Text textAlign="center">
-        I'm always working on new projects. <br />
+        I&apos;m always working on new projects. <br />
         You can find them on my&nbsp;
         <a href="https://github.com/shellbear">Github</a>.
       </Text>

styles/globals.css

@@ -15,7 +15,6 @@ a {
   border-bottom: 2px solid black;
 }
 
-
 a:hover {
   border-bottom-color: transparent;
 }
@@ -25,16 +24,16 @@ a:hover {
 }
 
 .mobile {
-  display: none
+  display: none;
 }
 
 @media (max-width: 640px) {
   .mobile {
-    display: block
+    display: block;
   }
 
   .desktop {
-    display: none
+    display: none;
   }
 }
 

tsconfig.json

@@ -16,7 +16,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext",
+    "target": "esnext"
   },
   "exclude": ["node_modules"],
   "include": ["**/*.ts", "**/*.tsx"]