formatting with multiple extensions

[rieg-ec]

Hey there, sorry to bother and thanks for the hard work.

I'm setting up development for vue with 3 extensions: coc-prettier, coc-eslint and coc-tailwindcss. I read somewhere that there's no support for having more than one formatter at the same time, and instead use only one (in my case coc-prettier), and the rest of the formatters can be applied with BufWritePre autocommands. I did just that but something weird is going on. The formatter that is used is kind of non-deterministic. Sometimes it will format with prettier, sometimes it will format with coc-tailwindcss and coc-eslint.

video of the behaviour:

Screen.Recording.2022-03-15.at.22.40.13.mov

the config to run format actions on save:

vim.cmd([[
  autocmd BufWritePre *js,*.vue,*.ts :silent call CocAction('runCommand', 'eslint.executeAutofix')
  autocmd BufWritePre *vue,*.html,*.erb :silent call CocAction('runCommand', 'tailwindCSS.headwind.sortTailwindClasses')
]])

on coc-settings i use the defaults, which is "eslint.autoFixOnSave": false for coc-eslint and "tailwindCSS.runOnSave": false (i changed the package.json defaults of that extension)

any idea what could i do to be able to run prettier and these 2 formatters on save?

[rieg-ec]

on #2704 you said that the formatting that gets applied is the one from the first server to respond, which makes a lot of sense. I haven't found a way to set BufWritePre autcmds to run the other 2 formatters after prettier, sadly :(

[rieg-ec]

i solved it by using BufWritePost so that i can format after output of coc-prettier is applied. No idea if that is the best way or not, happy to be corrected if it isn't 👍

[rieg-ec]

actually the solution was not that good. It won't work sometimes. I'll greatly appreciate if anyone has a working configuration where you can run more than one formatter. I don't mind too much if it doesn't run on save, i'm okay with a mapping for vue files that executes prettier.formatFile and then eslint.executeAutofix.

[rieg-ec]

i tried mapping this function

function! ApplyExtraFormatters()
  if index(['vue', 'js', 'ts'], &filetype) >= 0 
    execute "CocCommand prettier.formatFile"
    execute "CocCommand eslint.executeAutofix"
  endif

  if index(['vue', 'js', 'html', 'erb'], &filetype) >= 0 
    execute "CocCommand tailwindCSS.headwind.sortTailwindClasses"
  endif
endfunction

but it will use prettier, then on next run it will use eslint, and keep alternating between formatters. My (probably wrong) guess is that it executes prettier, which waits for lang server response, and in the meantime executes eslint. But since the code is properly formatted before applying prettier, it doesn't sends a server request to eslint lang server. Then, prettier response arrives and it gets applied, making it look like only prettier was used. Is that correct? and if so, what could be a fix?

[chemzqm]

:CocCommand is async, you may need :call CocAction('runCommand', ...) instead.