VS Code Formatting JSX с новыми строками - PullRequest
Новая
       177

VS Code Formatting JSX с новыми строками

0 голосов
/ 06 августа 2020

Недавно я начал кодировать с помощью React и сразу заметил, что VS Code форматирует мои файлы реакции следующим образом, что вызывает всевозможные предупреждения от линтера.

Index. js

class App extends Component {
  render() {
    return ( <
      div className = "App" >
      <
      header className = "App-header" >
      <
      img src = {
        logo
      }
      className = "App-logo"
      alt = "logo" / >
      <
      p >
      Edit < code > src / App.js < /code> and save to reload. < /
      p > <
      a className = "App-link"
      href = "https://reactjs.org"
      target = "_blank"
      rel = "noopener noreferrer" >
      Learn React <
      /a> < /
      header > <
      /div>
    );
  }
}

Мне не удается найти параметр Prettier или любой другой параметр, вызывающий это в приложении, какие-либо предложения?

Расширения (Примечание WSL Ubuntu Windows)

  • Раскраска пары скобок
  • Отладчик для Chrome
  • Javascript (ES6) фрагментов кода
  • фрагментов кода React Nitro
  • Reactjs фрагменты кода
  • Remote - WSL
  • Vue Тема
  • Autoprefixer
  • Украсить
  • City Lights Пакет значков
  • EditorConfig для VS Code
  • ESLint
  • Pull-запросы и проблемы Github
  • GitLens - Git Supercharged
  • Стоимость импорта
  • Live Server
  • npm
  • npm IntelliSense
  • Путь IntelliSense
  • React Extension Pack
  • React Nitro Essentials
  • Поиск node_modules
  • SonarLint
  • Vetur
  • vue -beautify

VS Code О блоке:

  • Версия: 1.48.0-insider (настройка пользователя)
  • Фиксация: 459610f3ef11b956968afadff704bad3bc1a0de2
  • Дата: 2020-08-04T12: 40: 10.231Z
  • Электрон: 7.3.2
  • Chrome: 78.0.3904.130
  • Node.js: 12.8.1 V8: 7.8.279.23-электрон.0
  • ОС: Windows_NT x64 10.0.18363

Ответы [ 4 ]

0 голосов
/ 07 августа 2020

Просто установите Preitter Extensions на VS CODE, он переформатирует весь ваш файл

введите описание изображения здесь

0 голосов
/ 07 августа 2020

Вероятно, это связано с конфликтующими инструментами форматирования, доступными в коде vs. Чтобы решить эту проблему

  1. Нажмите Ctrl+Shift+P (windows) или Cmd+Shift+P (Ma c)
  2. Введите Format Document With...
  3. Выберите Configure default Formatter...
  4. Выберите вариант форматирования в будущем. (Если вы выбираете встроенный инструмент форматирования кода, лучше отключить / удалить другие расширения формата кода)
  5. Выберите все Ctrl+A (Windows) или Cmd+A (Ma c) и нажмите Ctrl+K Ctrl+F (windows) или Cmd+K Cmd+F для форматирования документа.
0 голосов
/ 07 августа 2020

Если вы используете расширение prettier в Visual Studio Code, попробуйте добавить его в настройки. json file: 

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me

Что ж, если вам нравится способ разработчика, Visual Studio Code позволяет вам укажите различные типы файлов для tabSize. Вот пример моих настроек. json с четырьмя пробелами по умолчанию и JavaScript / JSON двумя пробелами: 

{
 // I want my default to be 4, but JavaScript/JSON to be 2
 "editor.tabSize": 4,
 "[javascript]": {
  "editor.tabSize": 2
 },
"[json]": {
 "editor.tabSize": 2
 },

 // This one forces the tab to be **space**
"editor.insertSpaces": true
}
0 голосов
/ 07 августа 2020

Вам следует скачать Prettier. Затем от go до Настройки и отметьте (флажок) ' Prettier: JSX Bracket Same Line ' Он должен работать

...