0.1.11 โ€ข Published 6 months ago

eslint-prettier-next-15 v0.1.11

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

๐Ÿš€ ESLint + Prettier Setup for Next.js 15

This script automates the setup of ESLint and Prettier for Next.js 15 projects, ensuring high code quality and consistency. It detects the package manager, removes existing configurations, installs necessary dependencies, and configures the project automatically.

๐Ÿ“Œ Features

  • ๐Ÿ— Automatic Package Manager Detection (npm, yarn, pnpm, or bun)
  • ๐Ÿงน Removes Old ESLint & Prettier Configurations
  • ๐Ÿ“ฆ Installs Latest ESLint & Prettier Dependencies
  • ๐Ÿ›  Adds ESLint & Prettier Configuration Files
  • ๐Ÿ”„ Updates package.json Scripts

๐Ÿ“ฅ Installation

You can run this setup in a Next.js 15 project using the following command:

npx eslint-prettier-next-15

or if using yarn:

yarn dlx eslint-prettier-next-15

or with pnpm:

pnpm dlx eslint-prettier-next-15

or with bun:

bunx eslint-prettier-next-15

๐Ÿ“ฆ Dependencies Installed

The following dependencies will be installed:

  • @eslint/eslintrc@3.2.0
  • @eslint/js@9.18.0
  • @ianvs/prettier-plugin-sort-imports@4.4.0
  • @typescript-eslint/eslint-plugin@8.19.1
  • @typescript-eslint/parser@8.19.1
  • eslint@9.18.0
  • eslint-config-next@15.1.4
  • eslint-config-prettier@9.1.0
  • eslint-plugin-prettier@5.2.1
  • prettier@3.4.2
  • prettier-plugin-sort-json@4.1.1

๐Ÿ“– Usage

After running the script, you can use the following commands in your project:

Linting Commands

  • ๐Ÿ›  Check for linting errors

    npm run lint
    yarn lint
    pnpm run lint
    bun run lint
  • ๐Ÿ”ง Fix linting issues

    npm run lint:fix
    yarn lint:fix
    pnpm run lint:fix
    bun run lint:fix

Formatting Commands

  • โœจ Format files

    npm run format
    yarn format
    pnpm run format
    bun run format
  • ๐Ÿ” Check formatting (without modifying files)

    npm run format:check
    yarn format:check
    pnpm run format:check
    bun run format:check

๐Ÿ›  Configuration Files

After setup, the following configuration files will be created in your project:

.prettierrc.json

{
  "printWidth": 120,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-sort-json"
  ],
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@/(.*)$",
    "^[./]"
  ],
  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
}

.prettierignore

/node_modules
/.next
/out
/build

eslint.config.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import typescriptEslintEslintPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import prettier from "eslint-plugin-prettier";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

export default [
  ...compat.extends("next", "next/core-web-vitals", "prettier"),
  {
    plugins: {
      prettier,
    },
    rules: {
      "prettier/prettier": "error",
      camelcase: "off",
      "import/prefer-default-export": "off",
      "react/jsx-filename-extension": "off",
      "react/jsx-props-no-spreading": "off",
      "react/no-unused-prop-types": "off",
      "react/require-default-props": "off",
      "react/no-unescaped-entities": "off",
      "import/extensions": [
        "error",
        "ignorePackages",
        {
          ts: "never",
          tsx: "never",
          js: "never",
          jsx: "never",
        },
      ],
    },
  },
  ...compat
    .extends("plugin:@typescript-eslint/recommended", "prettier")
    .map((config) => ({
      ...config,
      files: ["**/*.+(ts|tsx)"],
    })),
  {
    files: ["**/*.+(ts|tsx)"],
    plugins: {
      "@typescript-eslint": typescriptEslintEslintPlugin,
    },
    languageOptions: {
      parser: tsParser,
    },
    rules: {
      "@typescript-eslint/explicit-function-return-type": "off",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "no-use-before-define": [0],
      "@typescript-eslint/no-use-before-define": [1],
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-var-requires": "off",
    },
  },
];

โš™๏ธ Requirements

  • Next.js >= 13
  • Node.js >= 16

โ“ Help

To display the help message, run:

npx eslint-prettier-next-15 --help

or

npm dlx eslint-prettier-next-15 --help

๐Ÿค Contributing

This project is open-source, and contributions are welcome!

To contribute:

  1. Fork the repository.
  2. Clone your fork and create a new branch.
  3. Make your changes and commit them.
  4. Push your branch and open a pull request.

We appreciate your contributions! ๐Ÿš€

0.1.11

6 months ago