VSCode formatOnSave #113

chevinbrown · 2019-02-15T20:57:42Z

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?

The text was updated successfully, but these errors were encountered:

dusty · 2019-02-15T21:20:08Z

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

chevinbrown · 2019-02-15T21:44:05Z

@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". ☹️

dusty · 2019-02-15T22:02:52Z

@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

chevinbrown · 2019-02-16T05:45:19Z

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.

kddnewton · 2019-02-17T18:00:09Z

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

chevinbrown · 2019-02-18T13:39:15Z

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.

somebody32 · 2019-02-19T08:12:34Z

@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

chevinbrown · 2019-02-19T13:31:18Z

@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.

kddnewton · 2019-02-19T14:14:46Z

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?

chevinbrown · 2019-02-19T14:25:07Z

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.

kddnewton · 2019-02-25T01:40:51Z

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

chevinbrown · 2019-02-25T13:19:31Z

Thanks for your work on this, @kddeisz!

I found this workaround in prettier/plugin-ruby#113 and confirmed that it works. "Run on save" stopped working for me a while ago, so I'd recommend using prettier-vscode with the workaround instead.

james-prado · 2019-09-18T22:45:37Z

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

sunny-mittal · 2019-11-16T04:29:19Z

@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!

avosa · 2021-02-21T14:40:24Z

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

coisnepe · 2021-02-22T14:47:52Z

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.

andyw8 · 2021-04-17T14:19:43Z

I opened a PR to update the README: #867

congminh1709 · 2022-01-30T04:52:41Z

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.

Nealsoni00 · 2022-09-06T17:43:37Z

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

Thank!

When using nvm it seems that `spawnSync` can't find the node binary and the commands just fail awkwardly (spawnSync doesn't let us know it couldn't find the command). Related to prettier#113

orlando · 2022-12-20T23:02:49Z

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.

wetterkrank · 2024-01-06T14:17:41Z

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.

szareey · 2024-02-24T03:55:39Z

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

kddnewton added the help wanted Extra attention is needed label Feb 17, 2019

chevinbrown mentioned this issue Feb 18, 2019

plugin-ruby conflict with rubocop prettier/prettier-vscode#731

Closed

kddnewton closed this as completed Feb 25, 2019

czosel mentioned this issue Mar 2, 2019

Docs: Describe workaround for prettier-vscode prettier/plugin-php#976

Merged

mpoisot mentioned this issue May 14, 2019

Code loss from transformation of symbol arrays #304

Closed

gnapse mentioned this issue Jun 20, 2019

Add plugin support prettier/prettier-vscode#757

Closed

aesyondu mentioned this issue May 23, 2020

[QUESTION] How to enable haml support in vscode? #568

Closed

andyw8 mentioned this issue Apr 17, 2021

Add VSCode setup instructions #867

Merged

oriolgual mentioned this issue Oct 5, 2022

Use process.execPath instead of "node" #1283

Merged

jonny-ras mentioned this issue Aug 17, 2023

Failed to get connection options from parse server in time #1383

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VSCode formatOnSave #113

VSCode formatOnSave #113

chevinbrown commented Feb 15, 2019

dusty commented Feb 15, 2019 •

edited

chevinbrown commented Feb 15, 2019

dusty commented Feb 15, 2019

chevinbrown commented Feb 16, 2019

kddnewton commented Feb 17, 2019

chevinbrown commented Feb 18, 2019

somebody32 commented Feb 19, 2019

chevinbrown commented Feb 19, 2019

kddnewton commented Feb 19, 2019

chevinbrown commented Feb 19, 2019 •

edited

kddnewton commented Feb 25, 2019

chevinbrown commented Feb 25, 2019

james-prado commented Sep 18, 2019

sunny-mittal commented Nov 16, 2019

avosa commented Feb 21, 2021

coisnepe commented Feb 22, 2021 •

edited

andyw8 commented Apr 17, 2021

congminh1709 commented Jan 30, 2022

Nealsoni00 commented Sep 6, 2022

orlando commented Dec 20, 2022 •

edited

wetterkrank commented Jan 6, 2024 •

edited

szareey commented Feb 24, 2024

VSCode formatOnSave #113

VSCode formatOnSave #113

Comments

chevinbrown commented Feb 15, 2019

Metadata

dusty commented Feb 15, 2019 • edited

chevinbrown commented Feb 15, 2019

dusty commented Feb 15, 2019

chevinbrown commented Feb 16, 2019

kddnewton commented Feb 17, 2019

chevinbrown commented Feb 18, 2019

somebody32 commented Feb 19, 2019

chevinbrown commented Feb 19, 2019

kddnewton commented Feb 19, 2019

chevinbrown commented Feb 19, 2019 • edited

kddnewton commented Feb 25, 2019

chevinbrown commented Feb 25, 2019

james-prado commented Sep 18, 2019

sunny-mittal commented Nov 16, 2019

avosa commented Feb 21, 2021

coisnepe commented Feb 22, 2021 • edited

andyw8 commented Apr 17, 2021

congminh1709 commented Jan 30, 2022

Nealsoni00 commented Sep 6, 2022

orlando commented Dec 20, 2022 • edited

wetterkrank commented Jan 6, 2024 • edited

szareey commented Feb 24, 2024

dusty commented Feb 15, 2019 •

edited

chevinbrown commented Feb 19, 2019 •

edited

coisnepe commented Feb 22, 2021 •

edited

orlando commented Dec 20, 2022 •

edited

wetterkrank commented Jan 6, 2024 •

edited