Visual studio code перенос строк

Обновлено: 08.01.2025

Форматирование кода – задача не из простых, но современные инструменты разработки позволяют автоматически поддерживать целостность кодовой базы вашего проекта.

Данный мануал научит вас использовать инструмент Prettier, который автоматически форматирует код в Visual Studio Code (или VS Code)

Для демонстрации мы возьмем такой фрагмент кода:

const name = "James";
const person = >
console.log(person);
const sayHelloLinting = (fName) => console.log(`Hello linting, $`)
>
sayHelloLinting('James');

Если вы знакомы с правилами форматирования кода, вы заметите несколько ошибок:

Здесь одновременно используются двойные и одинарные кавычки.
Первое свойство объекта person должно быть с ним в одной строке.
Оператор console внутри функции должен иметь отступ.
В стрелочной функции используются необязательные круглые скобки.

Требования

1: Команда Format Document

Установив расширение Prettier, вы можете использовать его для форматирования вашего кода. Для начала давайте рассмотрим команду Format Document. Эта команда сделает ваш код более последовательным по интервалам, переносам строк и кавычкам.

Чтобы открыть панель команд, нажмите Command+Shift+P в macOS или Ctrl+Shift+P в Windows.

В палитре команд найдите format, а затем выберите Format Document.

Затем панель может предложить вам выбрать формат, который нужно использовать. Для этого нажмите кнопку Configure.

Примечание. Если панель не предложила вам выбрать формат по умолчанию, вы можете выбрать его вручную в Settings. Установите в Editor: Default Formatter значение ebsenp.prettier-vscode.

Теперь код будет отформатирован с учетом всех пробелов, переносов строк и правильных кавычек:

const name = 'James';
const person = < first: name >;
console.log(person);
const sayHelloLinting = (fname) => console.log(`Hello linting, $`);
>
sayHelloLinting('James');

Это также работает для файлов CSS. Вы можете превратить код с неправильно расставленными скобками, точками с запятой и разбивкой на строки в хорошо отформатированный файл. Например, такой код:

Будет переформатирован так:

body color: red;
>
h1 color: purple;
font-size: 24px;
>

Теперь, когда мы изучили эту команду, давайте посмотрим, как запускать ее автоматически.

2: Форматирование кода при сохранении

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

Чтобы изменить этот параметр, нажмите Command+ в MacOS или Ctrl+ в Windows. Вы попадете в меню Settings. Открыв это меню, найдите параметр Editor: Format On Save и выберите его, поставив галочку.

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

3: Конфигурация Prettier

Prettier делает много полезного по умолчанию, но стандартное поведение можно изменить, отредактировав настройки.

Откройте меню Settings и найдите Prettier. На вашем экране появятся все параметры Prettier, которые вы можете изменить.

Вот несколько параметров, которые меняют чаще всего:

Single Quote: позволяет выбрать одинарные или двойные кавычки.
Semi: указывает, следует ли включать точку с запятой в конце строк.
Tab Width: указывает количество пробелов, которое нужно вставлять.

Главный недостаток встроенного меню конфигураций в VS Code – это то, что оно не обеспечивает согласованности настроек в вашей команде.

4: Создание конфигурационного файла Prettier

Создайте новый файл .prettierrc.extension, указав вместо extension одно из следующих расширений:

Вот пример конфигурационного файла в формате JSON:

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

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

Заключение

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

Prettier обеспечивает согласованность кода и может форматировать его автоматически.

Редактор кода Visual Studio Code

Достоинств у данного редактора достаточно. По мимо подсветки синтаксиса, дизайна, пояснений к набираемому коду и автозавершений, определенным его достоинством является поддержка популярных языков и технологий:

Существует так же уйма расширений, на любой вкус и цвет. На официальном сайте есть подробная документация и обзор возможностей данного редактора.

Поддержка синтаксиса Emmet

Ну а каркас HTML документа по стандартам W3 HTML5 и подавно создать легко:

Расширения

PHP Debug (использует библиотеку XDebug и незаменим при отладке PHP-кода )
Bootstrap 3 Snippets (сниппеты популярного HTML-CSS-JS фреймворка)
Debugger for Chrome (Отладка кода JavaScript в браузере Chrome)
WordPress Snippet (функции WordPress)

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

Как установить расширение?

Установка происходит проще-простого. Либо из меню интерфейса редактора, где необходимо в разделе расширений ввести ключевое слово и воспользоваться поиском:

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

@popular (популярные)
@recommended (рекомендуемые)
@outdated (требуемые обновления)

А вообще автоматическое обновление Ваших расширений можно настроить достаточно просто с помощью одной строчки конфигурации. Для этого необходимо открыть настройки редактора:

Файл → Параметры → Параметры пользователя

перед вами будут два окна (вкладки), где необходимо ознакомится с текущими настройками, каждая из которых прокомментирована и внести правки для сохранения в пустое окно.

Пользовательская настройка редактора

В своем предыдущем редакторе Notepad++ я определенно привык к двум вещам:

Все это мгновенно настраивается. Ниже приведен список настроек редактора с комментариями. Ознакомьтесь на досуге.

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

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

Основные

Ctrl + ⇧Shift + P или F1 Показать палитру команд

Ctrl + P Быстрое открытие, переход в файл.

Ctrl + ⇧Shift + N Новое окно/экземпляр

Ctrl + ⇧Shift + W Закрыть окно/экземпляр

Ctrl + , Параметры (Пользовательские настройки)

Ctrl + K или Ctrl + S Горячие клавиши (управление)

Редактирование - Базовые

Ctrl + X Вырезать строку (пустое выделение)

Ctrl + C Копировать строку (пустое выделение)

Alt + ↑ / ↓ Переместить строку вверх/вниз

⇧Shift + Alt + ↓ ИЛИ ↑ Копировать строку вверх/вниз

Ctrl + ⇧Shift + K Удалить строку

Ctrl + Enter Вставить строку ниже

Ctrl + ⇧Shift + Enter Вставить строку выше

Ctrl + ⇧Shift + \ Перейти к соответствующей скобке

Ctrl + ] ИЛИ [ Отступ/уменьшить отступ линии

Home ИЛИ End Перейти к началу / концу строки

Ctrl + Home Перейти к началу файла

Ctrl + End Перейти в конец файла

Ctrl + ↑ ИЛИ ↓ Прокрутка строки вверх / вниз

Alt + PgUp / PgDn Прокрутка страницы вверх / вниз

Ctrl + ⇧Shift + [ Свернуть фрагмент кода

Ctrl + ⇧Shift + ] Развернуть фрагмент кода

Ctrl + K Ctrl + [ Свернуть все сворачиваемые фрагменты кода

Ctrl + K Ctrl + ] Развернуть все сворачиваемые фрагменты кода

Ctrl + K Ctrl + 0 Fold (collapse) all regions

Ctrl + K Ctrl + J Unfold (uncollapse) all regions

Ctrl + K Ctrl + C Добавить строчный комментарий //

Ctrl + K Ctrl + U Удалить строчный комментарий //

Ctrl + / Поставить/снять строчный комментарий //

⇧Shift + Alt + A Поставить/снять блочный комментарий /* . */

Alt + Z Вкл/выкл перенос строк

Поиск и замена

Ctrl + H Заменить

F3 ИЛИ ⇧Shift + F3 Найти следующий/предыдущий

Alt + Enter Select all occurences of Find match

Ctrl + D Add selection to next Find match

Ctrl + K Ctrl + D Move last selection to next Find match

Alt + C ИЛИ R ИЛИ W Toggle case-sensitive / regex / whole word

Мульти-курсор и выделение

Alt + Click Вставить курсор - Insert cursor

Ctrl + Alt + ↑ ИЛИ ↓ Insert cursor above / below

Ctrl + U Undo last cursor operation

⇧Shift + Alt + I Insert cursor at end of each line selected

Ctrl + I Select current line

Ctrl + ⇧Shift + L Select all occurrences of current selection

Ctrl + F2 Select all occurrences of current word

⇧Shift + Alt + → Expand selection

⇧Shift + Alt + ← Shrink selection

⇧Shift + Alt + (drag mouse) Column (box) selection

Ctrl + ⇧Shift + Alt + (arrow key) Column (box) selection

Ctrl + ⇧Shift + Alt + PgUp / PgDn Column (box) selection page up/down

Редактирование многих языков

Ctrl + Пробел Trigger suggestion

Ctrl + ⇧Shift + Пробел Trigger parameter hints

⇧Shift + Alt + F Format document

Ctrl + K Ctrl + F Format selection

F12 Go to Definition

Alt + F12 Peek Definition

Ctrl + K F12 Open Definition to the side

Ctrl + . Quick Fix

⇧Shift + F12 Show References

F2 Переименовать символ

Ctrl + K Ctrl + X Trim trailing whitespace

Ctrl + K M Change file language

Управление редактором

Ctrl + F4 , Ctrl + W Закрыть редактор

Ctrl + K F Закрыть папку

Ctrl + \ Разделить редактор

Ctrl + 1 ИЛИ 2 ИЛИ 3 Focus into 1st, 2nd or 3rd editor group

Ctrl + K Ctrl + ← ИЛИ → Focus into previous/next editor group

Ctrl + ⇧Shift + PgUp ИЛИ PgDn Move editor left/right

Ctrl + K ← ИЛИ → Move active editor group

Управление файлами

Ctrl + N Новый файл

Ctrl + O Открыть файл.

Ctrl + S Сохранить

Ctrl + ⇧Shift + S Сохранить как.

Ctrl + K S Сохранить все

Ctrl + F4 Закрыть

Ctrl + K Ctrl + W Закрыть все

Ctrl + ⇧Shift + T Открыть закрытый редактор - Reopen closed editor

Ctrl + K Enter Оставить открытым редактор в режиме предварительного просмотра - Keep preview mode editor open

Ctrl + Tab↹ Открыть следующий

Ctrl + ⇧Shift + Tab↹ Открыть предыдущий

Ctrl + K P Копировать путь активного файла

Ctrl + K R Открыть активный файл в проводнике

Ctrl + K O Показать активный файл в новом окне/экземпляре

Display

F11 Toggle full screen

⇧Shift + Alt + 0 Toggle editor layout (horizontal/vertical)

Ctrl + = ИЛИ - Zoom in/out

Ctrl + B Toggle Sidebar visibility

Ctrl + ⇧Shift + E Show Explorer / Toggle focus

Ctrl + ⇧Shift + F Показать Поиск

Ctrl + ⇧Shift + G Show Source Control

Ctrl + ⇧Shift + D Показать Отладка (Debug)

Ctrl + ⇧Shift + X Показать Расширения

Ctrl + ⇧Shift + H Replace in files

Ctrl + ⇧Shift + J Toggle Search details

Ctrl + ⇧Shift + U Show Output panel

Ctrl + ⇧Shift + V Open Markdown preview

Ctrl + K V Open Markdown preview to the side

Ctrl + K Z Zen Mode (Esc Esc to exit)

Отладка (Debug)

F9 Переключить точку останова

F11 / ⇧Shift + F11 Step into/out

Ctrl + K Ctrl + I Show hover

Интегрированный терминал

Ctrl + ` - Показать встроенный терминал

Ctrl + Shift + ` - Создать новый терминал

Ctrl + C Копировать выделенное

Ctrl + V Вставить в активный терминал

Ctrl + ↑ ИЛИ ↓ Прокрутить вверх/вниз

⇧Shift + PgUp ИЛИ PgDn Прокрутить на одну страницу вверх/вниз

Ctrl + Home Прокрутка в начало

Ctrl + End Прокрутка в конец

Инструкция как быстро и просто сделать копию репозитория GitHub к себе на компьютер при помощи редактора Visual Studio Code. Задача буквально на два-три клика мышкой.

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

Подбора лучших расширениях для редактора кода Visual Studio Code, которыми я сам пользуюсь и советую обратить на них ваше внимание.

Установка и использование расширения в редакторе кода VSCode для правильной подсветки синтаксиса кода файлов шаблонов и htm для Winter CMS.

Как установить и настроить шрифт JetBrains Mono в редакторе кода Visual Studio Code. Небольшая инструкция по настройке шрифта в редакторе VSCode.

Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

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

Объединить строку

Mac — Ctrl+j
Ubuntu, Windows: откройте существующие сочетания клавиш File -> Preferences -> Keyboard shortcuts и назначьте удобное сочетание для editor.action.join.

Форматирование кода

Это сочетание помогает выровнять код в соответствии с заранее прописанными настройками редактора.

Windows — Shift + Alt + F
Mac — Shift + Option + F
Ubuntu — Ctrl + Shift + I

Обрезка множественных пробелов

Данное сочетание клавиш помогает избавиться от лишних пробелов в начале или конце строки.

Совет: применяйте в самом конце, когда завершаете работу над кодом в текущем файле.

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

Также мы добавили новую команду для запуска вручную (Trim Trailing Whitespace в палитре команд).

Если вы используете более новую версию VS Code, после открытия пользовательских настроек вы увидите следующее окно (поставьте галочку, как показано):

Сворачивание блоков кода

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

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

Windows /Ubuntu — Ctrl + Shift + [
Mac — Command+ Option + [

Чтобы развернуть, применяйте те же сочетания, но с закрывающей квадратной скобкой:

Windows /Ubuntu — Ctrl + Shift + ]
Mac — Command+ Option + ]

Скопировать строку сверху или снизу

Windows — Shift + Alt + стрелка вверх / вниз
Mac — Shift + Option + стрелка вверх / вниз
Ubuntu — Ctrl + Shift + Alt + стрелка вверх / вниз

Назначенные сочетания можно посмотреть и отредактировать, пройдя по пути File > Preferences > Keyboard Shortcuts.

Разбить окно редактора по вертикали

Windows — Shift + Alt + \ или 2,3,4
Mac — Command + \ или 2,3,4
Ubuntu — Shift + Alt + \ или 2,3,4

Чтобы разбить окно редактора, можно воспользоваться командой split editor. Оригинальное сочетание клавиш для разделения окна — 123. Функция разделения полезна для параллельного редактирования файлов.

Назначенные сочетания также можно отредактировать, выбрав новые по своему вкусу (File > Preferences > Keyboard Shortcuts).

Окно редактора в виде сетки

По умолчанию группы редактора располагаются в вертикальных столбцах (например, когда вы разбиваете окно, чтобы открыть параллельно два файла). Но вы можете с легкостью расположить группы так, как вам больше нравится (хоть вертикально, хоть горизонтально).

Для поддержки гибких макетов можно создать пустые группы редактора. По умолчанию закрытие последнего редактора группы закрывает и саму группу, но это поведение можно изменить, добавив в настройках workbench.editor.closeEmptyGroups: false.

В меню View > Editor Layout можно посмотреть набор готовых вариантов разделения окна.

Выделить слово

Windows, Ubuntu — Ctrl+ d
Mac — Command + d

Если нажать command + d больше одного раза, к выделению добавится еще одно вхождение того же слова далее по тексту.

Открыть или закрыть боковую панель

Windows, Ubuntu — Ctrl+ b
Mac — Command + b

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

Переход к указанной строке

Примечание: чтобы перейти к нужной строке в файле, используйте сочетание клавиш ctrl + g, после которого введите номер строки. Или же сначала откройте меню файла при помощи command + p, затем введите двоеточие и номер нужной строки.

Windows, Ubuntu — Ctrl + g
Mac — Ctrl + g или Ctrl + p

Переход к символу в файле

Windows, Ubuntu — Ctrl + Shift + o
Mac — Command + Shift+ o

Символы можно группировать, добавив двоеточие:

Переход к символу в рабочем окружении

Windows, Ubuntu — Ctrl + t
Mac — Command + t

Удаление предыдущего слова

Windows, Ubuntu — Ctrl + backspace
Mac — Command + delete

Полезно в ситуациях, если набрали лишнее, а жать несколько раз backspace не любите.

Выделение целых слов

Windows, Ubuntu — Ctrl + Shift + стрелка вправо / влево
Mac — Command + Shift + стрелка вправо / влево

Очень полезно для более быстрого выделения и редактирования.

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

Windows, Ubuntu — Ctrl + Shift + d
Mac — Command + Shift +d

Дублирование строк это очень полезный и хорошо известный функционал.

Удаление строки

Windows, Ubuntu — Ctrl + x
Mac — Command + x

Добавление курсора сверху / снизу

Windows, Ubuntu — Ctrl + Alt + стрелка вверх / вниз
Mac — Command + Alt + стрелка вверх / вниз

Функция дублирования курсоров в VS Code, пожалуй, сэкономит вам больше всего времени.

Переименование символа

Выделите нужный символ, а затем нажмите f2. Также можно использовать контекстное меню.

Выделение столбца

Windows, Ubuntu — Shift + Alt
Mac — Shift + Option

При помощи этих сочетаний клавиш и движения мыши можно выделять блоки текста. В конце каждой выделенной строки будет добавлен курсор.

Палитра команд

Windows, Ubuntu — Ctrl + p
Mac — Command + p

При помощи этих сочетаний клавиш можно получить доступ ко всем доступным в вашем контексте командам. Вот самые используемые из них:

1. Открыть файл

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

2. Посмотреть сочетание клавиш для команды

Все команды в палитре команд приводятся с назначенными им сочетаниями клавиш (если такие назначения есть). Поэтому, забыв нужное сочетание, можно подсмотреть его в палитре.

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

Читайте также: