Как отформатировать React Project в VSCode с помощью тега окончания ESLint, Prettier и Flow без {""} - PullRequest
Новая
       22

Как отформатировать React Project в VSCode с помощью тега окончания ESLint, Prettier и Flow без {""}

0 голосов
/ 10 апреля 2019

Я новичок в веб-разработке и никогда не видел тегов, закрытых {""}. Почему это так?

У меня есть проект React, созданный с помощью приложения Create React: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

Мой проект настроен с использованием ESLint, Prettier и Flow с использованием VSCode в качестве редактора. Я следовал этому при настройке моего проекта: https://medium.com/js-imaginea/setup-eslint-prettier-and-flow-in-vscode-a3fd6a48b70a

Вот мои расширения VSCode:

  • Украсить
  • Редактор конфигурации для кода VS
  • ESLint
  • Flow Language Support
  • Красивее - Форматировщик кода

Вот мой .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 голосов
/ 10 апреля 2019

Я думаю, что проблема исправлена, 

"editor.formatOnSave": true,

и 

"eslint.autoFixOnSave": true,

в моих настройках VS Code, похоже, конфликтует. Изменение настроек кода VS на следующие: 

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

кажется, чтобы решить проблему. Хотя не уверен почему.

0 голосов
/ 10 апреля 2019

Это потому, что вы покидаете конечный пробел в конце, а eslint / priettier делает его более заметным, чтобы все знали, что вы действительно хотите разместить там место.

Поначалу это может показаться ненужным, но иногда есть реальная разница в исходе HTML.

...