Prettier
Prettier is a widely adopted code formatter with good support for JavaScript / TypeScript / JSX / TSX / CSS / SCSS / Vue, and it's my top pick for formatters.
Other options
Biome 和 dprint are the up-and-comers. You might consider using them if you think Prettier is slow, but you'll need to configure them yourself. Be careful: they are not 100% compatible with Prettier, and their support for CSS / SCSS / Vue is limited, so you may get unexpected results.
Installation
You have to install Prettier first. Currently Prettier v3 is supported.
npm install prettier -D
yarn add prettier -D
pnpm install prettier -D
bun install prettier -d
Configuration
ESM
// prettier.config.mjs
// or prettier.config.js with "type": "module" in package.json
import { prettier } from '@modyqyw/fabric';
// or
// import { prettier } from '@modyqyw/fabric/prettier';
export default prettier();
CJS
// prettier.config.cjs
// or prettier.config.js without "type": "module" in package.json
const { prettier } = require('@modyqyw/fabric');
// or
// const { prettier } = require('@modyqyw/fabric/prettier');
module.exports = prettier();
CLI
Update your package.json
and add format
script.
{
"scripts": {
"format": "prettier . \"!**/package-lock.json\" \"!**/yarn.lock\" \"!**/pnpm-lock.yaml\" --ignore-unknown --write --cache --log-level=warn"
}
}
Ignoring files
While the ESLint config provides .gitignore, .eslintignore, and some built-in ignore files support, Prettier supports specifying multiple ignore pattern files, and uses both the .gitignore and .prettierignore ignore pattern files by default.
If you have other files to ignore, you can use negative patterns like above. The example below ignores all dts files, which is useful in projects that automatically generate dts files.
{
"scripts": {
"format": "prettier . \"!**/package-lock.json\" \"!**/yarn.lock\" \"!**/pnpm-lock.yaml\" \"!**/*.d.ts\" --ignore-unknown --write --cache --log-level=warn"
}
}
The example below ignores CHANGELOG.md, which is useful in projects that automatically generate a changelog file.
{
"scripts": {
"format": "prettier . \"!**/package-lock.json\" \"!**/yarn.lock\" \"!**/pnpm-lock.yaml\" \"!**/CHANGELOG*.md\" --ignore-unknown --write --cache --log-level=warn"
}
}
Customization
Parameters
Passing parameters to the exported prettier
method can customize, and the prettier
method takes two parameters.
The first parameter is used for basic customization, you can pass either undefined
or an object. To explicitly enable or disable a plugin, you need to explicitly set the boolean value in the passed object.
The following plugins are currently supported:
- cssOrder - Based on prettier-plugin-css-order. Sort CSS or SCSS declarations. Disabled by default.
- ianvsSortImports - Based on @ianvs/prettier-plugin-sort-imports.Sort import declarations. Disabled by default.
- jsdoc - Based on prettier-plugin-jsdoc. Format JSDoc and TSDoc comments. Enabled by default.
- organizeAttributes - Based on prettier-plugin-organize-attributes. Organize HTML / Vue attributes. Disabled by default.
- organizeImports - Based on prettier-plugin-organize-imports. Sort import declarations. Disabled by default.
- packageJson - Based on prettier-plugin-packagejson. Sort package.json. Enabled by default.
- tailwindcss - Based on prettier-plugin-tailwindcss. Sort HTML / Vue class attribute. Enabled by default if you have TailwindCSS installed.
- trivagoSortImports - Based on @trivago/prettier-plugin-sort-imports. Sort import declarations. Disabled by default.
// prettier.config.mjs
// or prettier.config.js with "type": "module" in package.json
import { hasTailwindCss, prettier } from '@modyqyw/fabric';
export default prettier({
// prettier-plugin-css-order
// false by default, disabled
cssOrder: false,
// @ianvs/prettier-plugin-sort-imports
// false by default, disabled
ianvsSortImports: false,
// prettier-plugin-jsdoc
// true by default, enabled
jsdoc: true,
// prettier-plugin-organize-attributes
// false by default, disabled
organizeAttributes: false,
// prettier-plugin-organize-imports
// false by default, disabled
organizeImports: false,
// prettier-plugin-packagejson
// true by default, enabled
packageJson: true,
// prettier-plugin-tailwindcss
// enabled by default if you have TailwindCSS installed
tailwindcss: hasTailwindCss,
// @trivago/prettier-plugin-sort-imports
// false by default, disabled
trivagoSortImports: false,
});
Potential conflicts
prettier-plugin-css-order may conflict with stylelint-config-recess-order, so it is disabled by default. If you want to enable prettier-plugin-css-order, please disable stylelint-config-recess-order. See Stylelint chapter Customization section.
@ianvs/prettier-plugin-sort-imports, @trivago/prettier-plugin-sort-imports, and prettier-plugin-organize-imports are in conflict with each other, and may conflict with the eslint- plugin-perfectionist, so they are disabled by default. If you want to enable one of the three, please disable eslint-plugin-perfectionist. See ESLint chapter Customization section.
prettier-plugin-organize-attributes may conflict with eslint-plugin-perfectionist, so it is disabled by default. If you want to enable prettier-plugin-organize-attributes, turn off eslint-plugin-perfectionist, see ESLint chapter Customization section.
prettier-plugin-packagejson does not conflict with eslint-plugin-jsonc by default. If you want to use eslint-plugin-jsonc to sort package.json, please disable prettier-plugin-packagejson.
prettier-plugin-tailwindcss may conflict with eslint-plugin-unocss. When you use both TailwindCSS and UnoCSS, please disable one of them manually. If you want to disable eslint-plugin-unocss, see ESLint chapter Customization section.
The second parameter is used for further customization, you can pass an object to override the generated configuration (you will need to install the dependencies yourself).
// prettier.config.mjs
// or prettier.config.js with "type": "module" in package.json
import { prettier } from '@modyqyw/fabric';
export default prettier(undefined, {
// use prettier-plugin-svelte 和 prettier-plugin-tailwindcss
// prettier-plugin-tailwindcss must be the last one
// plugins in the default configuration will be directly overridden
plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
});
If you wish to add custom configurations to the default configuration, you can do like below (you will need to install the dependencies yourself):
// prettier.config.mjs
// or prettier.config.js with "type": "module" in package.json
import { prettier } from '@modyqyw/fabric';
const defaultConfig = prettier();
export default {
...defaultConfig,
// use prettier-plugin-jsdoc、prettier-plugin-packagejson、prettier-plugin-svelte 和 prettier-plugin-tailwindcss
// prettier-plugin-tailwindcss must be the last one
plugins: [
...defaultConfig.plugins,
'prettier-plugin-svelte',
'prettier-plugin-tailwindcss',
],
};
Integration
VSC
Install the corresponding Prettier plugin first.
Update user settings or workspace settings as appropriate.
{
// Specifies the default formatter to Prettier.
"editor.defaultFormatter": "esbenp.prettier-vscode",
// Format on save.
"editor.formatOnSave": true
}
WebStorm
WebStorm comes with Prettier, see VSC to tweak it yourself.
lint-staged
If you are using the lint-staged configuration provided by the package, see the lint-staged chapter.
If you are not, you can refer to the following configuration.
// lint-staged.config.mjs
// or lint-staged.config.js with "type": "module" in package.json
import { filterFilenames } from '@modyqyw/fabric';
export default {
'*': (filenames) => {
const filtered = filterFilenames(filenames);
return filtered.map(
(f) => `prettier --ignore-unknown --write --cache ${f}`,
);
},
};
If you are hand-writing CHANGELOG.md, you may want to format it with Prettier.
// lint-staged.config.mjs
// or lint-staged.config.js with "type": "module" in package.json
import { GLOB_EXCLUDE, filterFilenames } from '@modyqyw/fabric';
export default {
'*': (filenames) => {
const filtered = filterFilenames(
filenames,
formatChangelog
? GLOB_EXCLUDE.filter((e) => !e.toUpperCase().includes('CHANGELOG'))
: GLOB_EXCLUDE,
);
return filtered.map(
(f) => `prettier --ignore-unknown --write --cache ${f}`,
);
},
};
ESLint
It is not recommended to run Prettier inside ESLint.
Running Prettier inside the linter slows down the linting process, might clutter the editor with annoying warnings, and adds one layer of indirection where things may break. Prettier's official documentation recommends using separate commands for linting and formatting, i.e., Prettier for code formatting concerns and ESLint for code-quality concerns.
Quoted from vuejs/eslint-config-prettier.