如何在VSCode中使用没有{“"}的更漂亮、更漂亮的流结束标记来格式化

Question

我是web开发的新手，我从未见过标签被{“"}关闭。为什么会这样呢？

我有一个用created：https://reactjs.org/docs/create-a-new-react-app.html#create-react-app创建的App项目

我用ESLint设置了我的项目，它更漂亮，并且使用VSCode作为我的编辑器。我在设置我的项目时遵循了这个原则：https://medium.com/js-imaginea/setup-eslint-prettier-and-flow-in-vscode-a3fd6a48b70a

下面是我的VSCode扩展：

• 美化
• VS代码编辑器Config
• ESLint
• 流语言支持
• 更漂亮的代码格式化程序

这是我的.eslint.json：

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/react-in-jsx-scope": 1
  }
}

以下是我的VSCode设置：

{
  "editor.formatOnSave": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.enableBell": true,
  "dart.flutterCreateIOSLanguage": "swift",
  "dart.flutterCreateAndroidLanguage": "kotlin",
  "eslint.autoFixOnSave": true,
  "editor.suggestSelection": "first",
  "window.zoomLevel": 1,
  "prettier.eslintIntegration": true,
  "terminal.integrated.shell.osx": "/bin/bash",
  "eslint.alwaysShowStatus": true,
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "files.autoSave": "off",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "prettier.jsxBracketSameLine": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
  "prettier.jsxSingleQuote": true,
}

通常，我认为元素是这样封闭的：

<h1>Hello World!</h1>

但是，在ESLint、更漂亮的和/或流中发生的一些事情将其格式化如下(在保存时)：

<h1> Hello World! </h1>{" "}

我不知道这是什么

{" "}

是。它还在字符串的内部添加空格。这是正确的格式化方式吗？如果没有，我该如何移除它？每当我保存我的项目时，它都会将它添加到元素的末尾。

Answer 1

我想问题已经解决了，

"editor.formatOnSave": true,

和

"eslint.autoFixOnSave": true,

在我的VS代码设置中，似乎存在冲突。将“VS代码”设置更改为：

"editor.formatOnSave": false,
"eslint.autoFixOnSave": true,

似乎解决了这个问题。但不知道为什么。

Answer 2

这是因为你离开了尾端的空间，而斯林特/斯皮蒂埃让每个人都知道你真正的意图是把空间放在那里。

一开始它可能看起来是不必要的，但有时HTML结果确实存在差异。