Add basic configuration for formatting and linting (#3)

* Add basic prettier, eslint, and vscode config

* Add eslint import sorting and autofix existing files

* Add eslint rule prefer-const

.eslintrc

@@ -1,3 +1,24 @@
 {
-  "extends": ["next", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals", "prettier"],
+  "plugins": ["simple-import-sort"],
+  "rules": {
+    "prefer-const": "warn",
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn",
+    "import/no-unused-modules": [
+      "warn",
+      {
+        "unusedExports": true,
+        "ignoreExports": ["pages"] // pages are automatically imported by nextjs
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts?(x)"],
+      "rules": {
+        // typescript only rules go here
+      }
+    }
+  ]
 }

.prettierignore

@@ -0,0 +1,6 @@
+.next
+next-env.d.ts
+node_modules
+yarn.lock
+package-lock.json
+public

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

package.json

@@ -6,10 +6,15 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format": "prettier . --write"
   },
   "dependencies": {
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "next": "11.0.1",
+    "prettier": "^2.3.2",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

pages/_app.tsx

@@ -1,4 +1,5 @@
 import '../styles/globals.css'
+
 import type { AppProps } from 'next/app'
 
 function MyApp({ Component, pageProps }: AppProps) {

pages/index.tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import Image from 'next/image'
+
 import styles from '../styles/Home.module.css'
 
 export default function Home() {