Eslint/更漂亮在html标签中添加不需要的空格 [英] eslint/prettier adding unwanted space into html tags

问题描述

我正在尝试将配置添加到我的项目中，以便代码自动格式化。我已经对VS代码中的用户设置进行了一些更新，还安装了eslint和更漂亮的。

现在，每当我尝试保存代码时，都会从此更改

<div className={style.app}>
  <div className={style.mobileHeader}>
    <div className={style.logoBox}>
    </div>
  </div>
</div>

至

<
    div className = {
      style.app
    } >
    <
    div className = {
      style.mobileHeader
    } >
    <
    div className = {
      style.logoBox
    } >

所有这些添加的空格不仅不可读，而且我的IDE甚至没有将其注册为JavaScript。

我在我的.eslintrc.js或.eslintrc.json中尝试了许多不同的配置(我只有一个，但我尝试了两种命名约定)。目前，我已经删除了.eslintrc.json中除空方括号{}之外的所有内容。我最近还将我的用户设置更新为

{
  "files.autoSave": "afterDelay",
  "window.zoomLevel": 0,
  "git.autofetch": true,
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "welcomePage",
  "dart.flutterSdkPath": "/Users/trevor/Applications/flutter",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "python.pythonPath": "/usr/local/bin/python3",
  "editor.defaultFormatter": "octref.vetur",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.template": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "eslint.validate": [{
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "react",
      "autoFix": true
    },
  ]
}

我在想一定是什么原因导致了此问题，但我看不出是什么原因。

我注意到，唯一格式化的代码是My of My Reaction页面的返回语句中的代码。其他代码似乎未受影响。

推荐答案

我刚刚遇到了同样的问题。在我的例子中，这要归功于JS-css-html格式化程序VSCode扩展。禁用扩展已解决此问题。

这篇关于Eslint/更漂亮在html标签中添加不需要的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！