Fix Prettier Not Formatting in VS Code for Nuxt Apps

The issue of Prettier not formatting code in VS Code for Nuxt applications is a common problem that typically stems from missing dependencies, incorrect VS Code configuration, or conflicts between ESLint and Prettier settings. To resolve this, you’ll need to ensure proper installation of prettier-plugin-vue for Vue template formatting, configure VS Code to use Prettier as the default formatter, and properly integrate Prettier with ESLint using eslint-config-prettier and eslint-plugin-prettier packages.

Contents

• Understanding the Prettier-ESLint Integration in Nuxt Projects
• Essential Packages for Prettier to Work with Nuxt in VS Code
• VS Code Configuration for Prettier Formatting
• Configuring ESLint to Work with Prettier in Nuxt
• Troubleshooting Prettier Not Formatting Vue Files
• Advanced Configuration for Nuxt 3 Projects
• Alternative Solutions and Best Practices
• Conclusion

Understanding the Prettier-ESLint Integration in Nuxt Projects

When working with Nuxt applications in VS Code, Prettier often fails to format code due to several reasons related to how Prettier, ESLint, and the Nuxt framework interact. Prettier is a code formatter that automatically formats your code according to a set of rules, while ESLint is a linter that identifies and fixes problems in your JavaScript code. In Nuxt projects, these tools can conflict or fail to work together properly without proper configuration.

The most common reason Prettier doesn’t work in Nuxt applications is that Prettier doesn’t natively understand Vue single-file components (.vue files) without additional plugins. Vue files contain three parts: <template>, <script>, and <style>. While Prettier can handle the <script> and <style> sections with default configuration, it requires the prettier-plugin-vue to properly format the <template> section.

Another frequent issue is VS Code’s formatter selection. If you have multiple formatters installed (like Vetur or Volar for Vue development), VS Code might be using a different formatter instead of Prettier. Additionally, when ESLint and Prettier are both installed, they can conflict with each other’s rules if not properly configured, leading to formatting issues.

Understanding these interactions is the first step toward resolving the formatting issues in your Nuxt project.

Essential Packages for Prettier to Work with Nuxt in VS Code

To ensure Prettier works correctly with Nuxt applications in VS Code, you need to install several specific packages. These packages address the various components of Vue files and integrate Prettier with ESLint to prevent conflicts.

First and foremost, you’ll need prettier-plugin-vue, which extends Prettier’s capabilities to format Vue template blocks. Without this plugin, Prettier will ignore the template section of your .vue files, which might be why you’re experiencing “nothing happens” when trying to format.

To install this plugin, run the following command in your project’s terminal:

npm install --save-dev prettier-plugin-vue

Next, you need packages that help ESLint and Prettier work together harmoniously:

• eslint-config-prettier: Disables ESLint rules that conflict with Prettier
• eslint-plugin-prettier: Runs Prettier as an ESLint rule to ensure consistent formatting

Install these with:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

For Nuxt 2 projects, you might also need @nuxtjs/eslint-config which includes specific rules for Nuxt applications. For Nuxt 3, the default ESLint configuration is usually sufficient, but additional configuration might be needed depending on your setup.

Don’t forget to install Prettier itself if you haven’t already:

npm install --save-dev prettier

Each of these packages plays a crucial role in making Prettier work correctly with Nuxt applications in VS Code. Missing any one of them could result in the formatting issues you’re experiencing.

VS Code Configuration for Prettier Formatting

Even with all the necessary packages installed, VS Code might still not use Prettier for formatting if it’s not properly configured in your editor settings. This is a very common issue that users overlook when troubleshooting Prettier not formatting in Nuxt applications.

First, ensure you have the official Prettier extension for VS Code installed. Search for “Prettier - Code formatter” by Esben Petersen in the VS Code marketplace and install it. This extension provides the interface between VS Code and your Prettier installation.

Next, configure VS Code to use Prettier as the default formatter. Open your VS Code settings (Ctrl+, or Cmd+, on Mac) and add the following configuration:

{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
 "[vue]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
}

This configuration does three important things:

1. Sets Prettier as the default formatter for all files
2. Enables automatic formatting when you save a file
3. Specifically sets Prettier as the default formatter for Vue files

If you have other Vue-related extensions like Vetur or Volar installed, they might be competing with Prettier for formatting control. In such cases, you might need to explicitly disable their formatting capabilities in VS Code settings:

{
 "vetur.format.defaultFormatter.js": "none",
 "vetur.format.defaultFormatter.html": "none",
 "vetur.format.defaultFormatter.css": "none",
 "vetur.format.defaultFormatter.postcss": "none"
}

For VS Code to use your .prettierrc file with your specific settings (tabWidth: 2, semi: false, singleQuote: true), make sure the file is in the root of your project. Prettier will automatically detect and use this configuration.

If you’re still experiencing issues, try using the “Format Document With…” command (right-click in the editor and select it) to explicitly choose Prettier. This can help identify if there’s a conflict with other formatters.

Configuring ESLint to Work with Prettier in Nuxt

When both ESLint and Prettier are installed in a Nuxt project, they can conflict with each other’s rules if not properly configured. This conflict is a frequent cause of Prettier not formatting code, even when it appears to be enabled.

To resolve this, you need to configure ESLint to use Prettier’s rules and disable conflicting ESLint rules. This is done by modifying your .eslintrc.js file.

First, ensure your .eslintrc.js has the proper extends configuration. It should include eslint:recommended, plugin:vue/recommended, and then prettier at the end. The order is crucial here – Prettier should always be last in the extends array:

module.exports = {
 extends: [
 'eslint:recommended',
 'plugin:vue/vue3-recommended',
 'prettier'
 ],
 // Other ESLint configuration
}

For Nuxt 2 projects, you might use 'plugin:nuxt/recommended' instead of 'plugin:vue/vue3-recommended'.

Next, add the Prettier plugin to your ESLint configuration:

module.exports = {
 extends: [
 // ... other extends
 ],
 plugins: ['prettier'],
 rules: {
 'prettier/prettier': 'error'
 }
}

The prettier/prettier rule enforces that your code follows Prettier’s formatting rules.

If you’re using @nuxtjs/eslint-config, you might need to adjust the configuration to ensure it works with Prettier. The configuration might look like this:

module.exports = {
 extends: [
 '@nuxtjs',
 'prettier'
 ],
 // Your other ESLint rules
}

After making these changes, restart VS Code and try formatting your .vue files again. The integration between ESLint and Prettier should now work smoothly, allowing Prettier to format your code according to your specifications.

For additional compatibility, you might also need to add prettier to your .prettierignore file to prevent conflicts with ESLint configuration files.

Troubleshooting Prettier Not Formatting Vue Files

If you’ve followed all the previous steps and Prettier still isn’t formatting your Vue files, don’t worry – there are several additional troubleshooting steps you can take to identify and resolve the issue.

First, verify that Prettier is actually installed and accessible in your project. Run the following command in your project’s terminal:

npx prettier --version

If this command returns a version number, Prettier is properly installed. If not, you’ll need to install it as described in the previous sections.

Next, check if there are any syntax errors in your Vue files that might be preventing Prettier from formatting them. Try to isolate the issue by creating a simple test.vue file with some unformatted code:

<template>
<div class="example">Hello World</div>
</template>

<script>
export default {
 data() {
 return {
 message: 'Hello World'
 }
 }
}
</script>

<style scoped>
.example {
 color: red;
}
</style>

If Prettier formats this test file but not your other files, the issue might be specific to the content or complexity of your original files.

Another common issue is file permissions. Ensure that your project files aren’t read-only, as this could prevent Prettier from making changes to them.

If you’re using Git, check if your .prettierrc file is being ignored. Run:

git status

If you don’t see .prettierrc in the output, it might be ignored by your .gitignore file. Remove it from .gitignore or create a new .prettierrc in a location that isn’t ignored.

Also, check for conflicting extensions in VS Code. Some extensions like Vetur (for Vue 2) or Volar (for Vue 3) might have their own formatting capabilities that interfere with Prettier. Try disabling these extensions temporarily to see if that resolves the issue.

If you’re working in a monorepo or have multiple node_modules directories, ensure you’re running commands and configuring VS Code to use the correct instance of Prettier from your project’s node_modules directory.

Finally, try running Prettier from the command line to see if it works outside of VS Code:

npx prettier --write path/to/your/file.vue

If this command successfully formats your file, the issue is likely related to VS Code configuration rather than your Prettier setup.

Advanced Configuration for Nuxt 3 Projects

Nuxt 3 introduces some changes compared to Nuxt 2 that affect how Prettier and ESLint should be configured. If you’re working with a Nuxt 3 project, there are some specific considerations to ensure proper formatting.

First, Nuxt 3 includes ESLint by default with a recommended configuration. However, this configuration might not include Prettier integration out of the box. To enhance the default configuration for Prettier, you can create or modify your .eslintrc.cjs file (using .cjs extension to ensure it’s treated as CommonJS):

module.exports = {
 extends: [
 'eslint:recommended',
 '@nuxt/eslint-config',
 'prettier'
 ],
 plugins: ['prettier'],
 rules: {
 'prettier/prettier': 'error'
 }
}

For Nuxt 3, you might also want to install @nuxt/eslint-config if it’s not already included:

npm install --save-dev @nuxt/eslint-config

Another consideration for Nuxt 3 is the use of Nitro, Nuxt’s underlying server engine. If you’re using TypeScript with Nuxt 3, you’ll need to ensure your Prettier configuration handles TypeScript files correctly. Add the following to your .prettierrc:

{
 "tabWidth": 2,
 "semi": false,
 "singleQuote": true,
 "plugins": ["prettier-plugin-vue"],
 "overrides": [
 {
 "files": "*.{ts,tsx}",
 "options": {
 "parser": "typescript"
 }
 }
 ]
}

This configuration ensures that Prettier uses the appropriate parser for TypeScript files while maintaining your preferred formatting style for Vue files.

Nuxt 3 also supports using ESLint flat config files (.eslint.config.js). If you prefer this format, your configuration might look like this:

import nuxt from '@nuxt/eslint-config/flat'
import prettier from 'eslint-config-prettier'

export default [
 ...nuxt,
 prettier,
 {
 rules: {
 'prettier/prettier': 'error'
 }
 }
]

Remember to restart VS Code after making any configuration changes to ensure the new settings take effect. Nuxt 3’s improved module system might require this for proper integration with development tools.

Alternative Solutions and Best Practices

If you’ve tried all the previous solutions and Prettier still isn’t working in your Nuxt project, there are alternative approaches and best practices you can consider.

One popular alternative is to use Antfu’s ESLint configuration, which specifically optimizes the integration between ESLint and Prettier for Vue and Nuxt projects. This configuration is designed to work out of the box with minimal setup. To use it, first uninstall your existing ESLint configuration:

npm uninstall @nuxtjs/eslint-config eslint eslint-plugin-vue

Then install Antfu’s ESLint configuration:

npm install --save-dev eslint @antfu/eslint-config

Update your .eslintrc.js to use this configuration:

module.exports = {
 extends: ['@antfu']
}

This approach simplifies the configuration process and often resolves compatibility issues between ESLint and Prettier.

Another best practice is to use VS Code’s workspace‑specific settings. Create a .vscode/settings.json file in your project root with the following configuration:

{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
 },
 "[vue]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "prettier.requireConfig": true,
 "prettier.useEditorConfig": false
}

This workspace‑specific configuration ensures that Prettier is used consistently across your team and prevents conflicts with global VS Code settings.

For monorepo setups, consider using a tool like prettier-plugin-packagejson to format your package.json files consistently with your code style. Install it with:

npm install --save-dev prettier-plugin-packagejson

And add it to your .prettierrc:

{
 "tabWidth": 2,
 "semi": false,
 "singleQuote": true,
 "plugins": ["prettier-plugin-vue", "prettier-plugin-packagejson"]
}

Finally, if you’re working on a team, establish a clear code style guide document that explains how Prettier and ESLint are configured in your project. This helps team members understand the expected formatting and troubleshoot issues when they arise.

Remember that consistency in code formatting is more important than any specific formatting style. Choose an approach that works reliably for your team and stick with it.

Conclusion

Resolving the issue of Prettier not formatting code in VS Code for Nuxt applications requires a systematic approach that addresses potential problems at multiple levels. By following the steps outlined in this guide, you should be able to identify and fix the root cause of your formatting issues.

The most common solutions include ensuring proper installation of prettier-plugin-vue for Vue template formatting, configuring VS Code to use Prettier as the default formatter, and properly integrating Prettier with ESLint using eslint-config-prettier and eslint-plugin-prettier. For Nuxt 3 projects, specific configuration adjustments might be needed to work with the framework’s updated defaults.

Remember to restart VS Code after making configuration changes and test your setup with a simple Vue file to verify that Prettier is working correctly. If issues persist, the troubleshooting steps provided should help you identify and resolve the problem.

Ultimately, a properly configured Prettier setup will save you and your team countless hours of manual formatting while ensuring consistent code style across your Nuxt projects. Take the time to set it up correctly, and you’ll reap the benefits in your daily development workflow.

Sources

1. Medium Article on ESLint-Prettier Setup — Comprehensive guide for proper ESLint and Prettier integration in Vue/Nuxt projects: https://medium.com/@gogl.alex/how-to-properly-set-up-eslint-with-prettier-for-vue-or-nuxt-in-vscode-e42532099a9c

2. W3Tutorials Troubleshooting Guide — Specific troubleshooting table addressing exact symptoms with clear fixes for Prettier not working: https://www.w3tutorials.net/blog/why-does-prettier-not-format-code-in-vs-code/

3. Dev.to Nuxt 3 Configuration — Complete Nuxt 3 specific configuration examples with restart requirements: https://dev.to/dmitrevnik/configure-eslint-prettier-for-nuxt-3-45f7

4. GitHub Gist Configuration Example — Complete .eslintrc.js configuration example for Nuxt projects: https://gist.github.com/onlime/4025b7535550b7a31c75f3ff89f926c5

5. Stack Overflow on Vue/Nuxt Linting — Information about extension conflicts between Vetur and Prettier: https://stackoverflow.com/questions/53892664/use-vue-nuxt-linting-rules-in-vscode

6. Reddit Discussion on VS Code Formatter Settings — Tip about setting the correct default formatter in VS Code for Nuxt projects: https://www.reddit.com/r/Nuxt/comments/1leeib3/does_vscode_support_native_nuxteslint_module/