vue.js - 如何防止 Vetur/Prettier 在逗号后添加新行(TS/Vue3)

Question

如何防止 Prettier/Vetur 格式化这一行:

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

为此:

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

Answer 1

那个formatting occurs当线宽超过配置的 printWidth 时(默认为 80 个字符)。我假设您的示例只是一长行的截断版本，超过 80 个字符。

增加printWidth避免换行:

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

如果使用 ESLint+Prettier(在 Vue CLI 脚手架项目中)，请配置 ESLint 的 prettier/prettier选项:

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

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

请注意 Vetur only supports formatting the full document , 因此格式化所选行在 SFC 中不起作用 <script> block 。