Closed jamesdbruner closed 1 year ago
Ok I figured it out based on this from the last few days. Here is my working config for eslint with prettier plugin:
{
"theme": "Andromeda",
"buffer_font_size": 15,
"vim_mode": true,
"lsp": {
"typescript-language-server": {
"initialization_options": {
"checkOnSave": {
"command": "eslint_d",
"arguments": [
"--stdin",
"--stdin-filename",
"{buffer_path}",
"--fix-to-stdout"
]
}
}
}
}
}
@ijsnow , I know that you've edited your comment, but I would nonetheless want to address that part separately: we have a https://github.com/zed-industries/docs/ repository, fully open for external contributions and welcoming PRs.
Our main codebase is written in Rust, and knowing how to configure every web project is hard: I am not proficient enough to make extensive docs on the topic, but at least I am trying to elaborate the general principles in default settings descriptions.
At this point, not sure how to make things better but welcoming any input on the topic in discussions, PRs or issues.
This is my settings - The prettier is not working neither the language-server formatting, setting it to the language-server- formatting works though. Setting it to prettier or auto doesn't work when there is no prettier package or config in my project. I want to use Zed prettier integration to work regardless if the project config or prettier is installed or not.
"base_keymap": "VSCode", "buffer_font_family": "Liga MonacoB", "theme": "Andromeda", "buffer_font_size": 15, "autosave": "on_window_change", "format_on_save": "on", "confirm_quit": true, "formatter": "auto", "inlay_hints": { // Global switch to toggle hints on and off, switched off by default. "enabled": true, // Toggle certain types of hints on and off, all switched on by default. "show_type_hints": true, "show_parameter_hints": true, // Corresponds to null/None LSP hint type value. "show_other_hints": true } }
"formatter": "auto"
looks legit and the same works for a random project without prettier for me, so I cannot help you with just this information.
What is the project you're using, can I clone and test on it? Any sequence of actions (files opened, actions made) are interesting too. Also,
doesn't work when there is no prettier package or config in my project
Does it fail or rather not working silently? What do Zed logs and LSP logs show in relation to prettier? (see above comments on how to access either).
The way prettier-less projects should work is
~/Library/Application\ Support/Zed/prettier/
(there are issues with language server installations for some users, could be the culprit)So, there's not much to fail on. One extra possible step to fail on: if the project does declares prettier dependency in package.json but had not installed it, Zed will fail since it does not make assumptions on users' tools needed to install the packages and does not do the installation.
But this all is useless guessing without a proper reproduction example.
I am still entirely unclear on how I can get nextJS
warnings to show up with estlint
. Prettier can format my file, but without the actual error checking I'm kind of at a loss.
Ok I figured it out based on this from the last few days. Here is my working config for eslint with prettier plugin:
{ "theme": "Andromeda", "buffer_font_size": 15, "vim_mode": true, "lsp": { "typescript-language-server": { "initialization_options": { "checkOnSave": { "command": "eslint_d", "arguments": [ "--stdin", "--stdin-filename", "{buffer_path}", "--fix-to-stdout" ] } } } } }
ty for sharing! is this your exact settings.json? I can't get it to auto-fix in a nextjs project. eslint is working tho.. i just have to manually do npx eslint . --fix
in order for the file to auto format.
Is your formatter set to auto
?
Edit: Here is my Zed.log
2023-11-03T08:24:07 [WARN] No URL found for Core Text font!
2023-11-03T08:24:07 [INFO] starting language server "typescript-language-server", path: "/Users/me/code/demo", id: 1
2023-11-03T08:24:07 [INFO] starting language server "eslint", path: "/Users/me/code/demo", id: 2
2023-11-03T08:24:07 [INFO] Node runtime install_if_needed
2023-11-03T08:24:07 [INFO] Found prettier in "/Users/me/code/demo", starting.
2023-11-03T08:24:07 [INFO] Node runtime install_if_needed
2023-11-03T08:24:07 [INFO] Started prettier in "/Users/me/code/demo"
2023-11-03T08:24:07 [WARN] failed to deserialize LSP message:
{"jsonrpc":"2.0","error":{"code":-32600,"message":"error during message '{\"jsonrpc\":\"2.0\",\"method\":\"initialized\",\"params\":{}}' handling: Error: Message id is undefined: {\"jsonrpc\":\"2.0\",\"method\":\"initialized\",\"params\":{}}"}}
2023-11-03T08:24:08 [INFO] connected to rpc endpoint https://collab-preview.zed.dev/rpc
2023-11-03T08:24:08 [INFO] Node runtime install_if_needed
2023-11-03T08:24:08 [INFO] 2 unhandled notification window/logMessage:
{
"type": 3,
"message": "ESLint server running in node v18.15.0"
}
2023-11-03T08:24:08 [INFO] Node runtime install_if_needed
2023-11-03T08:24:08 [INFO] Fetching default prettier and plugins: [("prettier", "3.0.3")]
2023-11-03T08:24:08 [INFO] Node runtime install_if_needed
2023-11-03T08:24:08 [INFO] 2 unhandled notification eslint/status:
{
"uri": "file:///Users/me/code/demo/db/pool.ts",
"state": 1
}
2023-11-03T08:24:08 [INFO] 2 unhandled notification eslint/status:
{
"uri": "file:///Users/me/code/demo/db/index.ts",
"state": 1
}
2023-11-03T08:24:08 [INFO] 2 unhandled notification eslint/status:
{
"uri": "file:///Users/me/code/demo/app/api/auth/[...nextauth].ts",
"state": 1
}
2023-11-03T08:24:08 [INFO] 2 unhandled notification eslint/status:
{
"uri": "file:///Users/me/code/demo/app/api/zip-codes/route.ts",
"state": 1
}
2023-11-03T08:24:09 [INFO] Node runtime install_if_needed
2023-11-03T08:24:09 [INFO] 1 unhandled notification window/logMessage:
{
"type": 3,
"message": "Using Typescript version (user-setting) 5.2.2 from path \"/Users/me/code/demo/node_modules/typescript/lib/tsserver.js\""
}
2023-11-03T08:24:09 [INFO] 1 unhandled notification $/typescriptVersion:
{
"version": "5.2.2",
"source": "user-setting"
}
@SomeoneToIgnore i have a project where prettier still doesn’t work, even though it’s in the devDependencies
and configured in package.json via the "prettier": {…}
key. the repo is open source, so hopefully it can serve as a reproducible instance: https://github.com/acusti/uikit/
i put "formatter": "auto"
in my zed settings.json. here are the logs after opening zed fresh, opening a .tsx file (packages/date-picker/src/MonthCalendar.tsx
), adjusting indentation, and hitting save:
2023-11-05T17:44:47 [INFO] Opening main db
2023-11-05T17:44:47 [INFO] starting language server "typescript-language-server", path: "/Users/andrew/Projects/uikit", id: 1
2023-11-05T17:44:47 [INFO] starting language server "eslint", path: "/Users/andrew/Projects/uikit", id: 2
2023-11-05T17:44:47 [INFO] starting language server "tailwindcss-language-server", path: "/Users/andrew/Projects/uikit", id: 3
2023-11-05T17:44:47 [INFO] Node runtime install_if_needed
2023-11-05T17:44:47 [INFO] Node runtime install_if_needed
2023-11-05T17:44:47 [INFO] Node runtime install_if_needed
2023-11-05T17:44:47 [INFO] Node runtime install_if_needed
2023-11-05T17:44:47 [INFO] Node runtime install_if_needed
2023-11-05T17:44:48 [INFO] 2 unhandled notification window/logMessage:
{
"type": 3,
"message": "ESLint server running in node v18.15.0"
}
2023-11-05T17:44:48 [INFO] 2 unhandled notification eslint/noLibrary:
{
"source": {
"uri": "file:///Users/andrew/Projects/uikit/packages/date-picker/src/MonthCalendar.tsx"
}
}
2023-11-05T17:44:48 [INFO] Fetching default prettier and plugins: [("prettier-plugin-tailwindcss", "0.5.6"), ("prettier", "3.0.3")]
2023-11-05T17:44:48 [INFO] Node runtime install_if_needed
2023-11-05T17:44:48 [INFO] Node runtime install_if_needed
2023-11-05T17:44:48 [INFO] Node runtime install_if_needed
2023-11-05T17:44:48 [INFO] 3 unhandled notification window/logMessage:
{
"type": 4,
"message": "[Global] Creating projects: []"
}
2023-11-05T17:44:49 [INFO] Found prettier in "/Users/andrew/Projects/uikit", starting.
2023-11-05T17:44:49 [INFO] Node runtime install_if_needed
2023-11-05T17:44:49 [INFO] Node runtime install_if_needed
2023-11-05T17:44:49 [ERROR] invalid LSP message header ""
2023-11-05T17:44:49 [ERROR] server shut down
2023-11-05T17:44:49 [ERROR] Failed to create prettier instance for buffer during autoformatting: prettier start: prettier server initialization: oneshot canceled
2023-11-05T17:44:49 [INFO] 1 unhandled notification window/logMessage:
{
"type": 2,
"message": "[lspserver] Typescript specified through user setting ignored due to invalid path \"/Users/andrew/Projects/uikit/lib/tsserver.js\""
}
2023-11-05T17:44:49 [INFO] 1 unhandled notification window/logMessage:
{
"type": 3,
"message": "Using Typescript version (bundled) 5.0.4 from path \"/Users/andrew/Library/Application Support/Zed/languages/typescript-language-server/node_modules/typescript/lib/tsserver.js\""
}
2023-11-05T17:44:49 [INFO] 1 unhandled notification $/typescriptVersion:
{
"version": "5.0.4",
"source": "bundled"
}
Thank you, it's a yarn
project and modern versions do not populate node_modules
at all, which we currently rely on when searching for prettier, instead, there's only .yarn/cache/prettier-npm-2.8.0-746e3df53e-72004ce0cc.zip
artifacts in the project.
The problem is, we do not use a real node runtime when searching for prettier and neither we do invoke it through project's set-up, so that needs more work to understand how to get it running..
I would recommend to create a separate issue about yarn projects, since it seems that the fix won't be that easy and straightforward.
This issue is closed, but does someone figured out how to implement autofix on save for eslint without 3rd party packages, except eslint itself?
{
"theme": "Andromeda",
"buffer_font_size": 15,
"language_overrides": {
"JavaScript": {
"format_on_save": "on",
"formatter": "auto"
}
}
}
Prettier is really slow with execution via node_modules/.bin/prettier
(in comparison with VSCode). Hopefully this will be fixed by a plugin when they come out.
For anyone looking to get TypeScript formatting via dprint
:
{
"language_overrides": {
"TypeScript": {
"format_on_save": "on",
"formatter": {
"external": {
"command": "node_modules/.bin/dprint",
"arguments": [
"fmt",
"--stdin",
"{buffer_path}"
]
}
}
}
}
}
It's fast, but in VS Code using the dprint plugin it's instant, so this is definitively a slightly worse experience...
It looks like Zed has some support of Prettier? While there is a prettier
as a formatter option, it didn't work for me. (Did nothing)
Until Zed supports Prettier through native extension, external command invocation seems like a great alternative!
However, calling node
or npx
is too slow for me. It takes almost 1 second every time I save my file.
I found out that bun
is a great alternative in this use case! It's almost instant and as fast as native VSCode extension.
"formatter": {
"external": {
"command": "bunx",
"arguments": ["prettier", "--stdin-filepath", "{buffer_path}", "--write"]
}
}
please reopen and fix this.
"external": {
"command": "bunx",
"arguments": ["prettier", "--stdin-filepath", "{buffer_path}", "--write"]
}
}
This is working as a workaround for now @shinebayar-g
this seems to work for me
"lsp": { "typescript-language-server": { "initialization_options": { "checkOnSave": { "command": "eslint_d", "arguments": [ "--stdin", "--stdin-filename", "{buffer_path}", "--fix-to-stdout" ] } } } }
however warnings are not fixed for example:
only errors are fixed when i save
if i run eslint_d src/app/\(login\)/login/components/UserAuthForm.tsx --fix
the warnings in the screenshot are fixed
@stabildev @shinebayar-g
It Seems Zed supported the format by Prettier with this "formatter": "auto"
config, but your discovery looks so nice.
"language_overrides": { "TypeScript": { "format_on_save": "on", "formatter": { "external": { "command": "node_modules/.bin/dprint", "arguments": [ "fmt", "--stdin", "{buffer_path}" ] } } } }
Also wondering this. I tried some different things, but could not get it work in zed. It only removes error.
Any news about that ? I wan't to use my eslint config to format, not prettier or other default formatting. It works fine in VSCode but it seems really complicated to do that in Zed. I think I have to wait before use this IDE.
I made this config :
{
"formatter": "language_server",
"language_overrides": {
"TypeScript": {
"format_on_save": {
"external": {
"command": "node_modules/.bin/eslint",
"arguments": [
"--stdin",
"--fix",
"--fix-to-stdout",
"--stdin-filename",
"{buffer_path}"
]
}
}
},
"JavaScript": {
"format_on_save": {
"external": {
"command": "node_modules/.bin/eslint",
"arguments": [
"--stdin",
"--fix",
"--fix-to-stdout",
"--stdin-filename",
"{buffer_path}"
]
}
}
}
}
}
But when I save non correct formatted file, nothing change now
@throrin19 I moved eslint to the new issue #4325 cause this one is closed only with prettier support despite the title 🫠
Just to follow-up here: I closed #4325 because I merged changes that allow eslint fix-all to work on save.
Also see this comment on how to "turn off" prettier: https://github.com/zed-industries/zed/issues/4325#issuecomment-1970637174
I have the same issue with eslint where it doesn't fix imports
Honestly, I don't know why everyone is calling this the "VSCode killer" when it's barely on par with other editors in terms of functionality. It's a cool idea, but I'm not going to use this app until it's finished and not half-baked.
Because it's the internet, everyone is overly dramatic and you shouldn't believe everything they write 😉
There are currently 2 channels for Zed: Stable and Preview. Preview gets most of the updates at the moment, but it is a bit unstable as things can change and things are being ironed out. A bit of patience and potential contributions can help speed up the process of Zed "training to be The Killer of VSCode" lol
I'd like to reiterate my solution above for anyone coming here still. The solution solved eslint
support, including formatting with prettier
, using the eslint_d daemon.
{
"lsp": {
"typescript-language-server": {
"initialization_options": {
"checkOnSave": {
"command": "eslint_d",
"arguments": [
"--stdin",
"--stdin-filename",
"{buffer_path}",
"--fix-to-stdout"
]
}
}
}
}
}
I'd like to reiterate my solution above for anyone coming here still. The solution solved
eslint
support, including formatting withprettier
, using the eslint_d daemon.{ "lsp": { "typescript-language-server": { "initialization_options": { "checkOnSave": { "command": "eslint_d", "arguments": [ "--stdin", "--stdin-filename", "{buffer_path}", "--fix-to-stdout" ] } } } } }
Thank you for sharing! How did you manage to make zed "respect" rules in .eslintrc.json
of the local project?
Update, this worked for me:
{
"languages": {
"TypeScript": {
"formatter": {
"external": {
"command": "eslint_d",
"arguments": [
"--stdin",
"--stdin-filename",
"{buffer_path}",
"--fix-to-stdout"
]
}
}
},
"TSX": {
"formatter": {
"external": {
"command": "eslint_d",
"arguments": [
"--stdin",
"--stdin-filename",
"{buffer_path}",
"--fix-to-stdout"
]
}
},
"preferred_line_length": 100
}
}
@demeralde can you expand a bit on this here?
I haven't been able to get ESLint working at all with Zed.
What have you tried? What's your setup? Do you have any steps to reproduce?
I wish it were as easy as merging one PR and it's fixed for everyone, but sadly it's not. There are a lot of different configurations that people use and VS Code (and its extensions!) have many fallbacks and different combinations that are hard to reproduce from the start. So we have to iterate and improve this bit by bit.
For others and myself ESLint works: it shows diagnostics, it fixes everything when saved. The video here isn't fake: https://github.com/zed-industries/zed/pull/8496 But that doesn't mean it works with every project yet! So I need all of your help by giving me some information on how to make it work for you :)
For anyone looking for a pure Eslint
solution, without prettier
or eslint_d
, this did the trick for me:
"languages": {
"JavaScript": {
"code_actions_on_format": {
"source.fixAll.eslint": true
}
},
"TypeScript": {
"code_actions_on_format": {
"source.fixAll.eslint": true
}
}
},
"formatter": {
"external": {
"command": "eslint --fix",
"arguments": ["fmt", "--stdin", "{buffer_path}"]
}
}
Another option is to use this solution https://github.com/zed-industries/zed/issues/8992#issuecomment-1995458959:
Credits to @klaframboise
"languages": {
"JavaScript": {
"formatter": {
"external": {
"command": "cat << EOF",
"arguments": []
}
},
"code_actions_on_format": {
"source.fixAll.eslint": true
}
}
}
@diegofontenelle that would do the same thing twice, right? What happens when you only use code_actions_on_format
? What does it say in the language server logs for ESLint? (debug: open language server logs
)
@mrnugget I tried using both individually, but only combined I got eslint
to properly format.
With only the languages configuration I got it to format, but it was overwritten by the LSP formatter. After adding the formatter configuration it stopped being overwritten and worked as expected.
Here is the output of the eslint
server logs:
ESLint library loaded from: /Users/diegofontenelle/code/my-project/node_modules/.pnpm/eslint@8.57.0/node_modules/eslint/lib/api.js
@diegofontenelle haven't tried but this solution looks like should work too and do not format twice the same code: https://github.com/zed-industries/zed/issues/8992#issuecomment-1995458959
@diegofontenelle haven't tried but this solution looks like should work too and do not format twice the same code: #8992 (comment)
Indeed it does work as well, thanks! I will add it to my original answer
Got it thanks! Yes, we need a way to only format with code actions.
Is there a way to support stylelint
formatting on a vue
file, when saving?
@dev-abota you can always shell out to a formatter: https://zed.dev/docs/javascript#code-formatting Would that help? Sorry, not super familiar with stylelint
or vue
.
I have already problem in latest main zed version.
Eslint format correctly file but directly after that, prettier launch it as you can see in this capture :
In log I can't seend eslint do something but I saw pretier do formatting :
stderr: Resolved config: {}, will format file 'repo/stacks/alerts/tests/handlers/alerts-cleanup-api.test.ts' with options: {"printWidth":80,"tabWidth":4,"plugins":[],"parser":"typescript","filepath":"repo/stacks/alerts/tests/handlers/alerts-cleanup-api.test.ts"}
This is my config :
// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
//
// To see all of Zed's default settings without changing your
// custom settings, run the `open default settings` command
// from the command palette or from `Zed` application menu.
{
"features": {
"copilot": false
},
"tab_size": 4,
"ui_font_size": 16,
"buffer_font_size": 16,
"terminal": {
"font_size": 11
},
"languages": {
"JavaScript": {
"code_actions_on_format": {
"source.fixAll.eslint": true
}
},
"TypeScript": {
"code_actions_on_format": {
"source.fixAll.eslint": true
}
}
},
"show_whitespaces": "all",
"show_wrap_guides": true,
"show_completion_documentation": true
}
But, If I save file twice, the second time only eslint formatting is made 😨 :
There's really no way to just say, I don't want to prettier at all, disable it?
Edit :
I change my config and set formatter
to language_server
, but after that, I have already the problem if I save file twice with no reason. All my logs are empty, I don't know how to find information about it :
Edit 2 :
I found how to fix that. I have to set formatter
to :
"formatter": {
"external": {
"command": "cat << EOF",
"arguments": []
}
}
But after that I have an error in zed footer :
I have the same issue on the below version:
Zed: v0.128.3 (Zed) OS: macOS 14.3.1 Memory: 8 GiB Architecture: aarch64
It seems prettier is clashing with ESLint, there's a flicker when saving.
In the prettier LSP logs I have:
stderr: Resolved config: {"tabWidth":4,"singleQuote":true,"arrowParens":"always","bracketSpacing":true,"printWidth":120,"jsxBracketSameLine":true,"semi":true,"trailingComma":"none","quoteProps":"consistent"}
and in my settings.json I have:
"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 } } }
When saving, it seems my ESLint config is applied, but then the prettier config is applied afterwards, leaving me with ESLint errors.
Yeah, there's no way to only format via code actions. I'll try to add something this week.
I want to use Zed and VS Code interchangeably because some features in Zed don't exist. How can I configure Zed to get similar results to VS Code?
@hungify2022 I think you will need to wait quite a bit longer. There are a lot of features present in VSCode that will take some time to develop. And there is a massive number of plugins to VSCode that it is unrealistic to expect the same level of customisability within the near future.
Hang tight and if you want try to contribute?
Just to record this here: I merged https://github.com/zed-industries/zed/pull/10121 which adds ability to only format via code actions.
In case someone (like me) runs into this problem: as of today, the configuration map key should be "languages", not "languages_override". You can find this in the Zed docs for JavaScript.
{
"languages": {
"JavaScript": {
"formatter": {
"external": {
"command": "prettier",
"arguments": ["--stdin-filepath", "{buffer_path}"]
}
}
}
}
}
I tried every way I could think of to try to get
format_on_save
to work with my existing eslint/prettier setup but I can't figure out how to make it work. I have a narwhal monorepo with aneslintrc.json
file at the root and one in every project and have it setup to use prettier as the formatter.In vscode and webstorm they pickup the nearest eslintrc and use those rules to format my file on save since I added these lines to my settings.json
Here's an example of what that root
eslintrc.json
looks like:Can I use the current
format_on_save
setting to replicate how vscode or webstorm work in this regard? I'm probably just being dumb but would really appreciate some clarification or direction. Awesome work so far, and if I can get this figured out Zed will likely be my editor of choice for the foreseeable future.