How to prevent Vetur/Prettier from adding new line after comma (TS/Vue3)

Question

How to prevent Prettier/Vetur from formatting this line:

import { defineComponent, reactive, computed, ref } from 'vue'

to this:

import {
    defineComponent,
    reactive,
    computed,
    ref
} from 'vue'

Answer 1

That formatting occurs when the line width exceeds the configured printWidth (default is 80 characters). I assume your example is just a truncated version of a lengthy line, longer than 80 characters.

Increase printWidth to avoid the line wrapping:

// .prettierrc.js
module.exports = {
  printWidth: 120,
}

If using ESLint+Prettier (in a Vue CLI scaffolded project), configure ESLint's prettier/prettier options:

// .eslintrc.js
const prettierOptions = require("./prettierrc");

module.exports = {
  rules: {
    "prettier/prettier": ["error", prettierOptions],
  },
};

Be aware that Vetur only supports formatting the full document, so formatting a selected line does not work in SFC <script> blocks.