更漂亮的换行符不接受规则答案

【问题标题】：prettier line break not accept rules更漂亮的换行符不接受规则
【发布时间】：2020-01-17 09:17:21
【问题描述】：

我尝试用更漂亮的方式更改换行符，但是 vs code 忽略了我的设置... 我尝试输入 line-length: 140，但什么也没发生。

我尝试了这个，但没有成功

// edit your tslint.json
"max-line-length": [
     true, 
    { 
        "limit": 140, 
        "ignore-pattern": "^import |^export {(.*?)}" 
    }
],

我用

prettier: [3.18.0]
VS code: 1.41.1

这是我的设置

{
  "workbench.editor.highlightModifiedTabs": true,
  "files.trimFinalNewlines": true,
  "window.menuBarVisibility": "default",
  "workbench.activityBar.visible": true,
  "files.autoSave": "off",
  "window.zoomLevel": 0,
  "editor.rulers": [
    140
  ],
  "editor.wordWrapColumn": 140,
  "[markdown]": {
    "editor.wordWrap": "wordWrapColumn",
    "editor.quickSuggestions": false
  },

  "diffEditor.ignoreTrimWhitespace": true,
  "vsicons.projectDetection.autoReload": true,
  "files.eol": "\n",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "javascript.referencesCodeLens.enabled": true,
  "cSpell.userWords": [
    "dropdown",
    "toastr"
  ],

  "typescript.updateImportsOnFileMove.enabled": "always",
  "terminal.integrated.rendererType": "dom",
  "html.format.wrapLineLength": 140,
  "editor.wordWrap": "bounded",
  "prettier.jsxBracketSameLine": true,
  "html.format.wrapAttributes": "preserve-aligned",
  "prettier.printWidth": 140
}

有没有其他方法可以让它工作，因为 prettier 总是以一种奇怪的方式格式化我的组件或 html 文件...... 比方说，这个

languageLocale: [null, [Validators.minLength(1), Validators.maxLength(255)]],

到这里

languageLocale: [
        null,
        [Validators.minLength(1), Validators.maxLength(255)]
      ],

或html

<mat-form-field>
        <input class="disabledInput" formControlName="id" matInput/>
</mat-form-field>

到这里

<mat-form-field>
        <input
               class="disabledInput"
               formControlName="id"
               matInput
               />
</mat-form-field>

如果我们有多个输入字段，这很难阅读

【问题讨论】：

标签： visual-studio-code prettier

【解决方案1】：

需要把配置放到package.json

参考这里https://prettier.io/docs/en/configuration.html

"prettier":{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 140,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "rangeStart": 0
}

【讨论】：