A script to set up ESLint / Prettier completely in Next.js

eslint-setup.sh

#!/bin/bash 
echo "Starting ESLint and Prettier setup..."

echo "Installing ESLint and Prettier dependencies..."
npm i eslint-config-standard eslint-plugin-tailwindcss eslint-config-prettier prettier eslint-plugin-import --save-dev

echo "Install ESLint plugin"
code --install-extension dbaeumer.vscode-eslint

echo "Install Prettier plugin"
code --install-extension esbenp.prettier-vscode

echo "Install Prettier-ESLint plugin"
code --install-extension rvest.vs-code-prettier-eslint


echo "Writing .eslintrc file contents"
cat <<EOL > .eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "next/typescript",
    "standard",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["import"],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": [
          "builtin", // Built-in types are first
          "external", // External libraries
          "internal", // Internal modules
          ["parent", "sibling"], // Parent and sibling types can be mingled together
          "index", // Then the index file
          "object" // Object imports
        ],
        "newlines-between": "always",
        "pathGroups": [
          {
            "pattern": "@app/**",
            "group": "external",
            "position": "after"
          }
        ],
        "pathGroupsExcludedImportTypes": ["builtin"],
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  },
  "ignorePatterns": ["components/ui/**"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "no-undef": "off"
      }
    }
  ]
}
EOL

if [ ! -d .vscode ]; then
    echo "Creating .vscode folder"
    mkdir -p ./.vscode
fi

echo "Writing settings.json file contents"
cat <<EOL > ./.vscode/settings.json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.addMissingImports": "explicit"
    },
    "prettier.tabWidth": 2,
    "prettier.useTabs": false,
    "prettier.semi": true,
    "prettier.singleQuote": false,
    "prettier.jsxSingleQuote": false,
    "prettier.trailingComma": "es5",
    "prettier.arrowParens": "always",
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.tsdk": "node_modules/typescript/lib"
}
EOL

echo "All done!"