如何排查VSCode中触发换行的Prettier规则

问题描述 #

我使用VSCode开发React和Node.js项目，.eslintrc配置文件中集成了Prettier规则。现有代码行：

const { variable1, variable2 , variable3 , variable4 } = req.body

Prettier强制将req.body换行至下一行。已安装ESLint和Prettier扩展，需要找到可修改的规则以保持该行在同一行。

我的.eslintrc配置如下：

{
  "env": {
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "plugins": [
    "prettier",
    "@typescript-eslint",
    "simple-import-sort",
    "import"
  ],
  "parserOptions": {
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "rules": {
    "quotes": [
      "error",
      "single",
      {
        "avoidEscape": true
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": false
      }
    ],
    "semi": [
      "error",
      "never"
    ],
    "no-trailing-spaces": "error",
    "block-spacing": "error",
    "no-var": "error",
    "keyword-spacing": "error",
    "no-multiple-empty-lines": [
      "error",
      {
        "max": 2,
        "maxEOF": 1
      }
    ],
    "eol-last": [
      "error",
      "always"
    ],
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "simple-import-sort/exports": "error",
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Packages
          [
            "^@?\\w"
          ],
          // Side effect imports.
          [
            "^\\u0000"
          ],
          // Internal packages.
          [
            "^(@|@pkg|utils|config|vendored-lib)(/.*|$)"
          ],
          // Parent imports. Put `..` last.
          [
            "^\\.\\.(?!/?$)",
            "^\\.\\./?$"
          ],
          // Other relative imports. Put same-folder imports and `.` last.
          [
            "^\\./(?=.*/)(?!/?$)",
            "^\\.(?!/?$)",
            "^\\./?$"
          ]
        ]
      }
    ],
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error"
  },
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parser": "@typescript-eslint/parser",
      "plugins": [
        "@typescript-eslint"
      ],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
      ]
    }
  ]
}

解决步骤 #

问题出在Prettier的换行规则上，你需要在ESLint配置的prettier/prettier规则中添加两个关键配置项：

• 调整printWidth（打印宽度）：Prettier默认以80字符作为换行阈值，你的代码行可能接近或超过这个长度导致自动换行。可以根据需求调大这个值，比如设为120。
• 设置wrapBeforeAssignment为false：强制Prettier不在赋值运算符（=）前换行，确保解构赋值语句保持在同一行。

修改后的prettier/prettier规则块如下：

"prettier/prettier": [
  "error",
  {
    "singleQuote": true,
    "semi": false,
    "printWidth": 120,
    "wrapBeforeAssignment": false
  }
]

生效方法 #

保存.eslintrc配置后，通过VSCode命令面板（快捷键Ctrl+Shift+P）执行ESLint: Restart ESLint Server，然后重新格式化代码即可看到效果。

内容的提问来源于stack exchange，提问作者Nikita Aznauryan