Reports

Blacklisted phrase (1): This plugin
Blacklisted phrase (1): this plugin
Whitelisted phrase (-1.5): You can use
Long answer (-0.5):
Has code block (-0.5):
Low reputation (1):

Here is a solution.

You can use prettier-plugin-tailwindcss (Even If You Don't Use Tailwind). This plugin changes the way Prettier formats JSX, often aligning with how you'd expect inline elements to be preserved.

Install it:

npm install --save-dev prettier-plugin-tailwindcss

Then, update your Prettier config (.prettierrc.js or equivalent):

module.exports = {
  ...require('prettier-airbnb-config'),
  bracketSpacing: true,
  semi: true,
  singleQuote: true,
  jsxSingleQuote: true,
  objectWrap: 'preserve',
  bracketSameLine: true,
  htmlWhitespaceSensitivity: 'css',
  plugins: ['prettier-plugin-tailwindcss'], // Add this
};

Even if you're not using TailwindCSS, this plugin subtly tweaks JSX formatting, often keeping inline elements together.

79469874