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

当行宽超过配置（默认为 80 个字符）时，会发生该格式设置。printWidth我假设您的示例只是长行的截断版本，超过 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 仅支持格式化整个文档<script>，因此格式化所选行在 SFC块中不起作用。