<Marc Qualie/>

Add Prettier to NextJS

Out of the box NextJS comes with eslint, but this only helps with code quality and does not enforce any kind of formatting. You can heavily enhance this default config by combining it with Prettier for consistent formatting across your projects and team.


yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier



  "root": true,
  "extends": [


  "jsxSingleQuote": true,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"


You do not need Prettier extension installed. If you use it for other projects then you can disable it for the current workspace.

Instead, Prettier is executed as part of eslint so the eslint-plugin-prettier plugin is recommended for use with vscode (or other Editor).

I always had to reload the vscode window to get the new eslint config to detect properly on auto save.

If you have any questions about this post, or anything else, you can get in touch on Twitter or browse my code on Github.