如何在没有{“”}的情况下使用ESLint,Prettier和Flow结束标记在VSCode中格式化React Project

时间:2019-04-10 13:32:03

标签: reactjs visual-studio-code eslint flowtype prettier

我是Web开发的新手,我从未见过{“”}关闭标签。为什么会这样?

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

我使用VSCode作为编辑器,使用ESLint,Prettier和Flow设置了我的项目。在设置项目时,我遵循了以下步骤:https://medium.com/js-imaginea/setup-eslint-prettier-and-flow-in-vscode-a3fd6a48b70a

这是我的VSCode扩展名:

  • 美化
  • VS代码的编辑器配置
  • 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,Prettier和/或Flow发生了一些格式化操作(保存时):

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

我不知道什么

{" "}

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

2 个答案:

答案 0 :(得分:0)

这是因为您在末尾留下了尾随的空格,而eslint / priettier使它更加可见,让大家知道这是您在此放置空格的真实意图。

乍一看似乎没有必要,但是HTML结果有时会有所不同。

答案 1 :(得分:0)

我认为问题已解决

"editor.formatOnSave": true,

"eslint.autoFixOnSave": true,
我的VS Code设置中的

似乎有冲突。将我的VS Code设置更改为以下内容:

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

似乎可以解决此问题。不确定为什么。