Question

我在Visual Studio Code中使用带有TSLint和Prettier的TypeScript来编写React Native App。

我尝试将编辑器配置为每行自动将代码包装为100个字符。但是保存后始终是80个字符，而不是100个字符。

这是我更改的设置：

"prettier.tslintIntegration": true,
"prettier.printWidth": 100,
"editor.renderIndentGuides": true,
"editor.rulers": [100],
"editor.wordWrapColumn": 100,
"editor.formatOnSave": true

这是我的tslint.json：

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "rules": {
    // "jsx-no-lambda": false,
    "member-access": false,
    "interface-name": false,
    "max-line-length": [true, 100]
  }
}

即使我以这种方式配置了所有内容，我的代码仍会自动换行约80个字符。我怎样才能阻止它？

如果我的行数超过100个字符，则会出现棉绒错误，因此tslint.json设置似乎可行。

奖金：如果我错过了一些东西，请完成VSCode设置：

{
  "telemetry.enableTelemetry": false,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons",
  "window.zoomLevel": 0,
  "prettier.eslintIntegration": true,
  "prettier.tslintIntegration": true,
  "prettier.printWidth": 100,
  "editor.renderIndentGuides": true,
  "editor.rulers": [100],
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.tabSize": 2
  },
  "[typescriptreact]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },
  "workbench.colorCustomizations": {
    // "statusBar.background": "#272b33",
    // "panel.background": "#30353f",
    // "sideBar.background": "#2a2b33",
    "editor.background": "#2c313a"
  },
  "todohighlight.keywords": [
    {
      "text": "DEBUG:",
      "color": "#fff",
      "backgroundColor": "limegreen",
      "overviewRulerColor": "grey"
    },
    {
      "text": "NOTE:",
      "color": "#fff",
      "backgroundColor": "mediumslateblue",
      "overviewRulerColor": "grey"
    },
    {
      "text": "REVIEW:",
      "color": "#fff",
      "backgroundColor": "dodgerblue",
      "overviewRulerColor": "grey"
    },
    {
      "text": "XXX:",
      "color": "#fff",
      "backgroundColor": "orangered",
      "overviewRulerColor": "grey"
    }
  ],
  "editor.wordWrapColumn": 100,
  "editor.formatOnSave": true
}

Answer 1

这两个就足够了：

"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 100

设置中似乎缺少"editor.wordWrap"。在vscode中，此设置控制换行策略：“ wordWrapColumn”表示在"editor.wordWrapColumn"设置下换行。

您也可以尝试使用"editor.wordWrap": "bounded"，它会遵守“ wordWrapColumn”，但是如果您的视口小于您定义的列数，也可以进行包装。

UPD：根据我们在评论中的讨论，似乎更漂亮的不尊重其"printWidth"设置。可能有两个最可能的原因：

此问题：https://github.com/prettier/prettier-vscode/issues/595
定义配置选项的优先级：https://github.com/prettier/prettier-vscode#prettiers-settings。特别是，它首先搜索漂亮的config files，而不是.editorconfig文件，然后搜索vscode设置。

作为一种解决方法，您可以尝试在项目的更漂亮的配置文件中或在editorconfig文件中实际定义此设置，然后检查vscode插件是否适用于其中任何一个。

Answer 2

我找到了最简单的方法为我工作。进入设置搜索Print Width，然后根据您的需要将Prettier: Print Width设置为"editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 150, "prettier.printWidth": 150，默认情况下为80，我将其更改为150，并且对我有效。并在您的settings.json public class Base extends Parent { private ObjectProperty<Panel> panel; private final HBox foundation; public Base() { panel = new SimpleObjectProperty<>(); foundation = new HBox(20); // ??? getChildren().add(foundation); } //------Properties below public final ObjectProperty<Panel> panelProperty() { return panel; } public final void setPanel(Panel value) { panelProperty().setValue(value); } public final Panel getPanel() { return panelProperty().getValue(); } }

中添加以下内容

Answer 3

在tslint.json中，您应该可以将printWidth添加到“更漂亮的配置”部分：

"rules": {
    "prettier": [
        true,
        {
            "printWidth": 100
        }
    ],

Answer 4

我安装了更漂亮的，只添加以下行就足以解决问题：

"prettier.printWidth": 120,

一般包装长度为 80 和 120，但有些使用 150。

您可以在以下任一设置中添加上述内容：

项目工作区设置：

.vscode\settings.json

用户设置：

%UserProfile%\AppData\Roaming\Code\User\settings.json

以上路径适用于 Windows 操作系统，但类似的也适用于其他操作系统。

Visual Studio代码和TSLint：代码可换成80个以上的字符

4 个答案: