Setting Up Prettier with Automatic Import Sorting

I added Prettier to the WiniLogis project to unify code style.

I took the .prettierrc.json file I had been using in the Autowini migration project as is and added it to the project root, but Prettier did not show up in the VSCode status bar at the bottom, and saving did not format the code at all.

The .prettierrc.json I applied

json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16{
  "endOfLine": "lf", // Line ending: LF (\n)
  "singleQuote": true, // Use single quotes for strings
  "jsxSingleQuote": true, // Use single quotes in JSX too
  "semi": true, // Use semicolons
  "tabWidth": 2, // Indent width: 2 spaces
  "useTabs": false, // Indent with spaces
  "printWidth": 80, // Max line length: 80 characters
  "trailingComma": "es5", // Add commas only where ES5 allows them
  "bracketSpacing": true, // Add spaces inside object braces: { a: b }
  "arrowParens": "always", // Always use parentheses around arrow function parameters
  "importOrder": ["^react$", "^@?\\w", "^[./]"], // Import order: react → external → internal
  "importOrderSeparation": true, // Line break between import groups
  "importOrderSortSpecifiers": true, // Sort the items inside import braces
  "plugins": ["@trivago/prettier-plugin-sort-imports"] // Use the import sorting plugin
}

🔍 Finding the cause

At first I suspected a JSON syntax error or a VSCode settings problem and checked several times, but nothing was wrong.
In the end, I tested by commenting out the .prettierrc.json settings one line at a time, and found that Prettier worked properly once I removed the setting below.

1"plugins": ["@trivago/prettier-plugin-sort-imports"] // Use the import sorting plugin

❗️ The cause

That setting told Prettier to explicitly use an import sorting plugin called @trivago/prettier-plugin-sort-imports. But since I had only copied the .prettierrc.json file, the plugin was not installed in node_modules, and that led to Prettier as a whole not working.

✅ The fix

I fixed the problem by installing the @trivago/prettier-plugin-sort-imports plugin myself.

bash

1
2
3
4
5
6
7
8# npm
npm install --save-dev @trivago/prettier-plugin-sort-imports

# yarn
yarn add -D @trivago/prettier-plugin-sort-imports

# pnpm
pnpm add -D @trivago/prettier-plugin-sort-imports

After installing it, once I restarted VSCode, Prettier worked properly, and

formatting on save
automatic import sorting

both worked cleanly.

I also used the following command to format all files:

bash

1prettier --write .

💡 Takeaways

I used to keep a simple Prettier config in package.json, and when I moved it into a separate .prettierrc.json, bringing over only the config and missing the dependency install was what caused the problem.

Here is what I learned from this:

When copying a config file, always install the related plugins along with it
If Prettier suddenly stops working in VSCode, commenting out the settings one line at a time to narrow down the cause works well
Be careful with the "plugins" setting: it is not just an option, it makes that plugin a requirement for Prettier to run