eslint/prettier 在 html 标签中添加不需要的空间

Posted

技术标签:

【中文标题】eslint/prettier 在 html 标签中添加不需要的空间【英文标题】:eslint/prettier adding unwanted space into html tags 【发布时间】:2020-11-19 04:01:13 【问题描述】:

我正在尝试向我的项目添加配置,以便代码自动格式化。我对 VS Code 中的用户设置做了一些更新,还安装了 eslint 和 prettier。

现在每当我尝试保存我的代码时,都会从中获取更改器

<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
    ,
  ]

我认为这里一定有什么问题导致了这个问题,但我看不出它会是什么。

我注意到唯一被格式化的代码是我的 React 页面的 return 语句中的代码。其他代码似乎没有受到影响。

【问题讨论】:

您能否验证文件->首选项->设置,并搜索“格式化程序”,是否实际选择了“esbenp.prettier-vscode”作为默认格式化程序? minimal-reproducible-example,请 @MudkIPHacker 是的,prettier 是默认格式化程序 【参考方案1】:

你可以试试这个

1- 在 package.json 的 devDependencies 中安装这些

 "devDependencies": 
    "eslint": "^6.6.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^2.0.2",
  

2- 将此代码添加到 eslint.js

module.exports = 
    env: 
      commonjs: true,
      es6: true,
      node: true
    ,
    root: true,
    extends: ["airbnb-base", "prettier"],
    globals: 
      Atomics: "readonly",
      SharedArrayBuffer: "readonly"
    ,
    parserOptions: 
      ecmaVersion: 2018
    ,
    rules:  
      "linebreak-style": 0,
      "arrow-body-style": ["error", "as-needed"],
      "prettier/prettier": [
        "error",
        
          trailingComma: "es5",
          singleQuote: true
        
      ]
    ,
    plugins: ["prettier"]
  ;

3-在vs代码中打开设置,搜索json

4- 点击 settings.json 中的编辑并更改不重要的命令

【讨论】:

这似乎不起作用。真正奇怪的是,偶尔在进入我的 package.json(没有改变任何东西)然后进入我可以保存的一个 .js 文件之后,自动格式化程序会适当地格式化【参考方案2】:

这是我通常在 VS Code 中所做的,以获得 Prettier 和 ES Lint 的干净和工作配置

第 1 步 在 VS Code 中安装 Prettier 和 Eslint 扩展。 (如果尚未安装)

第 2 步 将项目的 npm 中的 prettiereslinteslint-config-prettier 安装为开发依赖项。 eslint-config-prettier 安装很重要,因为它会关闭所有不必要或可能与 Prettier 冲突的 ESlint 规则。

npm install -D prettier eslint eslint-config-prettier

第 3 步在保存用户设置时打开格式。

"editor.formatOnSave": true,

第 4 步确保 Prettier 需要一个配置文件。

"prettier.requireConfig": true,

第 5 步 创建一个配置文件 .prettierrc 让编辑器和其他工具知道您正在使用 Prettier,并将其留空以接受来自 prettier 的默认配置。 (99% 的时间它都对我有用)

echo  > .prettierrc.json

第 6 步还要确保 ESlint 在您的 vscode 用户配置中不承担任何格式化责任

"eslint.format.enable": false,

这是我在开始新项目时使用的非常基本的 eslintrc.json 配置。


  "extends": [
    "eslint:recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [],
  "parserOptions": 
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures":  "jsx": true 
  ,
  "env": 
    "es6": true,
    "browser": true,
    "node": true
  ,
  "settings": 
    "react": 
      "version": "detect"
    
  

Prettier、ES Lint 和 eslint-config-prettier 的文档参考

【讨论】:

【参考方案3】:

devDependencies 中安装这些package.json

"devDependencies": 
  "eslint-config-prettier": "^6.10.1",
  "eslint-plugin-prettier": "^3.1.2",
  "prettier": "^2.0.4"
,

如果您使用的是create-react-app,请将其添加到package.json

"eslintConfig": 
  "extends": [
    "react-app",
    "plugin:prettier/recommended"
  ],
  "ignorePatterns": [
    "node_modules/",
    "build/"
  ]
,

最重要的部分,在您的 VSCode settings.json 中,添加这些行:

"editor.codeActionsOnSave": 
  "source.fixAll.eslint": true
,
"editor.formatOnSave": false,

现在,当您保存 js、jsx、ts、tsx 文件时,eslint 应该会自动修复所有问题,包括 prettier 格式问题。

【讨论】:

【参考方案4】:

我刚刚遇到了同样的问题。就我而言,这是由于 JS-CSS-HTML Formatter VSCode 扩展。禁用扩展解决了这个问题。

【讨论】:

【参考方案5】:

在我的例子中,最有价值的解决方案是忽略文档的特定部分,我在 prettier 添加空格时遇到问题。

在此示例中,prettier 之前将引号分成了自己的行,因此文本在 &lt;q&gt; 标记的引号之间有空格。

<!-- prettier-ignore-start -->
<q>Make it work, make it right, make it fast.</q>
<!-- prettier-ignore-end -->

【讨论】:

以上是关于eslint/prettier 在 html 标签中添加不需要的空间的主要内容,如果未能解决你的问题,请参考以下文章

vue+eslint项目(项目已开发)使用prettier

如何配置VSCode中的Prettier和ESLint标准

使用eslint+prettier+husky+lint-staged+commitlint+stylelint规范项目格式

删除 `(` eslint (prettier/prettier)

eslint+prettier 的 VSCode配置项

15分钟快速配置eslint,prettier,lint-staged,husky,commitizen实现前端项目代码规范化