Prettier
An opinionated code formatter
Links, Courses and Tutorials about Prettier.
Get help with Prettier from the community or creators.
Terminal
npm install -D prettier
Next, create a
.prettierrc.js file and put your formatting rules in there:.prettierrc.js
{ "trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true}
Refer to the docs for all available options.
Now you can format your project with:
Terminal
npx prettier . --write
Sort imports
A cool plugin we came across is
@ianvs/prettier-plugin-sort-imports. It sorts your imports so that you never have to think about import order again. You can install it with:Terminal
npm install @ianvs/prettier-plugin-sort-imports
Then extend your
.prettierrc.js file:.prettierrc.js
module.exports = { trailingComma: 'es5', tabWidth: 2, semi: false, singleQuote: true, importOrder: [ '^(react/(.*)$)|^(react$)', '^(next/(.*)$)|^(next$)', '', '<THIRD_PARTY_MODULES>', '', '^@/(.*)$', '', '^[./]', ], importOrderSeparation: false, importOrderSortSpecifiers: true, importOrderBuiltinModulesToTop: true, importOrderMergeDuplicateImports: true, plugins: ['@ianvs/prettier-plugin-sort-imports'],}
Prettier & ESLint
For combining Prettier and ESLint, please refer to our ESLint docs.
Prettier & VS Code
For even more powerful features, install the Prettier VS Code Extension.
You should also add the following to your VS Code settings:
.vscode/settings.json
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true}