Prettier`

Supaplate uses Prettier to format the code.

In this section we will learn about the plugins we use and the configuration.

Configuration

The .prettierrc file is located in the root of the project and contains the following configuration:

{
"importOrder":[
"^.+\\.(css|scss|sass|less|styl|svg|png|jpg|jpeg|gif|webp)$",
"<THIRD_PARTY_TS_TYPES>",
"<TS_TYPES>^[./]",
"<THIRD_PARTY_MODULES>",
"^~/lib/(.*)$",
"^~/components/ui/(.*)$",
"^~/(.*)$",
"^[./]"
],
"plugins":[
"@trivago/prettier-plugin-sort-imports",
"prettier-plugin-tailwindcss"
],
"importOrderSeparation":true,
"importOrderSortSpecifiers":true
}

Plugins

The following plugins are used in the project:

• @trivago/prettier-plugin-sort-imports
• prettier-plugin-tailwindcss

Import order plugin

The import order plugin is used to sort the imports in the code.

The order is as follows:

• Static files
• Third party types
• Local types
• Third party modules
• Local lib files
• Shadcn/UI components
• Local app files

It will organize imports like this:

import './app.css'

import type { Route } from './+types/root'

import { useEffect } from 'react'
import { Links } from 'react-router'
import { Toaster } from 'sonner'

import { Dialog } from './core/components/ui/dialog'
import { Sheet } from './core/components/ui/sheet'

import { cn } from './core/lib/utils'
import NotFound from './core/screens/404'

Tailwind plugin

The tailwind plugin will sort the Tailwind CSS classes automatically following the recommended approach.

Formatting

To format the code, run the following command:

npm run format

Format on save

To format the code on save we recommend using the Prettier - Code formatter extension for VSCode,Cursor, WindSurf, etc.