Visual Studio Code 和 TSLint：代码换行到 80 多个字符

Posted 2023-02-22

【中文标题】Visual Studio Code 和 TSLint：代码换行到 80 多个字符

【英文标题】：Visual Studio Code and TSLint: Code wrap to more than 80 characters

【发布时间】：2019-03-19 18:45:48

【问题描述】：

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

我尝试将我的编辑器配置为将每行中的代码自动包装为 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 个字符，我会收到 linting 错误，因此 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

【参考方案1】：

这两个应该够了：

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

您的设置中似乎缺少"editor.wordWrap"。在 vscode 中，此设置控制包装策略：“wordWrapColumn”表示在 "editor.wordWrapColumn" 设置处包装。

您也可以尝试"editor.wordWrap": "bounded"，它会尊重“wordWrapColumn”，但如果您的视口少于您定义的列数，也可以换行。

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

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

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

【讨论】：

很遗憾，这并不能解决问题。如果我点击保存，代码仍然会被包装到少于 80 个字符:(

在您点击“保存”之前，它是否正确包裹？如果是这样，你可以在禁用 prettier 的情况下试试这个吗？

如果我禁用 Prettier 或设置 "prettier.tslintIntegration": false 代码将保持在它的字符数上。但我喜欢保持 Prettier ?至于 tslintIntegration 我不太确定它的作用。但由于我使用 TypeScript 和 TSLint，我想它很有用。

酷！这似乎是一个更漂亮的 vscode 插件问题。首先，不仅是你：github.com/prettier/prettier-vscode/issues/595 其次，检查可能覆盖你的 vscode 规则的其他配置文件，这个插件搜索更漂亮的配置文件和 .editorconfig 文件。我相应地更新了我的答案。

很高兴它有帮助！很可能是 vscode 插件中的一个错误，所以答案就在它的内部。

【参考方案2】：

在 tslint.json 中，您应该可以将 printWidth 添加到 Prettier 配置部分：

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

正如vaglignatev 所述，您需要安装tslint-config-prettier。

【讨论】：

应该提到必须安装 tslint-config-prettier 才能工作

【参考方案3】：

我找到了最适合我的最简单方法。进入设置搜索Print Width 并根据您的需要设置Prettier: Print Width，默认为80，我将其更改为150，它适用于我。并在您的 settings.json 中添加以下内容 "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 150, "prettier.printWidth": 150

【讨论】：

这也控制了函数拆分/包装发生时的断点以及函数中的参数是逐行还是一行

【参考方案4】：

我安装了 prettier，只添加下面一行就足够了，可以解决问题：

"prettier.printWidth": 120,

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

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

项目工作区设置：

.vscode\settings.json

用户设置：

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

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

【参考方案5】：

找到名为 .prettierrc.js 的文件并添加 printWidth，如下所示

module.exports = 
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
  printWidth: 150, // <== add this
;

【讨论】：

这是我需要的。一旦存在.prettierrc 文件并且它不完全为空，但至少包含，VSCode 将忽略我在.vscode/settings.json 中设置的规则"prettier.printWidth": 120 并使用默认的80。这实际上是有道理的 - 如果有 .prettierrc 配置，即使有人使用与具有 Prettier 插件的 VSCode 不同的 IDE/编辑器，它也能确保 prettier 保持一致，在这种情况下 .vscode/settings.json 将无效。