> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/01.-setup/4.-eslint-prettier.md).

# 4. ESLint, Prettier

This document is a guide to improving code quality in a JavaScript or TypeScript based project by configuring ESLint and Prettier. It first explains how to install ESLint and Prettier and add the basic configuration. It then also covers the configuration and exception handling needed to prevent conflicts with Tailwind CSS. ※ This page describes the general ESLint/Prettier configuration flow. The actual configuration for X2BEE FO/BO is .eslintrc.js (module.exports · parser @typescript-eslint/parser · extends: eslint:recommended, plugin:react/recommended, plugin:@typescript-eslint/recommended, plugin:prettier/recommended) and .prettierrc (semi: false · singleQuote: true · trailingComma: es5 · prettier-plugin-tailwindcss), and the package manager is yarn.

{% stepper %}
{% step %}

### Installation — Basic ESLint Installation

Install eslint and eslint-config-next using the pnpm package manager.

{% code title="Install packages" %}

```bash
$ pnpm add eslint eslint-config-next
```

{% endcode %}

Add a lint script to package.json.

{% code title="package.json (scripts)" %}

```json
"scripts": {
  ...
  "lint": "next lint --no-cache"
}
```

{% endcode %}

Note:

{% hint style="info" %}
\--no-cache can be omitted; if included, it re-scans all files regardless of what has changed.
{% endhint %}
{% endstep %}

{% step %}

### Install the Standard Package

Install eslint-config-standard with pnpm.

{% code title="Install standard config" %}

```bash
$ pnpm add eslint-config-standard
```

{% endcode %}

Create an .eslintrc.json file at the project root and write the following.

{% code title=".eslintrc.json" %}

```json
{
  "extends": ["next/core-web-vitals", "standard"]
}
```

{% endcode %}

With this configuration, ESLint will analyze the project code and apply the standard rules.
{% endstep %}

{% step %}

### ESLint config — Add Tailwind CSS Checking

Install eslint-plugin-tailwindcss with pnpm.

{% code title="Install Tailwind ESLint plugin" %}

```bash
$ pnpm add eslint-plugin-tailwindcss
```

{% endcode %}

eslint-plugin-tailwindcss checks the validity of Tailwind utility classes (whether the correct classes are used) and conflicting attributes (e.g., className="flex grid").

Add plugin:tailwindcss/recommended to .eslintrc.json:

{% code title=".eslintrc.json (with tailwind plugin)" %}

```json
{
  "extends": ["next/core-web-vitals", "standard", "plugin:tailwindcss/recommended"]
}
```

{% endcode %}
{% endstep %}

{% step %}

### Prettier Configuration and the Tailwind Sort Plugin

Install the Prettier-related packages with pnpm.

{% code title="Install Prettier and plugins" %}

```bash
$ pnpm add prettier eslint-config-prettier prettier-plugin-tailwindcss
```

{% endcode %}

eslint-config-prettier disables duplicate rules between ESLint and Prettier to prevent conflicts.

Add prettier and exception rules to .eslintrc.json:

{% code title=".eslintrc.json (with prettier & rules)" %}

```json
{
  "extends": [
    "next/core-web-vitals",
    "standard",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "rules": {
    "no-undef": "off",
    "spaced-comment": "off",
    "tailwindcss/classnames-order": "off"
  }
}
```

{% endcode %}

Description of rules:

* no-undef: Exception handling for warnings that may occur in React 17+ when `import React from 'react'` is omitted
* spaced-comment: Exception handling for comment-related lint warnings
* tailwindcss/classnames-order: Exception handling for conflicts between a custom className and the official Tailwind order rules

Additionally, create a Prettier configuration file (.prettierrc):

```json
{
  "printWidth": 80,
  "tabWidth": 2,
"semi": false,
  "singleQuote": true,
  "useTabs": false,
  "endOfLine": "auto",
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "tsxSingleQuote": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "vueIndentScriptAndStyle": true,
  "requirePragma": false,
  "plugins": ["prettier-plugin-tailwindcss"]
}
```

{% endstep %}

{% step %}

### VS Code Extensions (Recommended)

Installing the following extensions is convenient:

* ESLint
* Prettier - Code formatter
* Prettier ESLint
  {% endstep %}

{% step %}

### Run the ESLint Check

Run lint at the project root:

```bash
$ npm run lint
```

```

The above command checks all files in the project against the ESLint rules.

</div>

</div>

Additional notes:
- Using Tailwind-related lint rules together with Prettier's tailwind sort plugin helps maintain consistency in class order and formatting. Adjust the rules in .eslintrc.json as needed to handle exceptions.

Metadata from when the document was written (Confluence creation/modification timestamps, etc.) has been removed from this page.
```

{% endstep %}
{% endstepper %}