VS Code: вам не нужно это расширение, часть 2

От /

От редакции TechRocks: первую часть статьи можно прочитать тут.

Photo by Antonio Batinić from Pexels

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

«Лекарство от болезней часто в нас самих», — Вильям Шекспир

1. Обернуть выбранный HTML-код в тег

Иногда требуется обернуть блок HTML другим элементом при рефакторинге HTML-документа. Делать это вручную неудобно.

Например, в приведенном ниже коде, чтобы заключить 3 элемента div в основной элемент, придётся перейти к строке 10 и ввести открывающий тег main. Если у нас включена опция автоматического добавления закрывающих тегов, возможно, нам придется удалить этот закрывающий тег. Затем нам нужно перейти к строке 26 и ввести закрывающий тег main.

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

Расширения

  • htmltagwrap  (277K установок): «Переносит выбранный код в HTML-теги»
  • html tag wrapper (165K установок): «Оборачивает выбранный тег html при нажатии ctrl + i, также позволяет легко изменить имя внешнего тега».

Настройка VS Code

Emmet также может сделать это за вас. Выберите нужный код и запустите команду Emmet: wrap with abbreviation. Вам будет предложено ввести сокращение (можно просто ввести название нужного тега). Набираем main и нажимаем Enter.

Если вы хотите обернуть более чем одним тегом и включить класс, вы можете указать сокращение Emmet, например main>div.container, которое даст вам такой HTML-код:

<main>
    <div class="container">
        <div>Lorem....</div>
        <div>Animi...</div>
        <div>Velit...</div>
    </div>
</main>

2. Расцвечивание пар скобок

Стилизация пар совпадающих скобок может помочь определить область видимости в вашем коде. В частности, очень популярно раскрашивание скобок в зависимости от уровня их вложенности.

Довольно много расширений так или иначе выполняют эту работу.

Расширения

  • Bracker Pair Colorizer (6,2 млн установок): «Настраиваемое расширение для раскрашивания соответствующих скобок». Тот же автор написал Bracket Pair Colorizer 2 в качестве замены с кардинальными изменениями и большим упором на производительность.
  • Bracket Pair Colorizer 2 (3,2 млн установок): «Настраиваемое расширение для раскрашивания пар скобок». Сейчас не поддерживается.
  • Rainbow Brackets (1 млн установок): «Раскрашивает в цвета радуги круглые, квадратные и фигурные скобки».
  • Highlight Matching Tag (945K установок): «Подсвечивает совпадающие закрывающие и открывающие теги».
  • Subtle Match Brackets (88K установок): «Подчеркивание соответствующих скобок и многое другое».

Настройка VS Code

VS Code представил собственную раскраску пар скобок в версии 1.6.0 (август 2021 г.). Это намного быстрее, чем любое из перечисленных расширений. Подробности можно почитать в посте «Bracket pair colorization 10,000x faster».

Раскрашивание пар скобок можно включить, установив для editor.bracketPairColorization.enabled значение true.

Цвета скобок могут быть заданы в теме, либо их можно установить с помощью параметра workbench.colorCustomizations.

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

Свойство editorBracketHighlight.foreground1 относится к первому набору скобок, editorBracketHighlight.foreground2 — ко второму набору скобок и так далее. Кроме того, есть свойство editorBracketHighlight.unexpectedBracket.foreground для любых лишних скобок.

Настройки для раскраски пары скобок

"editor.bracketPairColorization.enabled": true,
"workbench.colorCustomizations": {
    "[Panda Syntax]": {
      "editorBracketHighlight.foreground1": "#E6E6E6",
      "editorBracketHighlight.foreground2": "#FF75B5",
      "editorBracketHighlight.foreground3": "#19f9d8",
      "editorBracketHighlight.foreground4": "#B084EB",
      "editorBracketHighlight.foreground5": "#45A9F9",
      "editorBracketHighlight.foreground6": "#FFB86C",
      "editorBracketHighlight.unexpectedBracket.foreground": "#FF2C6D"
}

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

3. Раскрашивание направляющих отступов

Направляющие отступов – это вертикальные линии, обозначающие блоки вашего кода. Они помогают увидеть структуру кода. VS Code называет их «направляющими пар скобок» (bracket pair guides).

Расширения

  • Indent Rainbow 2,4 млн установок): «Это расширение окрашивает отступ перед текстом, чередуя четыре разных цвета с каждым шагом. Цвет отступа зависит от размера табуляции».

Настройка VS Code

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

Направляющие пар скобок можно включить, установив для editor.guides.bracketPairs значение true (по умолчанию там false). Есть третья опция — active. Если она включена, отображаться будет направляющая отступа только для активного блока. Этот параметр следует использовать вместо устаревшего editor.renderIndentGuides.

Как видно из примера ниже, цвета отступов по умолчанию приглушены и выглядят ненасыщенными.

Вы можете включить выделение направляющей отступа для текущей области, установив для editor.guides.highlightActiveIndentation значение true. Его следует использовать вместо устаревшего параметра editor.highlightActiveIndentGuide.

Как видно из приведенного ниже примера, активная направляющая отступа отображается более насыщенным цветом.

Существует также параметр editor.guides.bracketPairsHorizontal, который определяет, нужно ли (и, если нужно, то когда) отображать горизонтальные линии, если строка кода пересекает другой уровень отступа. По умолчанию стоит active.

Как и в случае со скобками, цвета могут быть объявлены в теме или установлены с помощью параметра workbench.colorCustomizations. Можно изменить цвет линий на каждом уровне отступа с помощью свойств editorBracketPairGuide.background {1, ..., 6} и editorBracketPairGuide.activeBackground {1, ..., 6}.

Настройки направляющих отступов

Соответствующие настройки:

"editor.guides.bracketPairs" : true,
"editor.guides.highlightActiveIndentation" : true,
"editor.guides.bracketPairsHorizontal" : "active",

"workbench.colorCustomizations": {
    "[Panda Syntax]": {
      "editorBracketPairGuide.background1": "#FFB86C",
      "editorBracketPairGuide.background2": "#FF75B5",
      "editorBracketPairGuide.background3": "#45A9F9",
      "editorBracketPairGuide.background4": "#B084EB",
      "editorBracketPairGuide.background5": "#E6E6E6",
      "editorBracketPairGuide.background6": "#19f9d8",

      "editorBracketPairGuide.activeBackground1": "#FFB86C",
      "editorBracketPairGuide.activeBackground2": "#FF75B5",
      "editorBracketPairGuide.activeBackground3": "#45A9F9",
      "editorBracketPairGuide.activeBackground4": "#B084EB",
      "editorBracketPairGuide.activeBackground5": "#E6E6E6",
      "editorBracketPairGuide.activeBackground6": "#19f9d8",
}

4. Запуск и автоматизация скриптов (NPM, Gulp, Make и др.)

Большинство проектов требует выполнения таких задач, как линтинг, тестирование, сборка, упаковка и развертывание. В зависимости от типа проекта вы можете использовать разные инструменты для этого, такие как NPM, Grunt, Gulp, Make и т. д. Хотя это часто делается из командной строки, бывает удобно запустить некоторые из этих действий в редакторе без переключения контекста.

Расширения

  • NPM  (2,7 млн ​​установок): «Это расширение поддерживает выполнение скриптов npm, определенных в файле package.json, и проверку установленных модулей на предмет зависимостей, определенных в package.json».
  • Gulp Tasks (39K установок): «Расширение для визуализации и выполнения задач gulp для Visual Studio Code».
  • Make (31К установок): «Запускаем Make легко».

Настройка VS Code

В VS Code существуют задачи (Tasks). Задачи могут быть настроены для запуска скриптов в VS Code с помощью палитры команд (command palette). Можно настроить способ их запуска, добавить к ним привязку клавиш, выполнять несколько скриптов в последовательности или запускать их автоматически при открытии рабочего пространства.

VS Code может автоматически находить скрипты для Gulp, Grunt, Jake и npm. Вы также можете запускать shell-скрипты, однако они не обнаруживаются автоматически.

Я вкратце покажу вам, как можно запускать скрипты NPM в виде задач. VS Code берет их из вашего package.json.

Задача сборки по умолчанию

Нажатие Ctrl + Shift + B или запуск команды «Run Build Task» покажет вам все автоматически обнаруженные задачи, из которых можно выбрать нужную. Что касается NPM, он сужает для вас этот список:

Обычно первый вариант — правильный.

Выполнение задачи

Вы можете запустить задачу с помощью команды Tasks: Run Task. Выведется список автоматически обнаруженных задач из вашей рабочей области и пользовательских задач, созданных вами.

Если вы хотите запустить задачу для определенного инструмента, можно использовать быстрое открытие файла, нажав Ctrl + P или через меню File>Go to File, наберите «task» и нажмите пробел, а затем раскрывающийся список покажет вам варианты для различных инструментов.

Для своего проекта на JavaScript я выбираю npm и получаю список своих скриптов npm.

Выберите скрипт, и он запустится.

Автоматизировать задачи

Вы можете определить пользовательские задачи для своего проекта в <папка проекта>/.vscode/tasks.json. Можно создать файл самостоятельно или запустить команду Tasks: Configure Task, чтобы создать файл шаблона, выбрав параметр Create task.json file from template.

Вы можете настроить запуск задачи при открытии проекта через свойство runOptions. Я часто использую это в проектах для запуска сервера разработки всякий раз, когда открываю проект. Вот как выглядит tasks.json для этого:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run dev server on startup",
      "type": "shell",
      "command": "npm run dev",
      "windows": {
        "command": "npm run dev"
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": { "runOn": "folderOpen" }
    }
  ]
}

Добавление сочетания клавиш для задачи

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

Например, чтобы связать Ctrl + R с задачей запуска сервера разработки, нужно добавить следующее в файл keybindings.json:

{
  "key": "ctrl+r",
  "command": "workbench.action.tasks.runTask",
  "args": "Run dev server on startup"
}

Свойство args должно соответствовать значению label из tasks.json.

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

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

Правильное форматирование упрощает чтение кода и экономит вычислительные ресурсы вашего мозга.

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

Расширения

  • Prettier (15 млн установок): Prettier — форматтер с очень небольшим количеством параметров конфигурации. По умолчанию он поддерживает несколько языков: JavaScript, JSX, Angular, Vue, Flow, TypeScript, CSS, Less, SCSS, HTML, JSON, GraphQL, Markdown и YAML. Он имеет архитектуру плагинов, расширяющую его до большего количества языков.
  • Beautify (7,3 млн установок): Beautify использует js-beautify. Он поддерживает Javascript, JSON, CSS, Sass и HTML. Вы можете использовать файл .jsbeautifyrc для управления настройками стиля.
  • HTML Format (300К установок).
  • JSON Formatter (30K установок).
  • И многие, многие другие расширения, перечисленные в разделе форматтеров.

Настройка VS Code

VS Code имеет встроенные средства форматирования для HTML, JavaScript, TypeScript и JSON. Это достойная основа для фронтенд- и бэкэнд-разработчиков, ориентированных на JavaScript.

Вам может быть интересно, почему CSS и CSS-подобные синтаксисы отсутствуют в этом списке. Я не знаю. Однако я точно знаю, что разработчики VS Code не планируют добавлять такое в будущем. Как и в случае с другими языками, которых нет в этом списке, вам понадобится специфическое расширение для форматирования.

Хотя есть соблазн, в частности, у меня как у фронтенд-разработчика, просто установить Prettier, потому что он поддерживает несколько языков, здесь необходим какой-то компромисс. Я расскажу об этом в разделе «Другие языки» ниже.

Настройки для языков со встроенными форматтерами

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

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript, javascriptreact, typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json, jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
}

Я пробовал их какое-то время и был приятно удивлен. VS Code использует js-beautify под капотом, который также используется расширением Beautify. Таким образом, от этого расширения вы можете ожидать аналогичных результатов. Ваш опыт может отличаться в зависимости от форматирования JSONC. Я не использую React, поэтому не могу комментировать, насколько хорошо форматируется код для него.

Включить файл .jsbeautifyrc в проект для управления форматированием нельзя. Однако доступны эквивалентные настройки форматирования. Можно найти настройки форматирования для каждого языка с соглашением об именах <имя-языка>.format.<имя-свойства>. Вот несколько примеров:

"html.format.wrapAttributesIndentSize": 2,
"html.format.templating": true,

"javascript.format.insertSpaceAfterCommaDelimiter": true,
"javascript.format.semicolons": "insert",

Есть более подробная информация о настройках форматирования HTML в документации.

Другие языки

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

Для других языков у вас есть несколько разных вариантов:

  1. Многие расширения для языковой поддержки также являются форматерами, например  Python, поддержка языка Java от Red Hat, Ruby, YAML, XML Tools, Vetur для Vue, и Svelte для VS Code (под капотом использует Prettier). Вы можете применить один из них в качестве средства форматирования.
  2. Вы можете установить расширение Prettier или Beautify для работы с несколькими дополнительными языками, такими как CSS. Это легко сделать. Однако эти расширения загружаются всегда, независимо от языков, используемых в проекте, поскольку они используют событие onStartupFinished в своей конфигурации. Это расточительное использование системных ресурсов, особенно если вы работаете над бэкенд-проектами, языки которых не форматируются этими расширениями. Конечно, вы можете отключить расширение для рабочего пространства, чтобы оно не загружалось. Если у вас приличный компьютер, возможно, это не будет вас не беспокоить.
  3. Если вы хотите использовать расширение Prettier для языка, который не поддерживается по умолчанию, например, Java, вам необходимо установить плагин Prettier (пакет node) в качестве зависимости для этого проекта. Неудобно, когда в бэкэнд-проекте находятся пакеты node, если сам проект не на JavaScript. Если вы делитесь проектом с другими, наличие двух или более наборов зависимостей будет очень мешать.
  4. Вы можете установить средство форматирования, предназначенное для определенного языка. Можно поискать определенный язык в категории «Formatter». Но они не так уж распространены.

Если вы – фронтенд-разработчик, для вас большим упущением в списке встроенных средств форматирования будет обработка CSS и синтаксисов, подобных CSS. Возможны следующие варианты:

  • Вы можете использовать расширение stylelint как для линтинга, так и для форматирования. Stylelint охватывает все синтаксисы, подобные CSS. Вы можете указать глобальную конфигурацию stylelint в настройках VS Code.
  • Если вы используете SASS (файлы .sass), вы, вероятно, установили поддержку языка  расширение SASS. Это тоже форматтер.
  • Если вы используете фронтенд-фреймворки, вы, вероятно, установили расширение для поддержки языка, которое также выполняет функцию форматтера, например, Vetur для Vue и Svelte for VS Code для Svelte.
  • Кажется, нет стоящего специализированного средства форматирования CSS. Есть JS-CSS-HTML Formatter, но он имеет ряд серьезных проблем.
  • Если вышеперечисленное вас не устраивает, возможно, установка  Beautify или Prettier – лучший вариант.

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

Заключение

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

Перевод статьи VS Code: You don’t need that extension part 2.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

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

Прокрутить вверх