Как выровнять код в vs code
Перейти к содержимому

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

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

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

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

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

     Document  

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

Чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки 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
  • Обзор редакторов кода

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

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

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

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

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

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

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

  • 10 августа 2023

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

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

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

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

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

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

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

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

  • 7 августа 2023

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

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

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

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

  • 2 августа 2023

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

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

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

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

  • 29 июня 2023

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

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

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

  • 11 июня 2023

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

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

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

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

  • 9 июня 2023

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

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

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

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

  • 6 июня 2023

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

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

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

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

  • 12 апреля 2023

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

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

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

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

  • 7 апреля 2023

Webpack: инструкция по применению

Webpack: инструкция по применению

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

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.

CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:

npm install copy-webpack-plugin --save-dev 

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >; 

В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .

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

const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >; 

В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist . Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

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

Другие способы

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

Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader , установите его с помощью npm :

npm install file-loader --save-dev 

Затем добавьте его в конфигурационный файл webpack.config.js :

module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >; 

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev 

Затем добавить в конфигурационный файл webpack.config.js :

module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >; 

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.

  • 30 марта 2023

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

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

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

Отслеживать
7,722 13 13 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака
ответ дан 5 фев 2019 в 14:27
26.1k 7 7 золотых знаков 31 31 серебряный знак 48 48 бронзовых знаков
Огромное спасибо , наконец то не надо будет в онлайн форматере работать
6 фев 2019 в 6:58

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

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

Что искать в настройках
  1. Или Editor: Format On Save в графическом интерфейсе введите сюда описание изображения
  2. Или editor.formatOnSave в settings.json
    введите сюда описание изображения
Предупреждение:

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

20 сочетаний клавиш для ускорения работы в VS Code

Полезные сочетания клавиш в VS Code

Перевод статьи «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

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

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

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

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

  1. Откройте пользовательские настройки (Preferences > Settings > вкладка User Settings).
  2. Кликните значок <> в верхней правой части окна. Это откроет документ.
  3. Добавьте новое правило «files.trimTrailingWhitespace«: true в документ User Settings (если его там еще нет). Таким образом вы не редактируете дефолтные настройки напрямую, а добавляете к ним новое правило.
  4. Сохраните файл User Settings.

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

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

Пользовательские настройки 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, пожалуй, сэкономит вам больше всего времени.

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

  • Windows, Mac, Ubuntu — F2.

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

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

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

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

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

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

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

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

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

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

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

Для каждой команды приводится сочетание клавиш

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

  • Linux — https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
  • Window — https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
  • macOS — https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

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

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

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

В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.

Для демонстрации мы будем форматировать следующий код:

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

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

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

Предварительные требования

Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.

Чтобы работать с Prettier в Visual Studio Code, вам потребуется установить расширение. Для этого выполните поиск инструмента Prettier — Code Formatter в панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку install вместо кнопки uninstall, как показано здесь:

Файл readme расширения Prettier

Шаг 1 — Использование команды форматирования документа

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

Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.

Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.

Открытая палитра команд с результатами поиска format

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

Строка выбора средства форматирования по умолчанию

Затем выберите Prettier — Code Formatter.

Выбор Prettier

Примечание. Если вы не видите диалога выбора формата по умолчанию, вы можете вручную изменить его в разделе «Настройки». Установите для Editor: Default Formatter значение esbenp.prettier-vscode .

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

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

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

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

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

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

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

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

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

Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:

Опция Editor: Format On Save включена

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

Шаг 3 — Изменение параметров конфигурации Prettier

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

Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:

Параметры конфигурации для Prettier

Вот несколько наиболее распространенных параметров:

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

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

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

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

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

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

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

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

Заключение

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

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *