ESLint rules get put inline on save

[tance77]

Check for existing issues

• [X] Completed

Describe the bug / provide steps to reproduce it

When saving and eslint runs rules get put inline as comment in the wrong programming language.

It shouldn't put the rule in as a comment at all, but it also inserts it as the wrong type of comment for HTML

settings.json

{
  "tab_size": 2,
  "theme": "Ayu Mirage",
  "base_keymap": "JetBrains",
  "buffer_font_size": 15,
  "buffer_font_family": "MonoLisa",
  "indent_guides": {
    "enabled": true,
    "coloring": "indent_aware"
  },
  "hour_format": "hour12",
  "languages": {
    "Vue.js": {
      "use_autoclose": true,
      "tab_size": 4,
      "remove_trailing_whitespace_on_save": true,
      "preferred_line_length": 1000,
      "soft_wrap": "none",
      "formatter": {
        "code_actions": {
          "source.fixAll.eslint": true,
          "source.organizeImports": true
        }
      }
    },
    "JavaScript": {
      "use_autoclose": true,
      "tab_size": 4,
      "remove_trailing_whitespace_on_save": true,
      "preferred_line_length": 1000,
      "soft_wrap": "none",
      "formatter": {
        "code_actions": {
          "source.fixAll.eslint": true,
          "source.organizeImports": true
        }
      }
    },
    "TypeScript": {
      "use_autoclose": true,
      "tab_size": 4,
      "remove_trailing_whitespace_on_save": true,
      "preferred_line_length": 1000,
      "soft_wrap": "none",
      "formatter": {
        "code_actions": {
          "source.fixAll.eslint": true,
          "source.organizeImports": true
        }
      }
    }
  }
}

Environment

Zed: v0.139.3 (Zed) OS: macOS 14.5.0 Memory: 32 GiB Architecture: aarch64

If applicable, add mockups / screenshots to help explain present your vision of the feature

It only does it with the on save function. If i use the editors fix all problems automatically everything is fine

This is a vue file and puts a rule in when it shouldn't put any rule in. Even worse it puts it in as a comment but html doesn't support comments with // it needs <!---->

So I end up with rules in my preview on the HTML page.

If applicable, attach your ~/Library/Logs/Zed/Zed.log file to this issue.

No response

[tance77]

Any progress on this? This is very frustrating fighting with the comments being put in. Loving the IDE so far.

[mrnugget]

Do you have an example configuration for ESLint/Prettier/... to reproduce this?

[tance77]

@mrnugget

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-recommended', 'plugin:vue/vue3-strongly-recommended', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'array-callback-return': [
      'error',
      {
        // 允许隐式
        allowImplicit: true,
      },
    ],
    'space-before-function-paren': 0,
    'no-console': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    'vue/multi-word-component-names': 'off',
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        singleQuote: true,
        semi: true,
        tabWidth: 2,
        useTabs: false,
        vueIndentScriptAndStyle: true,
        printWidth: 1000,
        singleAttributePerLine: false,
      },
    ],
  },
};

[mrnugget]

Do you also have an minimal reproducible example for how to reproduce it? I fear that the package.json is as important as the ESLint configuration.

[tance77]

I am having trouble reproducing it now. Maybe a recent update fixed it?

[mrnugget]

There haven't been any changes to the ESLint adapter in the last 2 weeks, so I'd say that's unlikely, but hey, that's still good news.

So, how about this: we close the ticket, but if you bump into it, you try to see if you can reproduce it reliably in a small example and we reopen the ticket?

[grzegorzkiselev]

@mrnugget I have the same problem. I found out that it is triggered by the source.organizeImports or source.AddMissingImports options.

Calling addMissingImports via source actions dropdown does not cause this behavior. It seems like addMissingImports somehow triggers first options from related picture.

Here is repository with minimal example and video demonstration: https://github.com/grzegorzkiselev/zed-disable-rules-bug-demo

[mrnugget]

Thanks @grzegorzkiselev. Yeah, that also came up in this thread: https://github.com/zed-industries/zed/issues/13633#issuecomment-2210671815

I still don't understand how to influence that behaviour.

[grzegorzkiselev]

@mrnugget Could this be related to the globally installed version of eslint or typescript? Or with the @typescript-eslint plugin?

I migrated to eslint 9.7.0 and removed all the globally installed related modules. It doesn’t solve the issue.

[mrnugget]

Interesting!! So you upgraded in your local project?

[grzegorzkiselev]

This was a mistake. At first the error actually went away, but then it came back again, so the problem is not related to version of eslint or typescript, and not with their global installation.

It seems that there is a module that is responsible for managing imports, and it somehow conflicts with the formatter.

I did not find information on whose help import management is organized. Is this a prettier plugin? It works even if

"prettier": {
  "allowed": false
 },

is set in the configuration

[mrnugget]

I did not find information on whose help import management is organized. Is this a prettier plugin? It works even if

Depends on what you have configured. Do you have a stock Zed configuration?