typescript Visual Studio程式码和TSLint:超过80个字符的代码换行

hgc7kmma  于 2022-11-30  发布在  TypeScript
关注(0)|答案(6)|浏览(356)

我在Visual Studio代码中使用TypeScript与TSLint和Prettier来编写一个React原生应用程序。
我试着配置我的编辑器,使每行代码自动换行到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
}
hpcdzsge

hpcdzsge1#

这两条应该足够了:

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

您的设置中似乎缺少"editor.wordWrap"。在vscode中,此设置控制换行策略:“wordWrapColumn”表示以"editor.wordWrapColumn"设置换行。
您也可以尝试"editor.wordWrap": "bounded",它将遵守“wordWrapColumn”,但如果您的viewport少于您定义的列数,也会换行。
UPD:根据我们在评论中的讨论,似乎prettier并不尊重它的"printWidth"设置。可能有两个最可能的原因:
1.本期:https://github.com/prettier/prettier-vscode/issues/595
1.定义配置选项的优先级:具体https://github.com/prettier/prettier-vscode#prettiers-settings来说,它首先搜索比.editorconfig文件更漂亮的config files文件,然后才搜索vscode设置。
作为一种解决方法,你可以尝试在你的项目的更漂亮的配置文件中定义这个设置,或者在editorconfig文件中定义这个设置,然后检查vscode插件是否可以使用这两个文件中的任何一个。

20jt8wwn

20jt8wwn2#

我找到了一个最简单的方法,它对我很有效。进入设置搜索Print Width,并根据您的需要将Prettier: Print Width设置为,默认为80。我将其改为150,它对我很有效。然后在您的settings.json中添加以下内容"editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 150, "prettier.printWidth": 150

nwlls2ji

nwlls2ji3#

查找或添加名为.prettierrc.js的文件,并添加printWidth,如下所示

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

fkaflof64#

我有漂亮的安装,添加只有下面的行是足够的,解决这个问题:

"prettier.printWidth": 120,

一般缠绕长度为80和120,但有些使用150。
您可以在以下任一设置中添加上述内容:
项目工作环境设置:

  • .vscode\settings.json

使用者设定:

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

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

dpiehjr4

dpiehjr45#

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

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

正如vaglignatev提到的,您需要安装tslint-config-prettier

zphenhs4

zphenhs46#

我遇到了同样的问题,对我来说,.editorconfig 覆盖了更漂亮的设置。我只是添加了 max_line_length = 100

相关问题