如何防止 Vetur/Prettier 在逗号后添加新行（TS/Vue3）答案

【问题标题】：How to prevent Vetur/Prettier from adding new line after comma (TS/Vue3)如何防止 Vetur/Prettier 在逗号后添加新行（TS/Vue3）
【发布时间】：2021-08-11 01:26:32
【问题描述】：

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

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

到这里：

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

【问题讨论】：

标签： vue.js vuejs3 prettier vetur

【解决方案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> 块中不起作用。

【讨论】：

@saibbyweb 看起来像 .prettierrc.js 需要通过 VS Code 接口进行显式格式化，而 Vetur 和 lint NPM 脚本需要 .eslintrc.js 配置。查看更新的答案。