☰

Visual Studio Code と TSLint: 80 文字を超えるとコードが折り返される 質問する

tag-icon • tag-icon typescript visual-studio-code word-wrap tslint prettier
Visual Studio Code と TSLint: 80 文字を超えるとコードが折り返される 質問する

私は Visual Studio Code で TypeScript と TSLint および Prettier を使用して React Native アプリを作成しています。

コードを 1 行あたり自動的に 100 文字に折り返すようにエディターを設定しようとしました。しかし、保存すると常に 100 文字ではなく 80 文字になります。

変更した設定は次のとおりです。

"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 文字を超えると lint エラーが発生するので、設定は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

次の 2 つがあれば十分です。

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

"editor.wordWrap"設定に不足しているようです。vscode では、この設定で折り返しポリシーを制御します。「wordWrapColumn」は"editor.wordWrapColumn"設定での折り返しを意味します。

"editor.wordWrap": "bounded"また、「wordWrapColumn」を尊重しながら、ビューポートが定義した列数より少ない場合にも折り返す方法を試すこともできます。

UPD: コメントでの議論に基づくと、Prettier は"printWidth"設定を尊重していないようです。最も可能性の高い理由は 2 つ考えられます。

  1. この問題：https://github.com/prettier/prettier-vscode/issues/595
  2. 構成オプションを定義するための優先順位:https://github.com/prettier/prettier-vscode#prettiers-settings特に、まずはよりきれいな設定ファイル、よりも.editorconfigファイル、そしてその後に vscode 設定のみを行います。

回避策として、実際にこの設定をプロジェクトの Prettier 構成ファイルまたは editorconfig ファイルで定義し、vscode プラグインがどちらかで動作するかどうかを確認できます。

おすすめ記事