Enabling formatOnSave for VS Code

[andyw8]

Hi @adamzapasnik

I realise you may not be a user of VS Code, so I'm intending this is a general request for anyone who may have knowledge.

I'm trying to make this work with the Prettier extension for VS Code so that it formats on save.

If I manually run Format Document, it works.

For https://github.com/prettier/plugin-ruby, I'm using this configuration:

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

I've tried [erb] and [html.erb] in place of ruby but it doesn't seem to work.

It's possible this this might need an update the Prettier extension. I see one mention of ruby in https://github.com/prettier/prettier-vscode/blob/1a2137091516b0a319268a522b5e27f98f7d36e1/package.json#L46

[adamzapasnik]

hey @andyw8 I use VSCode :v: Is it a rails app? Is this plugin installed inside of a project? (package.json) Or did you install it globally? npm install -g...

I'm using it in a rails app and it works, so I think there has to be something misconfigured on your side.

FYI The ruby keyword that you have shown is VSCode's metadata https://code.visualstudio.com/api/references/extension-manifest It makes an extension findable when one writes ruby into an extension searchbox.

[andyw8]

Thanks for the quick reply. Yes, this is a Rails app, and the plugin is installed in the project.

[adamzapasnik]

0. Did you try to reset the vscode? :see_no_evil:
1. When you try to format .html.erb manually, are there any other formatters to select?

2. Add this line to your settings "prettier.enableDebugLogs": true -> restart and and open terminal -> output -> Prettier. You will see an output like this, is there .html.erb?

   ["INFO" - 5:40:13 PM] Enabling Prettier for Workspace test
   {
   "languageSelector": [
   {
     "pattern": "test/**/*.{js,_js,bones,cjs,es,es6,frag,gs,jake,jsb,jscad,jsfl,jsm,jss,mjs,njs,pac,sjs,ssjs,xsjs,xsjslib,wxs,js.flow,jsx,ts,tsx,json,avsc,geojson,gltf,har,ice,JSON-tmLanguage,mcmeta,tfstate,tfstate.backup,topojson,webapp,webmanifest,yy,yyp,jsonc,sublime-build,sublime-commands,sublime-completions,sublime-keymap,sublime-macro,sublime-menu,sublime-mousemap,sublime-project,sublime-settings,sublime-theme,sublime-workspace,sublime_metrics,sublime_session,json5,css,wxss,pcss,postcss,less,scss,graphql,gql,graphqls,md,markdown,mdown,mdwn,mkd,mkdn,mkdown,ronn,workbook,mdx,component.html,html,htm,html.hl,inc,st,xht,xhtml,mjml,vue,yml,mir,reek,rviz,sublime-syntax,syntax,yaml,yaml-tmlanguage,yaml.sed,yml.mysql,html.erb,arb,axlsx,builder,eye,fcgi,gemfile,gemspec,god,jb,jbuilder,mspec,opal,pluginspec,podspec,rabl,rake,rb,rbi,rbuild,rbw,rbx,ru,ruby,thor,watchr,rbs,haml}",
     "scheme": "file"
   },

[andyw8]

I got it working:

Either you can set formatOnSave for every language:

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

or you can set it explicitly for [erb]:

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

[andyw8]

(I also restarted VS Code so that may have made a difference).