0

I'm running Prettier through ESLint using the eslint-config-prettier and eslint-plugin-prettier packages. I also have Prettier as a dev dependency to use on non-JS files. I use these two extensions with VS Code to validate and format my code automatically on save: Prettier - Code formatter and ESLint.

I'm having a problem with inline JS in HTML files. It appears as though the Prettier run through ESLint is either not being run, or is being overruled by the regular Prettier extension, even though in my config file I've explicitly set the option html.format.contentUnformatted to "pre,code,textarea,script" to prevent formatting that content with the default formatter. I'd like it to ignore content within script tags since ESLint should be handling the formatting there.

The relevant settings in my settings.json:

{
  "javascript.validate.enable": false,  // turns off default VS Code validation, I'm using ESLint's
  "javascript.format.enable": false,    // ^ see above
  "editor.formatOnSave": true,          // Turn on formatting for all files except JS/JSX
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true // Let ESLint fix all fixable errors on save
  },
  "eslint.run": "onSave", // Run ESLint on save
  // Turn off Prettier for JS since we are doing it through Eslint already
  "prettier.disableLanguages": ["javascript", "javascriptreact"],
  "html.validate.scripts": false, // turn off default VSCode JS validation in HTML files
  "editor.defaultFormatter": "esbenp.prettier-vscode", // Use Prettier formatter
  "html.format.contentUnformatted": "pre,code,textarea,script" // Don't format content within these tags
}

Any idea what's wrong? I'm also open to suggestions of other ways to structure things. Thanks for any help!

Gama11
  • 31,714
  • 9
  • 78
  • 100
Tom T
  • 314
  • 2
  • 12

1 Answers1

1

You can use Prettier's embeddedLanguageFormatting option to achieve what you want. See https://prettier.io/docs/en/options.html#embedded-language-formatting

As for html.format.* VS Code settings, they're settings of the built-in formatter of VS Code and have nothing to do with Prettier.

thorn0
  • 9,362
  • 3
  • 68
  • 96
  • Ah, that makes sense that `html.format.*` only works with the built-in formatter. I tried `"prettier.embeddedLanguageFormatting": "off"` and it didn't work unfortunately. Is a better way of handling this to just run both ESLint and Prettier's formatters on all JS and just disable conflicting rules within ESLint? – Tom T Jan 26 '21 at 15:14
  • Maybe you just needed to restart VS Code? – thorn0 Jan 26 '21 at 16:09
  • 1
    "just run both ESLint and Prettier's formatters on all JS and just disable conflicting rules within ESLint" - that's the approach recommended on Prettier's site: https://prettier.io/docs/en/integrating-with-linters.html – thorn0 Jan 26 '21 at 16:11
  • It doesn't appear as though `embeddedLanguageFormatting` fixes this issue. It seems to be for code within a string. – Tom T Jan 27 '21 at 17:34
  • 1
    That option definitely controls HTML-in-JS. Try it yourself on [Prettier's playground](https://prettier.io/playground) (click the "show options" button in the bottom left corner, then choose the `html` parser, then switch `embeddedLanguageFormatting` to compare results). – thorn0 Jan 27 '21 at 22:01
  • What version of Prettier do you use? The option was added in 2.1. – thorn0 Jan 27 '21 at 22:03
  • Looks like you're right! Not sure what was happening, but I tried it again and it's working – Tom T Jan 28 '21 at 20:49