Question

我对 Prettier 格式化程序有一个恼人的问题。每当我输入对象、数组或 JSX 组件时，都会出现换行符，我找不到禁用的方法。

例如，尝试输入一个长 mongoose 枚举：

我希望它看起来像这样：

genres: {
    type: [String],
    enum: [
      'Pop', 'Rock', 'Disco', 'Jazz', 'Hip Hop', 'Folk', 'Blues',
      'Metal', Country', 'Classical', 'RnB', 'Soul', Dance', Funk','Reggae'],

但 Prettier 总是这样格式化：

genres: {
    type: [String],
    enum: [
      'Pop',
      'Rock',
      'Disco',
      'Jazz',
      'Hip Hop',
      'Folk',
      'Blues',
      'Metal',
      'Country',
      'Classical',
      'RnB',
      'Soul',
      'Dance',
      'Funk',
      'Reggae',
    ],

JSX 示例：我希望它看起来像这样：

  <SomeElement prop1="bla" prop2="bla" prop3="bla"
     prop4="bla" prop5="bla" prop6="bla" prop7="bla" />

但是 Prettier 的格式是这样的：

  <SomeElement
    prop1="bla"
    prop2="bla"
    prop3="bla"
    prop4="bla"
    prop5="bla"
    prop6="bla"
    prop7="bla"
  />

我是否遗漏了什么，或者 Prettier 无法做到这一点？我尝试更改“打印宽度”选项，但它没有多大帮助，因为每当我通过打印宽度长度时，它会再次打破这样的线条。

Answer 1

您可以覆盖更漂亮的规则，

示例：

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

如果覆盖特定 JS 文件的规则对您想要的方式没有帮助，请尝试将您自己的配置发布到 npm 注册表或 use it from GitHub directly

module.exports = {
  extends: 'prettier-config-mycustomconfig',
  bracketSpacing: true,
  printWidth: 100,
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
};

或者干脆module.exports = require("prettier-config-myownconfig");

Javascript：更漂亮的格式问题

1 个答案: