How to Configure Zed Editor Linting and Formatting for Nuxt Development

Aron Schüler Published Oct 21, 2025

Intro

Zed is a lightning-fast, modern code editor that’s gaining popularity among developers for its performance and collaborative features. If you’re working with Nuxt.js, properly configuring Zed is essential to avoid conflicts between different linting and formatting tools.

By default, Zed comes with Prettier enabled, which can clash with Nuxt’s built-in ESLint configuration. Nuxt generates its own ESLint config at .nuxt/eslint.config.mjs, and we need to tell Zed to respect this setup instead of using its own formatting defaults. This configuration ensures that your code formatting and linting work seamlessly with Nuxt’s conventions, preventing frustrating formatting wars between different tools.

In this guide, I’ll walk you through configuring Zed specifically for Nuxt development, ensuring your editor works harmoniously with your project’s linting setup.

Step-by-Step Guide

1. Step 1: Open the project-specific configuration

Open the Command Palette with CMD-P or Ctrl-P.

Enter: open project settings and press enter.

This opened file will contain all your project-specific Zed configurations, so that you don’t configure this on a global level.

3. Step 3: Add the Nuxt-Specific Configuration

Open .zed/settings.json and add the following configuration:

{
  "prettier": {
    "allowed": false
  },
  "language_servers": [
    "!prettier",
    "..."
  ],
  "lsp": {
    "eslint": {
      "settings": {
        "configFile": "frontend/.nuxt/eslint.config.mjs"
      }
    }
  }
}

Let’s break down what each setting does:

• "prettier": { "allowed": false }: This disables Prettier as a formatter in Zed for this project. Since Nuxt uses ESLint with formatting rules, we don’t want Prettier interfering.

• "language_servers": ["!prettier", "..."]: The exclamation mark prefix (!) explicitly disables the Prettier language server. This ensures Zed won’t load Prettier at all for this project. The "..." includes all other default language servers

• "lsp": { "eslint": { ... } }: This configures the ESLint Language Server Protocol (LSP) integration. The configFile property points to Nuxt’s auto-generated ESLint configuration file.

Important Note: If your Nuxt project is not in a frontend/ subdirectory, you have to adjust the path accordingly:

{
  "lsp": {
    "eslint": {
      "settings": {
        "configFile": ".nuxt/eslint.config.mjs"
      }
    }
  }
}

4. Step 4: Restart Zed

After saving your settings file, completely quit and restart Zed to ensure all changes take effect. You can verify the configuration is working by:

1. Opening a .vue or .ts file in your Nuxt project
2. Checking that ESLint or TypeScript errors appear correctly in the editor
3. Confirming that formatting follows your ESLint rules (not Prettier defaults) both in the script and template sections

5. Step 5: Verify ESLint is Working

To test that everything is configured correctly, try intentionally breaking an ESLint rule in your code. For example, add an unused variable:

<script setup lang="ts">
const unusedVariable = 'test'; // This should show an ESLint warning
// These new lines should be removed
 
 
 
</script>
 
<template>
  <div>Hello Nuxt!</div>
</template>

You should see a warning or error underline from ESLint. If you don’t see any indicators, check that:

• Your Nuxt project has ESLint properly installed (npm install or pnpm install)
• The .nuxt directory exists (run npm run dev at least once to generate it)
• The path in your settings.json matches your project structure

Conclusion

Configuring Zed for Nuxt development is straightforward once you understand the interaction between formatting tools. By disabling Prettier and pointing ESLint to Nuxt’s auto-generated configuration, you create a smooth development experience without conflicting format-on-save behaviors.

The key takeaways are:

• Disable Prettier completely to avoid conflicts with ESLint
• Point ESLint to Nuxt’s generated configuration file
• Adjust paths based on your project structure
• Restart Zed after making configuration changes

This setup ensures your code formatting stays consistent with your Nuxt project’s standards and your team’s conventions. Have you encountered any other Zed configuration challenges with Nuxt? Share your experiences in the comments below!