Как форматировать код в VS Code

Когда вы вводите команды в VS Code, иногда последнее, о чем вы думаете, это попытка быть аккуратным. Хотя форматирование не требуется для запуска программы, оно очень помогает при отладке и поиске ошибок.

< p>В этой статье мы покажем вам, как форматировать код в VS Code, а также дадим другие полезные советы по организации кода.

Как форматировать код

VS Code имеет встроенные команды для приведения текущего набранного кода к стандартному формату. Эти сочетания клавиш не требуют дополнительных расширений и могут быть использованы в любое время. Ярлыки следующие:

Для ПК

Форматировать весь документ:

1. Откройте файл с кодом, который вы хотите отформатировать.
   

< li id="step2">Нажмите “Shift + Alt + F”.


2. Сохраните изменения, нажав “Файл” в верхнем левом углу, затем выберите “Сохранить” или нажав “Ctrl + S”.
   

Форматирование только выбранного кода:

1. В файле со строками кода, которые вы хотите отформатировать, выберите строки, выделив их с помощью мыши.
   
2. Нажмите “Ctrl + K”.
   
3. Нажмите “Ctrl + F”.
   
4. Сохраните изменения, выбрав “Сохранить” в меню «Файл» в верхнем левом углу или нажав “Ctrl + S”.
   

Обратите внимание, что если вы нажмете “Ctrl + F” без предварительного нажатия “Ctrl + K” вы откроете меню поиска. Если это произойдет, просто закройте, щелкнув значок “x” кнопку или клавишу Esc.

Перемещение строк вверх или вниз:

1. переместите курсор в начало нужной строки. для перемещения.
   
2. Удерживайте клавишу Alt.
   < img src="/wp-content/uploads/2022/04/b20bb80707375c91c0c42fbe89e6a6fb.png" />
3. Чтобы переместить строку вверх, нажмите стрелку вверх. Чтобы переместить его вниз, нажмите стрелку вниз.
   
4. Сохраните файл, выбрав его в меню «Файл» в верхнем левом углу в окне или нажав “Ctrl + S”.
   

Изменить отступ одной строки:

1. Переместите курсор в начало строки, в которой вы хотите изменить отступ.
   
2. Нажмите “Ctrl + ]” чтобы увеличить отступ.
   
3. Нажмите “Ctrl + [“ чтобы уменьшить отступ.
   
4. Сохраните изменения, выбрав Сохранить из файла меню или нажав “Ctrl + S”.
   

Для Mac

Отформатировать весь документ:

1. Откройте файл с кодом, который вы хотите отформатировать.
2. Нажмите “⇧ + ⌥ + F.”
   
3. Сохраните изменения, нажав “Файл&rdquo ; в левом верхнем углу, затем выберите “Сохранить” или нажав “⌘ + S”.

Форматирование только выбранного кода:

1. Выделите часть документа, которую вы хотите отформатировать.
2. Нажмите ⌘ + K”.
   
3. Нажмите “⌘ + F”.
   
4. Сохраните файл, нажав “⌘ + S” или выбрав “Сохранить” в меню «Файл» в верхнем левом углу окна.
   

Примечание. использование “⌘ + F” не нажимая “⌘ + К” заранее откроет только меню поиска. Чтобы закрыть меню поиска, просто нажмите “x” справа или нажмите Esc.

Перемещение строк вверх или вниз:

1. поместите курсор в начало строки вы хотите изменить.
2. Удерживая клавишу “⌥” Ключ.
   
3. Чтобы переместить строку вверх, нажмите стрелку вверх. Чтобы переместить его вниз, нажмите стрелку вниз.
   
4. Сохраните изменения. выбрав “Сохранить” в меню «Файл» или нажав “⌘ + S”.
   

Изменить отступ одной строки.

1. Переместите курсор в начало строки, в которой вы хотите изменить отступ.

< li id="step2">Нажмите “⌘ + ]” чтобы увеличить отступ.


2. Нажмите “⌘ + [“ чтобы уменьшить отступ.
   
3. Сохраните файл, нажав “⌘ + S” или выбрав “Сохранить” в меню «Файл» в верхнем левом углу окна.
   

VS Код формата кода при сохранении

В VS Code нет встроенной команды, которая форматирует документ при сохранении. Вместо этого это можно сделать, установив расширение форматирования в приложение VS Code. Самым популярным из этих расширений является Prettier, которое предоставляет множество функций форматирования для VS Code. Чтобы установить Prettier, выполните следующие действия:

1. Откройте VS Code.
   
2. Нажмите кнопку «Расширения», расположенную в левом меню. Это значок, который выглядит как четыре прямоугольника. Кроме того, вы можете нажать “Ctrl + Shit + x” для ПК или “⌘ + ⇧ + х” на Mac.
   
3. В строке поиска в верхней части меню введите Prettier.< br>
4. Нажмите кнопку «Установить» в правом нижнем углу значка Prettier. .
   
5. Подождите, пока расширение завершит установку.
   

Прежде чем Prettier сможет начать автоматическое форматирование документа при сохранении, вам нужно будет настройте расширение, чтобы активировать функцию. Это делается следующим образом:

1. Откройте окно настроек, нажав “Ctrl +,” на ПК или “⌘ +,” на Mac.
   
2. В строке поиска введите форматтер. Это должно открыть несколько настроек форматирования.
   
3. В параметре «Редактор: форматирование по умолчанию» убедитесь, что выбрано расширение Prettier. Если средство форматирования по умолчанию отсутствует или VS Code по умолчанию использует другое средство форматирования, нажмите стрелку раскрывающегося списка. Выберите “Красивее– Средство форматирования кода” из списка. Кроме того, Prettier может отображаться в списке как “esbenp.prettier-vscode”.
   
4. Убедитесь, что параметр “Редактор: форматировать при сохранении” вариант проверен. Если нет, установите флажок.
   
5. Введите “Prettier” в строке поиска настроек.
   
6. Прокрутите вниз, пока не найдете строку “Prettier: Require Config”. Убедитесь, что флажок установлен. Этот параметр не позволяет Prettier форматировать документы без файла конфигурации. Это удобно, когда вы просматриваете загруженный код, который может иметь собственные правила форматирования. Это предотвратит непреднамеренную перезапись параметров форматирования. Обратите внимание, что файлы без названия будут форматироваться автоматически, даже если этот параметр установлен.
   
7. Вы можете изменить определенные настройки Prettier в зависимости от ваших предпочтений. Когда вы закончите, вы можете выйти из этого меню.

Поскольку вы настроили Prettier для автоматического форматирования только при наличии файла конфигурации, вы должны создать его для каждого проекта. Для этого выполните следующие действия:

1. Выберите корневую папку проекта в меню слева.
   
2. Нажмите кнопку «Новый файл», чтобы создать файл конфигурации.
   < img src="/wp-content/uploads/2022/04/abc11482082893c3351cd5f7090c7b17.png" />
3. Назовите этот файл “.prettierrc.”
   
4. В файле просто введите {}.
   
5. Prettier теперь будет автоматически форматировать ваш документ всякий раз, когда вы его сохраняете.

Советы по упорядочению кода

1. Несмотря на отступы не является обязательным для запуска программы, он может помочь в отладке, разбивая код на управляемые модули. Например, операторы If-Then или вложенные случаи могут выиграть от этого, сделав каждый альтернативный вариант визуально отличимым друг от друга. Это удобно, когда вы имеете дело с логическими ошибками, а не с синтаксическими.
2. Если вы даёте имена модулям или коротким строкам кода, сделайте привычкой использовать описательные заголовки, а не просто называть их модулем 1, модулем 2 и т. д. Это поможет понять, какая часть кода выполняет ту или иную функцию.< /li>
3. Всегда полезно использовать комментарии в своих интересах. Включаете ли вы краткое описание или просто добавляете заметку для себя, комментарии очень помогают во время отладки.

Организация кода

Поддержание правильного форматирования ваших проектов не только облегчает чтение, а также помогает выявлять ошибки и упорядочивать код. Хотя это и не обязательно для запуска программы, знание того, как форматировать файлы в VS Code, является определенным преимуществом.

Знаете ли вы другие способы форматирования файлов в VS Code? Не стесняйтесь поделиться своими мыслями в разделе комментариев ниже.