ESLint Not Fixing on Save in VSCode

When ESLint fails to automatically fix issues on save in Visual Studio Code, it's usually due to configuration issues rather than a fundamental problem with ESLint itself. This article covers the most effective solutions to get auto-fixing working properly.

Problem Overview

ESLint auto-fix on save may fail for several common reasons:

• Missing or misconfigured VS Code settings
• Workspace directory detection issues
• Missing ESLint dependencies or plugins
• Formatter conflicts
• Extension approval requirements

Primary Solutions

1. Configure VS Code Settings

The most common fix is ensuring your VS Code settings are properly configured. Add these settings to your .vscode/settings.json file:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true
}

TIP

Place the .vscode folder at the root of your project directory for optimal results.

2. Set ESLint Working Directories

For projects with multiple ESLint configurations or monorepos, set the working directory mode:

{
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

This helps VS Code automatically detect the correct ESLint configuration for each file.

3. Configure Default Formatters

Ensure ESLint is set as the default formatter for your language files:

{
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

4. Complete Configuration Example

Here's a comprehensive settings configuration that works for most projects:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": true
  },
  "eslint.format.enable": true,
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

Troubleshooting Steps

1. Verify ESLint Functionality

First, check if ESLint works from the command line:

npx eslint --ext ".js,.vue" --fix .

If this command fails, you have an ESLint configuration issue rather than a VS Code problem.

2. Check for Missing Dependencies

The original error mentioned a missing eslint-plugin-import. Install missing plugins:

npm install --save-dev eslint-plugin-import
# or
yarn add --dev eslint-plugin-import

3. Restart ESLint Server

Sometimes the ESLint server needs to be restarted:

1. Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
2. Search for "ESLint: Restart ESLint Server"

4. Approve ESLint Extension

If you see ESLint in the status bar with a warning icon, click it and approve the extension for use in your workspace.

5. Reinstall ESLint Extension

If problems persist, try reinstalling the ESLint extension:

1. Uninstall the ESLint extension
2. Restart VS Code
3. Reinstall the extension from marketplace

6. Check Flat Configuration Setting

For newer ESLint versions using flat config, ensure the correct setting:

{
  "eslint.useFlatConfig": false
}

Set to true if you're using eslint.config.js instead of .eslintrc.js.

Common Pitfalls

WARNING

Avoid formatter conflicts by ensuring only one formatter is active per file type. VS Code will show a notification if multiple formatters are configured for the same file type.

DANGER

Don't place formatter settings in language-specific sections that conflict with your global ESLint settings. This can prevent auto-fix from working correctly.

Advanced Configuration

For Vue/Nuxt projects like the original question, ensure proper parser configuration:

// .eslintrc.js
module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ]
}

Verifying the Fix

After applying these changes:

1. Save a file with ESLint errors
2. Check that errors are automatically fixed
3. Verify in the ESLint output channel that no errors occur during the fix process

Access the output channel by:

1. Opening Command Palette
2. Searching for "ESLint: Show Output Channel"

Conclusion

ESLint auto-fix on save issues typically resolve with proper configuration of VS Code settings, ensuring correct working directories, and resolving dependency conflicts. Start with the basic configuration and progress through the troubleshooting steps until auto-fixing works correctly.

For persistent issues, check the ESLint output channel for specific error messages that can guide your troubleshooting efforts.