title: How to format React Project in VSCode with ESLint, Prettier, and Flow ending tag without {" "}
body: <p>I am new to web development, and I have never seen tags closed by {" "}. Why is that?</p>
  
  <p>I have a React project created with the Create React App: <a href="https://reactjs.org/docs/create-a-new-react-app.html#create-react-app" rel="nofollow noreferrer">https://reactjs.org/docs/create-a-new-react-app.html#create-react-app</a></p>
  
  <p>I have my project set up with ESLint, Prettier, and Flow using VSCode as my editor. I followed this when setting up my project: <a href="https://medium.com/js-imaginea/setup-eslint-prettier-and-flow-in-vscode-a3fd6a48b70a" rel="nofollow noreferrer">https://medium.com/js-imaginea/setup-eslint-prettier-and-flow-in-vscode-a3fd6a48b70a</a></p>
  
  <p>Here are my VSCode Extensions:</p>
  
  <ul>
  <li>Beautify</li>
  <li>Editor Config for VS Code</li>
  <li>ESLint</li>
  <li>Flow Language Support</li>
  <li>Prettier - Code formatter</li>
  </ul>
  
  <p>Here is my .eslint.json:</p>
  
  <pre><code>{
    "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
    }
  }
  </code></pre>
  
  <p>Here is my VSCode Settings:</p>
  
  <pre><code>{
    "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,
  }
  </code></pre>
  
  <p>Normally, I thought elements were closed like so:</p>
  
  <pre><code>&lt;h1&gt;Hello World!&lt;/h1&gt;
  </code></pre>
  
  <p>But, something happening with ESLint, Prettier, and/or Flow that's formatting it like this (on save):</p>
  
  <pre><code>&lt;h1&gt; Hello World! &lt;/h1&gt;{" "}
  </code></pre>
  
  <p>I don't know what the</p>
  
  <pre><code>{" "}
  </code></pre>
  
  <p>is. It also adds spaces around the string inside. Is this the right way of formatting?  If not, how do I go about removing it? Whenever I save my project, it adds that to the end of an element.</p>