(feature): Zed Support

[pauliesnug]

Clear and concise description of the problem

I recently switched to Zed but the ESLint support is a little confusing and when trying to transfer over the configuration from VSCode in the repo I ended up breaking the ESLint support entirely. I would like to be able to easily use antfu/eslint-config with zed.

Suggested solution

It would be nice to have some documentation for using Zed with antfu/eslint-config as the configuration options aren't 1:1 with VSCode.

Alternative

No response

Additional context

https://zed.dev/docs/languages/javascript#eslint

Validations

• [x] Follow our Code of Conduct
• [x] Read the Contributing Guide.
• [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[antfu]

I would be happy to document it if you figure out a way to set it up - as I don't use Zed myself, I am counting on the community to do that.

[mashpie]

While still struggeling I found a kind-of working setting like this:

{
  "prettier": {
    "enabled": false
  },
  "format_on_save": "on",
  "tab_size": 2,
  "languages": {
    "JavaScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    },
    "TypeScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    },
    "Vue.js": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  },
  "lsp": {
    "eslint": {
      "settings": {
        "experimental": {
          "useFlatConfig": true
        },
        "workingDirectory": {
          "mode": "auto"
        }
      }
    }
  }
}

which works with simple setups, like

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
  stylistic: {
    indent: 2,
    quotes: 'single',
    semi: false,
  },
  rules: {
    // Test with basic rules first
    'quotes': ['error', 'single'],
    'semi': ['error', 'never'],
    'comma-dangle': ['error', 'always-multiline']
  }
})

but this still is not working reliable in vue for example. Rules that worked this time, don't work next time while npx eslint --fix from terminal catches everything.

Zed's docs are limited on that topic too, and there have been a lot of workarounds published in blogs and communities - which seam to be outdated or only working in specific use-cases. So while this should work to enable eslint as formatter:

{
  "languages": {
    "JavaScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  }
}

https://zed.dev/docs/languages/javascript#eslint

this blog post (https://slims.bearblog.dev/setting-up-zed-with-eslint-only-formatting/) got mentioned as a hack for keeping it working:

{
  "languages": {
    "JavaScript": {
      "formatter": {
        "external": {
          "command": "cat << EOF",
          "arguments": []
        }
      },
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  }
}

For me it's fine with js/ts projects working on backend code only. As soon I get some FE oder meta-framework in the game, I get back to vscode... and wait again

[weiland]

When zed is running ESLint, there is an environment variable "ZED_ENVIRONMENT": "cli", so one could add process.env.ZED_ENVIRONMENT to isInEditorEnv() in utils.ts.

[aizigao]

for after zed 0.210

{
     "format_on_save": "on",
     "languages": {
         "TypeScript": {
             "code_actions_on_format": {
                 "source.fixAll.eslint": true
             },
             "formatter": [], // to fobid other default formatter --> prettier
             "format_on_save": "on"
         },
         "JavaScript": {
             "code_actions_on_format": {
                 "source.fixAll.eslint": true
             },
             "format_on_save": "on"
         },
         "Vue.js": {
             "formatter": [],
             "code_actions_on_format": {
                 "source.fixAll.eslint": true,
                 // "source.fixAll.stylelint": true // If you use  stylelint 
             },
             "format_on_save": "on"
         },
         // if you use stylelint
         "LESS": {
             "code_actions_on_format": {
                 "source.fixAll.stylelint": true
             },
             "format_on_save": "on"
         }
     },
     "lsp":{
         "eslint": {
             "settings": {
                 "rulesCustomizations": [
                     // Silent the stylistic rules in you IDE, but still auto fix them
                     { "rule": "style/*", "severity": "off", "fixable": true },
                     { "rule": "format/*", "severity": "off", "fixable": true },
                     { "rule": "*-indent", "severity": "off", "fixable": true },
                     { "rule": "*-spacing", "severity": "off", "fixable": true },
                     { "rule": "*-spaces", "severity": "off", "fixable": true },
                     { "rule": "*-order", "severity": "off", "fixable": true },
                     { "rule": "*-dangle", "severity": "off", "fixable": true },
                     { "rule": "*-newline", "severity": "off", "fixable": true },
                     { "rule": "*quotes", "severity": "off", "fixable": true },
                     { "rule": "*semi", "severity": "off", "fixable": true }
                 ]
             }
         }
     }
}