12 расширений VS Code, которые вам следует рассмотреть
Visual Studio Code - один из самых популярных вариантов для веб-разработки среди IDE.
Помимо того, что он имеет открытый исходный код и полностью бесплатен, его поддерживает огромное сообщество.
С VS Code вы можете найти буквально тысячи расширений, от маленьких до больших, и все они в основном находятся на расстоянии одного клика.
В этой статье я расскажу о 12 расширениях VS Code, которые я считаю особенно полезными с точки зрения производительности и удовлетворения от работы.
Если вы все еще не перешли на VS Codeism, вам следует начать с этого 😉
Зайдите сюда и сразу же конвертируйте бесплатно:
https://code.visualstudio.com/
Материал Тема
Первое расширение, о котором я хочу упомянуть, - это Material Theme.
Это одна из самых популярных тем, а версии созданы для разных IDE; IntelliJ, Atom, Sublime и, конечно же, VS Code.
Работать с ней очень приятно и приятно, она доступна в разных цветовых вариантах на любой вкус.
Я, например, установил эту тему почти во все IDE, которые я использую, и я не собираюсь возвращаться.
В этих примерах снимков экрана вы можете сравнить стандартный макет VS Code с темой материала.
Начните работу с Material Theme прямо сейчас, посетив их официальную веб-страницу: https://material-theme.site/
И пока вы это делаете, установите значки тем материалов: https://github.com/PKief/vscode-material-icon-theme
Ваши глаза будут вечно благодарны!
Отступ радуги
Это простое небольшое расширение раскрашивает отступы в вашем коде разными цветами для каждого уровня.
Для языков, где отступ является частью синтаксиса языка, это может быть особенно полезно.
В других языках, таких как JavaScript, оно делает отступы немного более читабельны, поэтому они не могут не радовать глаз.
По умолчанию цвета отступов - это, как следует из названия, - цвета радуги.
Лично я предпочитаю, чтобы цвета были более приглушенными, чтобы они казались более тонкими для глаза.
Проверить это
К счастью, изменить цвета отступов очень просто.
Просто перейдите в «Настройки», найдите «цвета», выберите «Внешний вид» и нажмите «Изменить в settings.json».
Найдите или создайте свойство indentRainbow.colors и добавьте цвета в массив.
Цвета из приведенного выше примера выглядят следующим образом:
"indentRainbow.colors": [ "rgba(16,16,16,0.1)", "rgba(16,16,16,0.2)", "rgba(16,16,16,0.3)", "rgba(16,16,16,0.4)", "rgba(16,16,16,0.5)", "rgba(16,16,16,0.6)", "rgba(16,16,16,0.7)", "rgba(16,16,16,0.8)", "rgba(16,16,16,0.9)", "rgba(16,16,16,1.0)" ],
Попробуйте это классное маленькое расширение здесь:
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Раскраска для пары кронштейнов
На самом деле это одно из моих любимых визуальных расширений для VS Code.
Расширение раскрашивает совпадающие скобки и круглые скобки, тем самым выделяя область действия скобок.
Этот изящный маленький инструмент действительно помогает вам быстро составить представление о том, что есть в вашем коде.
И, конечно же, вы можете настроить цвета и то, что они должны сочетать, чтобы инструменты соответствовали любым дополнительным визуальным расширениям / темам, которые вы могли бы имеют.
Вы определенно обязаны попробовать это расширение:
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
Выделить соответствующий тег
Пока мы говорим о сопоставлении открывающих и закрывающих скобок, вы также можете расширить его с помощью этого небольшого инструмента.
Это краткое улучшение функциональности, которая уже поставляется с VS Code, то есть возможность выделять совпадающие открывающие или закрывающие теги в HTML и JSX.
Однако это расширение немного более гладкое и более настраиваемое, чем то, которое поставляется из коробки с VS Code.
Оно очень минималистично, но, безусловно, заслуживает упоминания.
На этом примере снимка экрана мы видим, что компонент Provider красиво выделен для нас.
Посмотрите репозиторий этого инструмента на GitHub и посмотрите, насколько легко его настроить, чтобы он точно соответствовал вашим потребностям:
https://github.com/vincaslt/vscode-highlight-matching-tag
Лучшие комментарии
Последнее визуальное расширение, о котором я хочу упомянуть, - это Better Comments.
Это расширение помогает вам использовать разные типы аннотаций для разных типов комментариев и раскрашивает их для вас.
Как мы видим в этом примере, мы можем использовать разные аннотации, такие как * для выделения ? для вопросов
!TODO для задач //// для сквозных комментариев
Я лично считаю очень полезным выделение предупреждений и задач. Когда вы читаете код, его довольно сложно пропустить.
Мне также очень нравится, как вы можете явно сообщить, что определенный код без комментариев должен быть удален, просто добавив два дополнительных //
Git Lens
Это, без сомнения, одно из самых мощных расширений совместной работы для VS Code.
В дополнение к Git, Git Lens помогает визуализировать авторство кода с помощью аннотаций Git Blame.
Обратите внимание, как я получаю действительно ценные сведения об этом коде.
Во-первых, я вижу, что автором этого класса HueStore являюсь я и еще 2 человека.
Во-вторых, в каждой строке, на которую я помещаю курсор, есть сведения о будет отображена история git.
Если я наведу указатель мыши на эту строку, мне будет предложено еще больше параметров.
Я могу изучить историю git, я могу перейти к удаленному источнику и многое другое.
На самом деле, это расширение огромно и предлагает вам множество действительно полезных опций.
Если у вас еще не установлено это расширение, я настоятельно рекомендую вам сразу же установить его!
Ознакомьтесь с официальным репозиторием GitHub и узнайте больше здесь:
https://github.com/eamodio/vscode-gitlens
WakaTime
Теперь, когда я перехожу к теме идей, я действительно хочу порекомендовать WakaTime.
Этот онлайн-инструмент автоматически генерирует полезные метрики о вашей деятельности по кодированию прямо из вашей IDE.
Все, что нужно, - это установить расширение WakaTime VS Code, и ваши показатели автоматически появятся на вашей личной панели инструментов WakaTime, которую вы можете посетить из своего браузера.
Вы также можете встроить отдельный виджет непосредственно на свою веб-страницу, если вы хотите настроить внешний вид или совместить с другими виджетами из аналогичных служб.
Аналогичным образом, совместное использование метрик стало гладким и легким.
Конечно, WakaTime интегрируется со всеми основными IDE, включая IDE JetBrains, Sublime и VS Code.
Начните работу с WakaTime прямо сейчас:
https://wakatime.com/
https://github.com/wakatime/vscode-wakatime
Стоимость импорта
Теперь давайте немного поговорим о производительности.
При всей красоте Webpack есть типичное узкое место - размер пакета, который быстро выходит из-под контроля.
Это довольно обсуждаемая тема, и существуют разные подходы и инструменты для анализа и ограничения размера пакета вашего дистрибутива.
Стоимость импорта - очень удобный инструмент, который просто покажет вам размер сторонних пакетов, которые вы импортируете
Информация появится в момент импорта пакета и поможет вам определить очевидные проблемы с размером вашего пакета.
Если вы хотите узнать больше о том, почему это важно, я предлагаю вам прочитать статью Держите размер пакета под контролем автора Яир Хаимович.
Начать работу с Import Cost не может быть проще.
Установите расширение и сразу же получите полезную информацию о своем импорте!
https://github.com/wix/import-cost
Руководство по стилю JavaScript для ESLint и Airbnb
В современном программировании вам может понадобиться линтер.
Линтер - это инструмент, который будет выполнять анализ вашего кода и помогать вам определять проблемные шаблоны и поддерживать хорошую гигиену кода.
Учитывая динамический и при слабой типизации языков, таких как JavaScript, линтер становится особенно важным.
ESLint - это утилита линтинга с открытым исходным кодом для JavaScript, работающая на Node и выполняющая анализ кода в реальном времени на лету.
К счастью, VS Code уже работает на Node в оболочке Electron, что делает очень удобным просто установить расширение ESLint в VS Code, и все готово!
ESLint сам по себе полностью настраивается, а правила можно удалять и добавлять в файл .eslintrc, который находится в корне вашего проекта, или в файле package.json.
Подробнее о настройке ESLint можно узнать здесь:
Https://eslint.org/docs/user-guide/configuring
Руководство по стилю JavaScript для Airbnb - это самоуверенный набор правил ESLint, которые определяют руководство по стилю для JavaScript.
Полное руководство по стилю JavaScript для Airbnb огромно и довольно строго, но очень легко перезаписать или обойти отдельные правила, которые вы или ваша команда может оказаться неудобной в использовании.
Однако есть много веских аргументов в пользу соблюдения определенного набора рекомендаций по стилю, особенно если вы сотрудничаете с другими разработчиками над проектом JavaScript.
Airbnb Руководство по стилю JavaScript - один из самых популярных вариантов, и, применяя стиль и методы Airbnb, вы обеспечиваете единообразный, чистый и гигиеничный код, а также получаете выгоду от соблюдения руководства по стилю, которое выбрали МНОГИЕ другие команды и разработчики.
Независимо от того, работаете ли вы самостоятельно, в небольшой команде или над огромным проектом, я настоятельно рекомендую использовать ESLint и Airbnb JavaScript Style Guide.
Это популярное руководство по стилю существует как для JavaScript, так и для TypeScript (для последнего используется TSLint)
https://github.com/airbnb/javascript
https://github.com/progre/tslint -config-airbnb /
Кроме того, я создал свою собственную конфигурацию TSLint, которая включает настраиваемые правила, которых нет ни в каких других библиотеках Руководства по стилю.
Это очень хорошо сочетается с Руководством по стилю Airbnb для TypeScript.
Вы можете найти проект здесь:
https://github.com/Silind/tslint-config-silind
Красивее
Говоря о соблюдении определенного набора рекомендаций по стилю, я хочу также представить средство форматирования кода Prettier.
Проще говоря, Prettier выполнит автоматическое форматирование огромной части вашего кода, чтобы убедиться, что он соответствует заданному набору правил.
Prettier можно настроить индивидуально или просто наследовать правила ESLint / TSLint.
Вы можете легко отформатировать свой документ с помощью команды: Ctrl + shift + P - ›Форматировать документ.
Или отформатировать выделенный фрагмент с помощью Ctrl + shift + P -› Форматировать выделенный фрагмент.
Prettier также можно настроить для выполнения форматирования при сохранении.
Лично я считаю это очень полезным и использую почти всегда.
В сочетании с ESLint / TSLint Prettier - действительно удобный инструмент!
Попробуйте - я уверен, вы не пожалеете
Https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Отладчик для Chrome
Как правило, инструмент отладки для VS Code сильно недооценивается.
Несмотря на то, что встроенный отладчик VS Code существует почти с самого начала, я все еще сталкиваюсь со многими разработчиками, которые склонны использовать console.log или debugger; в ситуациях, когда отладчик VS Code, кажется, не работает. быть явно лучшим выбором.
И, честно говоря, я совсем недавно был среди этих разработчиков.
Однако отладчик VS Code вместе с расширением; Отладчик для Chrome - это одно из открытий, которые сэкономили мне больше всего времени и боли.
Если вы все еще используете console.log везде в своем коде, я настоятельно рекомендую вам потратить немного времени и привыкнуть к использованию отладчика VS Code и отладчика для Chrome.
Поверьте, это того стоит!
Если вам нужно хорошее место для начала, прочтите эту статью VS Code Chrome Debugger and Webpack от Michael Main.
Журнал Turbo Console
Конечно, бывают случаи, когда намного проще просто выйти из значения какой-либо переменной.
Итак, напоследок я упомяну этот удобный небольшой инструмент.
Turbo Console Log автоматизирует процедуру написания значимых сообщений журнала.
Это очень просто: выделите переменную, из которой вы хотите выйти, затем нажмите Ctrl + Alt + l.
Вы получите console.log, которое создает сообщение журнала в формате:
TCL: functionName -> variableName, variableValue
Кроме того, вы можете закомментировать все console.log нажатием кнопки.
Так что, если вам действительно нужен console.log, это немного облегчит вашу жизнь.
Проверьте это здесь:
https://github.com/Chakroun-Anas/turbo-console-log
Вот и все!
12 расширений VS Code, которые, я думаю, вам стоит рассмотреть.
На самом деле было довольно сложно ограничиться этим списком, потому что там очень много действительно хороших и полезных расширений.
В заключение я хотел бы выразить огромное спасибо трудолюбивым разработчикам нашего сообщества, которые вкладывают время и усилия, чтобы внести свой вклад с помощью всех этих замечательных инструментов!
Это, безусловно, делает нас всех более продуктивными и делает нашу работу более приятной.
Мы очень признательны!
Если вы знаете несколько интересных расширений, которые, по вашему мнению, заслуживают упоминания, оставьте комментарий ниже или напишите мне в Twitter!
