Added eslint, prettier and typescript beta

Author: luistak

.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  env: {
+    node: true,
+    jest: true,
+    es2021: true,
+    browser: true,
+    commonjs: true,
+  },
+  extends: [
+    'airbnb',
+    'prettier',
+    'plugin:react/recommended',
+    'eslint-config-prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+    'react-hooks',
+    '@typescript-eslint',
+  ],
+  rules: {
+    'import/no-unresolved': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-filename-extension': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/jsx-one-expression-per-line': 'off',
+  },
+};

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "semi": true
+}

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "git.ignoreLimitWarning": true
-}
+  "git.ignoreLimitWarning": true,
+  "editor.formatOnSave": true
+}

_i18n/index.ts i18n/index.ts_i18n/index.ts renamed to i18n/index.ts

@@ -5,7 +5,9 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "eslint --ignore-path .gitignore .",
+    "format": "prettier --ignore-path .gitignore --write \"**/*.+(ts|tsx|json)\""
   },
   "dependencies": {
     "next": "10.0.0",
@@ -15,6 +17,16 @@
   "devDependencies": {
     "@types/node": "^14.14.6",
     "@types/react": "^16.9.55",
-    "typescript": "^4.0.5"
+    "@typescript-eslint/eslint-plugin": "^4.6.0",
+    "@typescript-eslint/parser": "^4.6.0",
+    "eslint": "^7.12.1",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.1.2",
+    "typescript": "^4.1.0-beta"
   }
 }

package.json

@@ -1,7 +1,7 @@
-import type { AppProps } from "next/app";
+import type { AppProps } from 'next/app';
+import { getTranslate, Translate } from 'i18n';
 
-import "../styles/globals.css";
-import { getTranslate, Translate } from "../_i18n";
+import '../styles/globals.css';
 
 type CustomProps = {
   t: Translate;

pages/_app.tsx

@@ -1,6 +1,6 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default (req, res) => {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
-}
+  res.statusCode = 200;
+  res.json({ name: 'John Doe' });
+};

pages/api/hello.tsx

@@ -1,15 +1,16 @@
-import Head from "next/head";
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { Translate } from "../_i18n";
+import Head from 'next/head';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { NextPage } from 'next';
+import { Translate } from 'i18n';
 
-import styles from "../styles/Home.module.css";
+import styles from '../styles/Home.module.css';
 
-type HomeProps = {
+type PageProps = {
   t: Translate;
 };
 
-export default function Home({ t }: HomeProps) {
+const Home: NextPage<PageProps> = ({ t }) => {
   const { locale } = useRouter();
   return (
     <div className={styles.container}>
@@ -19,7 +20,7 @@ export default function Home({ t }: HomeProps) {
       </Head>
 
       <main className={styles.main}>
-        <h1 className={styles.title}>{t("welcome")}</h1>
+        <h1 className={styles.title}>{t('welcome')}</h1>
         <p>Current locale: {locale}</p>
         <Image
           src="/takah.jpg"
@@ -29,7 +30,7 @@ export default function Home({ t }: HomeProps) {
         />
 
         <p className={styles.description}>
-          Get started by editing{" "}
+          Get started by editing
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -70,10 +71,12 @@ export default function Home({ t }: HomeProps) {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{" "}
+          Powered by{' '}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
   );
-}
+};
+
+export default Home;

pages/index.tsx

@@ -16,14 +16,16 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": ".",
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx", "next.config.js"
+    "**/*.tsx",
+    "next.config.js"
   ],
   "exclude": [
     "node_modules"
-  ]
+  ],
 }