VSCode formatOnSave

Metadata

Ruby version: 2.5.1
@prettier/plugin-ruby version: 0.6.1

Errything looks good from cmd/cli! 👏

The vs-code prettier plugin seems to reach for another tool? I've fooled around with a .prettierrc also, but I'm assuming this is still too new for the vscode plugin to have this parser integrated?

I use the vs-code prettier plugin and it works for me with plugin-ruby. However, you have to install the plugin in the vscode plugin directory as it appears it doesn't look inside your project or even globally for plugins.

cd ~/.vscode/extensions/esbenp.prettier-vscode-1.8.1/
npm install @prettier/plugin-ruby

@dusty

@dusty

I've got this line in my settings.json:

  "[ruby]": {
    "editor.formatOnSave": true
  },

After your recommended step, I still get no action after "running save participants". ☹️

@chevinbrown

@chevinbrown

If I were to guess, I'd make sure that you have the most recent vscode-prettier plugin installed because I believe you will need prettier > 1.14. Also be sure to restart vscode after you added plugin-ruby to the vscode-prettier dir.

I don't have a specific ruby section in my config, but I do have editor.formatOnSave to true. I also don't have any other ruby plugins in vscode. Not sure if something else is taking over?

I found the tip from this thread

prettier/prettier-vscode#395

I've narrowed it down a bit--looks like the rubocop extension has some conflict?

[renderer1] [warning] Aborted format on save after 750ms is output in my window log when rubocop is enabled.
Everything works as expected when rubocop is disabled.

I have no idea what's going on with this and I don't use vscode, so any help on this would be appreciated!

I'm also probably 0 help on the vs-code front. I suspect it's more an issue with the prettier plugin & rubocop.
I'll open an issue over here: https://github.com/prettier/prettier-vscode.

@chevinbrown

@chevinbrown there is a setting in vscode called Format On Save Timeout, try to bump it to see if that helps. I suspect that running prettier and then rubocop together does not fit into 750ms

@somebody32

@somebody32 💕 that's about it...For some reason, rubocop is still is the "preferred" formatter (it seems to just ignore prettier)? In any case, with an opinionated linter I can accept not having rubocop lint... We'll probably lean towards throwing rubocop in CI instead of the editor.

For yall that are using vscode, do I understand it correctly that you have https://github.com/rubyide/vscode-ruby installed and that its automatically running rubocop and that's timing out?

Not for me--I use solargraph...but I've just toggled between solargraph and vscode-ruby. Both run well alongside prettier plugin-ruby. 👍
It (prettier) fails to run properly as soon as I enable rubocop even when I have formatting "off" for soloargraph/vscode-ruby.

I'm going to close this one in favor of tracking it over at prettier/prettier-vscode#731

Thanks for your work on this, @kddeisz!

Docs: Describe workaround for prettier-vscode

docs: describe workaround for prettier-vscode (#976)

I use the vs-code prettier plugin and it works for me with plugin-ruby. However, you have to install the plugin in the vscode plugin directory as it appears it doesn't look inside your project or even globally for plugins.
cd ~/.vscode/extensions/esbenp.prettier-vscode-1.8.1/
npm install @prettier/plugin-ruby

Just in case anyone else ends up here, I had to rebuild the /node_modules after installing the plugin by running npm i

@james-prado

@james-prado you're a lifesaver! Been banging my head trying to get this to work cause my team kept having whitespace changes. Much appreciated!

@james-prado

I use the vs-code prettier plugin and it works for me with plugin-ruby. However, you have to install the plugin in the vscode plugin directory as it appears it doesn't look inside your project or even globally for plugins.
cd ~/.vscode/extensions/esbenp.prettier-vscode-1.8.1/
npm install @prettier/plugin-ruby
Just in case anyone else ends up here, I had to rebuild the /node_modules after installing the plugin by running npm i

Thanks @james-prado you are a life saver

Manually installing the plugin in the extension itself is indeed what had made the trick for me initially, as for dozens of devs at the company I work at. However I do not think it is a desirable solution as it introduces a discrepancy between the version installed in the extension and that of your main project(s).
I went through the installation process with a fellow engineer this morning and what worked in the end was a combination of uninstalling and reinstalling the extension:

uninstall the Prettier extension
uninstall any other prettier extension (eslint-prettier etc)
quit VSCode
yarn install (assuming you already have installed @prettier/plugin-ruby in your package.json
open VSCode
open the JSON version of User settings (Preferences: Open Settings (JSON))
copy the lines hereunder

"[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
  },

check that esbenp.prettier-vscode has indeed disappeared from ~/.vscode/extensions
install the Prettier extension
Quit VSCode
Open VSCode

Some steps might be superfluous but this is the sequence that fixed several people's setup.

I opened a PR to update the README: #867

I use the vs-code prettier plugin and it works for me with plugin-ruby. However, you have to install the plugin in the vscode plugin directory as it appears it doesn't look inside your project or even globally for plugins.
cd ~/.vscode/extensions/esbenp.prettier-vscode-1.8.1/
npm install @prettier/plugin-ruby

Thanks. This comment is great for Mac and Linux.

And I would like to add the equivalent location for Windows and WSL. I tried and both are OK.

Windows: %USERPROFILE%.vscode\extensions
WSL: ~/.vscode-server/extensions

Hope this helps for Windows and WSL users.

Does this plugin work for IntelliJ? If so, would love any configuration advice.

Thank!

Use process.execPath instead of "node"

Does this plugin work for IntelliJ? If so, would love any configuration advice.

Thank!

Just integrated this with IntelliJ IDEA Ultimate and works great. Here are a few things I had to do before getting it working. Integrating this with VSCode worked pretty much OTB.

Make sure your project is a Ruby (or Rails) project. If you go to Project Structure > Modules and don't see the Ruby SDK and Gems tab, your project is not configured correctly. What helped me to fix this was deleting the .idea folder and import the project again. This is for the IDE find the correct Ruby version and installed gems.
Make sure you are running the latest version of the Ruby and Prettier plugins. Go to the Preferences > Plugins and update them.
In the Prettier preferences section (Languages & Frameworks > JavaScript > Prettier), add .rb extension in the Run for files input. I have it like this {**/*,*}.{js,ts,jsx,tsx,rb,rbs,haml}. Also tick the On save option if you like.

Hi! Just adding a piece of intel, may save someone an hour or two :) Spent quite some time trying to make Prettier format my Ruby files in VS Code.
I had all the gems and packages installed. The config file (.prettierrc.js in the current dir) included the Ruby plugin.
The formatter ran perfectly from the command line and with "Format Document (Forced)" command.

But VS Code was not offering "Format Document" context menu item for Ruby, and complained that no formatter for 'ruby' was installed.
Vs Code console output for Prettier did not provide any useful hints:

["INFO" - 02:11:19] Extension Name: esbenp.prettier-vscode.
["INFO" - 02:11:19] Extension Version: 10.1.0.

Turns out, I had to explicitly specify prettier.configPath setting. After I did this, the extension picked up the config and recognized Ruby.

Hi! Just adding a piece of intel, may save someone an hour or two :) Spent quite some time trying to make Prettier format my Ruby files in VS Code. I had all the gems and packages installed. The config file (.prettierrc.js in the current dir) included the Ruby plugin. The formatter ran perfectly from the command line and with "Format Document (Forced)" command.

But VS Code was not offering "Format Document" context menu item for Ruby, and complained that no formatter for 'ruby' was installed. Vs Code console output for Prettier did not provide any useful hints:
["INFO" - 02:11:19] Extension Name: esbenp.prettier-vscode.
["INFO" - 02:11:19] Extension Version: 10.1.0.
Turns out, I had to explicitly specify prettier.configPath setting. After I did this, the extension picked up the config and recognized Ruby.

Thanks for this, that's all mine was missing. Added this to my settings.json and I was set:
"prettier.configPath": "./path/to/.prettierrc.json"

replace ".path/to" with your actual path, which can be easily pulled from vs-code terminal with the command pwd

Navigation Menu

Repository navigation

VSCode formatOnSave #113

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

VSCode formatOnSave #113

Description

Metadata

Activity

dusty commented on Feb 15, 2019

chevinbrown commented on Feb 15, 2019

dusty commented on Feb 15, 2019

chevinbrown commented on Feb 16, 2019

kddnewton commented on Feb 17, 2019

chevinbrown commented on Feb 18, 2019

somebody32 commented on Feb 19, 2019

chevinbrown commented on Feb 19, 2019

kddnewton commented on Feb 19, 2019

chevinbrown commented on Feb 19, 2019

kddnewton commented on Feb 25, 2019

chevinbrown commented on Feb 25, 2019

james-prado commented on Sep 18, 2019

sunny-mittal commented on Nov 16, 2019

avosa commented on Feb 21, 2021

coisnepe commented on Feb 22, 2021

andyw8 commented on Apr 17, 2021

congminh1709 commented on Jan 30, 2022

Nealsoni00 commented on Sep 6, 2022

orlando commented on Dec 20, 2022

wetterkrank commented on Jan 6, 2024

szareey commented on Feb 24, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions