Eslint & Prettier intellisense + Package updates & changes

.eslintrc.js

@@ -1,9 +1,12 @@
+/**
+ * @type {import("eslint").Linter.Config}
+ */
 module.exports = {
-  extends: ["plugin:react/recommended", "next/core-web-vitals"],
+  extends: ['plugin:react/recommended', 'next/core-web-vitals'],
   env: { es6: true },
   rules: {
-    "@next/next/no-img-element": "off",
-    "react/jsx-sort-props": [
+    '@next/next/no-img-element': 'off',
+    'react/jsx-sort-props': [
       2,
       {
         callbacksLast: true,
@@ -12,52 +15,53 @@ module.exports = {
         reservedFirst: true,
       },
     ],
-    "import/order": [
-      "warn",
+    'import/order': [
+      'warn',
       {
-        alphabetize: { order: "asc", caseInsensitive: true },
+        alphabetize: { order: 'asc', caseInsensitive: true },
         pathGroups: [
           {
-            pattern: "@/common/**",
-            group: "external",
-            position: "after",
+            pattern: '@/common/**',
+            group: 'external',
+            position: 'after',
           },
           {
-            pattern: "@/modules/**",
-            group: "external",
-            position: "after",
+            pattern: '@/modules/**',
+            group: 'external',
+            position: 'after',
           },
         ],
-        "newlines-between": "always",
+        'newlines-between': 'always',
       },
     ],
-    "array-callback-return": [
-      "error",
+    'array-callback-return': [
+      'error',
       {
         checkForEach: true,
       },
     ],
-    "simple-import-sort/exports": "error",
-    "import/first": "error",
-    "import/newline-after-import": "error",
-    "import/no-duplicates": "error",
-    "react/no-unknown-property": [
-      "error",
-      { ignore: ["css", "global", "jsx"] },
+    'simple-import-sort/exports': 'error',
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+    'import/no-anonymous-default-export': 'warn',
+    'react/no-unknown-property': [
+      'error',
+      { ignore: ['css', 'global', 'jsx'] },
     ],
   },
   root: true,
-  parser: "@typescript-eslint/parser",
+  parser: '@typescript-eslint/parser',
   plugins: [
-    "@next/next",
-    "@typescript-eslint",
-    "react",
-    "simple-import-sort",
-    "import",
+    '@next/next',
+    '@typescript-eslint',
+    'react',
+    'simple-import-sort',
+    'import',
   ],
   parserOptions: {
-    project: "./tsconfig.json",
-    sourceType: "module",
+    project: './tsconfig.json',
+    sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
     },

.github/workflows/main.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
       - name: Check out repo
         uses: actions/checkout@v2

.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+
+dist
+coverage
+node-modules

.prettierrc.js

@@ -1,9 +1,10 @@
+/** @type {import("prettier").Config} */
 module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   arrowParens: 'always',
   tabWidth: 2,
   printWidth: 80,
   jsxSingleQuote: false,
-  plugins: [require('prettier-plugin-tailwindcss')],
+  plugins: ['prettier-plugin-tailwindcss'],
 };

.vscode/settings.json

@@ -23,6 +23,7 @@
   },
   "editor.rulers": [80],
   "editor.codeActionsOnSave": {
+    "source.addMissingImports": true,
     "source.fixAll.eslint": true
   },
   // Show in vscode "Problems" tab when there are errors

README.md

@@ -1,4 +1,4 @@
-## Getting Started
+# Getting Started
 
 Install dependencies with yarn:
 
@@ -14,44 +14,49 @@ yarn prepare
 
 Start local development server:
 
-
 ```bash
 yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## Configurations done in this template 
+## Configurations done in this template
+
 - Absolute file referencing e.g. "@/modules/components/Hello.tsx" via tsconfig
 - Modular file structure e.g."@/modules/common", "@/modules/ModuleName"
 - Dynamic layout support for reusing layout component across pages without re-declaring on each page
 - Using sass for tailwind config, and some boilerplate e.g. setting html, body elements, etc
 - Sorted imports e.g. alphabetical and in groups. Avoids git diff changes when imports are sorted differently between people
 - Requires vscode extensions like eslint and prettier
-- Use ./src as src directory for nextjs 
-- Includes a <meta> reusable component PageHead to use in each page and also some default favicons 
+- Use ./src as src directory for nextjs
+- Includes a `<meta>` reusable component PageHead to use in each page and also some default favicons
 
 ## Using the PageHead component
+
 Use this component to quickly bootstrap the meta tags for the page
+
 1. Go to PageHead component and update the `appName` const to your project's title
-2. Use PageHead in your /pages/**/* files
+2. Use PageHead in your `/pages/**/*` files
 3. Feel free to update the props as you see fit
 
 ## Using the CustomIcon component
+
 1. Checkout the README file in that /modules/common/components/CustomIcon/README.md to learn more
 
 ## Packages used
-**ESLint related**
 
-https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser
+### ESLint related
+
+<https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser>
+
+<https://github.com/import-js/eslint-plugin-import/>
 
-https://github.com/import-js/eslint-plugin-import/
+<https://github.com/lydell/eslint-plugin-simple-import-sort>
 
-https://github.com/lydell/eslint-plugin-simple-import-sort
+### VSCode extensions
 
-## VSCode extensions
-ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
+ESLint: <https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint>
 
-Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
+Prettier: <https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode>
 
-Tailwind CSS IntelliSense: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
+Tailwind CSS IntelliSense: <https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss>

package.json

@@ -14,30 +14,31 @@
     "validate": "yarn run prettier & yarn run lint:eslint & yarn run check-types & yarn run build"
   },
   "dependencies": {
-    "next": "^13.4.9",
+    "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.58.3"
+    "sass": "^1.69.5"
   },
   "devDependencies": {
-    "@tsconfig/next": "^1.0.2",
-    "@types/node": "^17.0.35",
-    "@types/react": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.35.0",
-    "eslint-config-next": "^13.4.9",
-    "eslint-plugin-import": "^2.27.5",
+    "@tsconfig/next": "^2.0.1",
+    "@types/eslint": "^8.44.6",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.33",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.52.0",
+    "eslint-config-next": "^14.0.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.2",
-    "postcss": "^8.4.25",
-    "prettier": "^2.8.4",
-    "prettier-plugin-tailwindcss": "^0.2.3",
-    "tailwindcss": "^3.3.2",
+    "lint-staged": "^15.0.2",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "tailwindcss": "^3.3.5",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

tsconfig.json

@@ -19,12 +19,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.js",
-    "./**/.*",
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "./**/.*"],
   "exclude": ["node_modules"]
 }