Visual Studio Code和TSLint:代码换行超过80个字符

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Visual Studio Code和TSLint:代码换行超过80个字符相关的知识,希望对你有一定的参考价值。

我在Visual Studio Code中使用TypeScript和TSLint以及Prettier来编写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个字符,我会得到一个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
}
答案

这两个应该足够了:

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

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

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

UPD:基于我们在评论中的讨论,看起来更漂亮不尊重其"printWidth"设置。可能有两个最可能的原因:

  1. 这个问题:https://github.com/prettier/prettier-vscode/issues/595
  2. 定义配置选项的优先级:https://github.com/prettier/prettier-vscode#prettiers-settings。特别是,它首先搜索比config files文件更漂亮的.editorconfig,然后才搜索vscode设置。

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

另一答案

在tslint.json中,您应该能够将printWidth添加到Prettier配置部分:

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

以上是关于Visual Studio Code和TSLint:代码换行超过80个字符的主要内容,如果未能解决你的问题,请参考以下文章

无法在 Visual Studio Code 中加载文档的 TSLint 库

TSLint 在 Visual Studio Code 中停止工作

Visual Studio Code 中的 TS Lint 突然指示错误的 lint 错误

Visual Studio Code 双引号语法

Visual Studio 2015/2017 中的 TSLint?

Visual Studio Code - Angular 2 自动导入扩展