Как выровнять код в vs code

Как структурировать код в Visual Studio Code?

Автоматическое форматирование кода в Visual Studio Code выполняется следующими комбинациями:

• Windows: Shift + Alt + F
• Mac: Shift ⇧ + Option ⌥ + F
• Ubuntu: Ctrl + Shift + I

Отслеживать
7,856 13 13 золотых знаков 27 27 серебряных знаков 57 57 бронзовых знаков
ответ дан 5 фев 2019 в 14:27
26.7k 7 7 золотых знаков 32 32 серебряных знака 49 49 бронзовых знаков
Огромное спасибо , наконец то не надо будет в онлайн форматере работать
6 фев 2019 в 6:58

В дополнении к ответу от @Эникейщик

В настройках можно установить форматирование при сохранении

Что искать в настройках

1. Или Editor: Format On Save в графическом интерфейсе
2. Или editor.formatOnSave в settings.json
   

Предупреждение:

Влючайте данную опцию, если вы точно уверены в своих настройках и используемых форматтерах. При сохранении файлы будут изменены. И это может давать побочные эффекты также для git-веток.

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

Создать структуру документа

Это сочетание клавиш за секунду создаёт базовую структуру кода или вложенные теги.

Быстро добавить комментарий

Чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + / , и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.

Перейти к строке под номером

Windows — Ctrl + G

macOS — Control + G

Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G , введите номер строки и спокойно спасайте вселенную.

Поменять строку местами с соседними

Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.

Alt и стрелки меняют текущую строку местами с соседними.

Дублировать строку

Windows Shift + Alt + ↓ / ↑

macOS Shift + Option + ↓ / ↑

Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.

Перейти к парной скобке

Windows Ctrl + Shift + \

macOS Shift + Command + \

Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl + Shift + \ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.

Переименовать переменную

Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2 .

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

Windows — Shift + Alt + F

macOS Shift + Option + F

VS Code предложит установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки и скобки, сделает строки кода читаемыми.

Перейти к переменной

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости и где она объявлена. F12 перенесёт вас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

Включить или выключить перенос слов

Windows — Alt + Z

macOS Option + Z

Если строки кода или текст не вмещаются в редактор по ширине, включите перенос.

Включить дзен-режим

Windows — Ctrl + KZ

macOS — Command + KZ

Лучшее решение для тех, кто входит в состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться в реальный мир, нажмите Escape .

�� Больше статей о фронтенде и работе в айти в телеграм-канале.

Материалы по теме

• 10 лучших тем для VS Code
• 34 инструмента для веб-разработчика на каждый день
• 10 полезных плагинов VS Code для вёрстки
• 17 плагинов для JavaScript в VS Code
• Обзор редакторов кода

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Figma Dev Mode становится платным. Всё пропало?

Если вы всё пропустили, то на днях в Фигме появилась такая плашка:

Коротко: Dev Mode, скоро выходит из бета-версии и станет платным. Dev Mode — это тот новый режим, который умеет удобно сразу показывать весь нужный CSS и свойства в одном месте. Мы уже рассказывали о нём в «Доктайпе».

Но прошло полгода и лавочка закрылась. Отвечаем на самые распространенные вопросы, которые могли у вас появиться (потому что они появились и у нас).

• 30 января 2024

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

• 10 августа 2023

Горячие клавиши Figma для быстрой работы

Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.

А если не пользуетесь — попробуйте.

• 7 августа 2023

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

• 2 августа 2023

Инструменты для работы со шрифтами

Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.

Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.

• 29 июня 2023

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

• 11 июня 2023

10 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

• 9 июня 2023

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

• 6 июня 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.

• 12 апреля 2023

Как собрать проект на Webpack

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.

• 7 апреля 2023

Горячие клавиши в VS Code

Становимся многорукими волшебниками: ускоряемся с помощью хоткеев и парочки других приёмов.

Владимир Матасов

В IT пришёл из наружной рекламы, где проработал с десяток лет. В Skillbox изучает веб-вёрстку. Увлекается археологией, диджеингом и плёночной фотографией.

Здорово экономят время разработчика горячие клавиши. Есть такие и в Visual Studio Code . Здесь даже можно создавать свои сочетания, но большинству пользователей хватает исходных комбинаций (особенно новичкам, у кого и так глаза разбегаются от уймы настроек).

Пройдёмся по самым полезным для начинающего верстальщика. Читайте и сразу же пробуйте.

1. Вызвать поиск

Найти все элементы с классом link и стилизовать некоторые, присвоив им дополнительный класс.

Нажмите Ctrl + F (Windows) или ⌘Cmd + F (macOS). Введите искомое — высветятся все найденные места. Остаётся перемещаться по ним (стрелочками в форме поиска).

Как сделать форматирование кода с помощью Prettier в Visual Studio Code

Когда пишешь код, бывает трудно сосредоточиться на его внешней красоте. Отступы, одинарные и двойные кавычки, добавление или не добавление точек с запятой — всё это кажется неважным на фоне размышлений о сложной логике взаимодействия компонентов современного веб-приложения.

Здесь на помощь приходит Prettier Code Formatter. Это настраиваемый форматировщик кода, который поддерживает множество языков и интегрируется с большинством редакторов. В этой статье мы посмотрим, как работать с Prettier в Visual Studio Code. Другие интеграции и способы установки смотрите в документации Prettier .

Настройка рабочей среды

Будем исходить из того, что Visual Studio Code у вас уже установлен. А ещё есть файл с кодом, который срочно нуждается в форматировании. Например, вот такой фрагмент:

const name = "Timeweb";
const service =>
console.log(service);
const printName = (fName) => console.log(`This is $`)
>
printName ('Timeweb');

Здесь стандартные проблемы: не смогли определиться с тем, какие кавычки использовать, потеряли отступы и переносы. Если запустить код, то он выполнится — для машины все эти отступы в JavaScript особого значения не имеют. А вот человеку читать такое будет сложно.

Следующий шаг — установка расширения для автоматической простановки отступов, точек с запятыми и других вещей, которые делают код человекопонятным.

1. Выберите вкладку Extensions в меню VS Code (можно использовать сочетание Ctrl + Shift + X на Windows).
2. Найдите Prettier. У этого расширения для VS Code больше 20 млн установок.
3. Нажмите Install для установки.

Есть альтернативный способ. Нажмите сочетание Ctrl + P для вызова панели быстрого запуска и выполните команду:

ext install esbenp.prettier-vscode

Теперь можно использовать утилиту для быстрого исправления внешнего вида кода.

Автоформатирование

Новое сообщение в Слаке от проджект-менеджера — нужно срочно отправлять в продакшн обновлённую страницу с преимуществами Timeweb Cloud . Всё готово и работает, но вот форматирование кода подкачало — команда за такое по голове не погладит. Но у нас же теперь есть расширение, которое поможет разобраться с этими неприятными недостатками быстро и безболезненно.

1. Нажмите сочетание Ctrl + Shift + P, чтобы открыть палитру команд.

2. Найдите и выполните команду Format Document With.

3. Выберите в выпадающем списке Prettier.

Код отформатируется со всеми необходимыми пробелами, отступами, переносами и единообразными кавычками.

const name = "Timeweb";
const person = < first: name >;
console.log(person);
const sayHelloLinting = (fName) => console.log(`Hello linting, $`);
>;
sayHelloLinting("Timeweb");

Очень удобная штука — быстрая установка инструментов для разных языков. Например, если вы запустите автоформатирование в файле кодом на Python, появится предложение добавить autopep8. Эта утилита автоматически форматирует код Python в соответствии с руководством по стилю PEP 8. Она использует pycodestyle, чтобы определить, какие части кода необходимо отформатировать. Autopep8 способен исправить большинство проблем, о которых сообщает pycodestyle.

Чтобы каждый раз не приходилось наводить красоту вручную, добавьте автоформатирование при сохранении.

1. Откройте Settings (на Windows это Ctrl + ,).
2. С помощью поисковой строки найдите параметр Editor: Format On Save.
3. Отметьте чекбокс, чтобы включить форматирование при сохранении файла.

Готово, теперь ручной запуск не понадобится.

Настройка собственных правил форматирования

Разработчики могут настраивать свои правила форматирования. Есть два способа:

1. Изменить конфигурацию прямо в настройках расширения.
2. Создать отдельный файл конфигурации.

В настройках самого расширения можно изменить распространённые параметры. Например, указать количество пробелов при табуляции или выбрать, нужно добавлять точку с запятой в конце строки или нет. Это быстро, но конфигурация будет только у вас. Чтобы раскатить конфигурацию на всю команду разработчиков, нужно создавать отдельный файл. В нём будут единые правила форматирования кода в Visual Studio Code.

Файл .prettierrc.extension с конфигурацией может иметь расширение yml, yaml, json, js или toml. Вот простейший пример в формате JSON:

 "trailingComma": "es5", 
"tabWidth": 2, 
"semi": true, 
"singleQuote": false
>

Другие базовые варианты смотрите в документации Prettier .

Заключение

Prettier — инструмент, который помогает значительно ускорить разработку. Он автоматически применяет правила оформления, заданные по умолчанию или настроенные разработчиком.

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