Как подключить jquery в visual studio code
Обновлено: 07.07.2024
Одно из важнейших условий для продуктивной работы веб-программиста — хорошо настроенный редактор кода. Один из них — опенсорсный универсальный редактор Visual Studio Code, который замечателен не только тем, что он бесплатен, но и тем, как много полезного он умеет сразу после установки и минимальной настройки. Если речь идёт о том, чтобы использовать VS Code в какой-то конкретной сфере, вроде разработки на JavaScript, обычно стоит дополнить его несколькими расширениями, которые повышают производительность труда и упрощают жизнь программиста. Вокруг VS Code сложилось активное сообщество разработчиков расширений. Эти расширения легко искать и ещё легче устанавливать.
В материале, перевод которого мы сегодня публикуем, речь пойдёт о расширениях для VS Code, которые пригодятся тем, кто пишет на JS. Тут стоит отметить, что в деле выбора расширений для VS Code немалую роль играют личные предпочтения программиста. В результате можно сказать, что расширения, о которых пойдёт здесь речь, не являются абсолютно необходимыми. Не стоит рассматривать их как нечто, что обязательно нужно устанавливать и использовать. Обзавестись тем или иным расширением стоит лишь в том случае, если вам оно понравилось, и вы полагаете, что вам оно точно пригодится.
Расширения, которые обязательно стоит попробовать
В этом разделе мы поговорим о расширениях для VS Code, которые настолько хороши, что разработчикам редактора стоило бы встроить их в него.
▍ESLint — линтер
Применение ESLint в VS Code
Возможно, сейчас вы подумаете о том, что ESLint в VS Code — это, возможно, излишество, так как там уже имеется встроенная система IntelliSense, которая выдаёт отличные подсказки в ходе работы. IntelliSense, и правда, замечательно делает своё дело, но как быть, если не все в вашем проекте используют VS Code? А что делать, если вам нужны разные настройки, скажем — для JSX, для некоей конкретной версии чистого JS, который планируется выполнять в браузере, для среды Node.js, которая используется на сервере? Во всех этих случаях можно воспользоваться ESLint. Кроме того, ESLint можно встроить в систему проверки кода для запуска его перед отправкой материалов в репозиторий, для того, чтобы лишний раз убедиться в том, что все, кто коммитят в репозиторий, придерживаются единого стиля кодирования.
▍GitLens — работа с Git
VS Code, сразу после установки, содержит средства для работы с Git, поэтому расширение GitLens, о котором мы сейчас поговорим, относится больше к улучшению имеющихся возможностей редактора, чем к добавлению в него чего-то принципиально нового. На самом деле, существует множество подобных расширений, предназначенных для работы с Git.
Использование GitLens в VS Code
Однако, GitLens выгодно отличается от других похожих инструментов большим и активным сообществом, а также широчайшими возможностями настройки. Это, в частности, позволяет влиять на объём справочных данных, присутствующих редакторе. Скажем, фрагменты кода можно сравнивать, развернув пару панелей так, что они займут всё пространство окна, а, при необходимости, можно ограничиться небольшой подсказкой, выводимой в строке состояния.
Краткие сведения о коде, выводимые GitLens
Расширение GitLens особенно полезно при работе над большими проектами, когда разработчик не может точно знать о том, кто именно написал тот или иной фрагмент кода. Благодаря GitLens сведения об авторе конкретной строки выводятся в строке состояния VS Code. В результате, если у программиста возникает вопрос о том, почему или как что-то сделано, он может обратиться непосредственно к тому, кто написал интересующий его код, что упрощает общение в команде.
Тут я хочу дать одну рекомендацию, которая заключается в добавлении следующей строки в настройки VS Code.
Она позволяет убрать построчное аннотирование кода, которое может мешать работе, рассеивая внимание на излишние подробности.
▍TODO Highlight — подсветка важных комментариев
Комментарии к коду обычно не особенно бросаются в глаза, поэтому мы нередко не обращаем на них особого внимания. В целом — это хорошо, так как они не отвлекают от работы, однако, иногда комментарии весьма важны, поэтому их хорошо было бы сделать более заметными, чтобы гарантировать их прочтение, и то, что тот, для кого они предназначены, отреагирует на них. Такие комментарии, например, программист может писать сам для себя — чтобы напомнить себе, где он остановился. Пишут их и для других разработчиков.
Расширение TODO Highlight в VS Code
Благодаря расширению TODO Highlight, если в комментарии содержится слово TODO или FIXME , оно будет автоматически выделено, что точно не даст такой комментарий пропустить. Это очень удобно.
▍Import Cost — сведения о размере импортируемых модулей
Import Cost — отличный плагин, который подойдёт тем программистам, которые склонны к самоистязанию. Всякий раз, когда вы импортируете в свой проект очередной модуль, Import Cost сообщает вам о его размере.
Использование расширения Import Cost в VS Code
В результате вам постоянно приходится спрашивать себя о том, стоит ли та польза, которую вы собираетесь извлечь из модуля, увеличения размера проекта. В общем-то, такие вопросы, хотя и заставляют иногда помучиться, благотворно сказываются на результатах работы.
Полезные расширения, которые могут пригодиться
В этом разделе мы поговорим о полезных расширениях, без которых вполне можно обойтись. Однако они облегчают жизнь программиста, поэтому, вполне возможно, что вам они пригодятся.
▍Prettier — средство для форматирования кода
Расширение Prettier родственно вышерассмотренному ESLint в том плане, что его целью является обеспечение применения стандартизированного стиля кодирования. Благодаря Prettier код можно форматировать прямо в редакторе. Фундаментальная разница между Prettier и ESLint заключается в том, что вместо того, чтобы выводить сведения об ошибках, как это делает ESLint (хотя в ESLint есть и параметр --fix ), Prettier даёт программисту переформатированный вариант кода, выглядящего так, как он должен выглядеть в соответствии с заданными правилами. Он отлично показывает себя и при подготовке кода к отправке в репозиторий, так как способен автоматически переформатировать код и привести его к требуемому стилю перед каждым выполнением команды git commit .
Стоит отметить, что Prettier, в основном, нацелен на форматирование кода, поэтому его использование не делает ненужным применение линтера, ответственного за качество программы. В дополнение к этому, Prettier можно интегрировать в ESLint, что позволяет, например, автоматически запускать Prettier средствами ESLint. Prettier поставляется со встроенным набором правил, однако, если ваше представление о стиле кода отличается от того, которое выражено в правилах Prettier, их вполне можно настроить.
▍Быстрое открытие страниц в браузере — расширение open in browser
Иногда, при работе над неким проектом, для просмотра страниц которого не требуется процесс сборки, может понадобиться открыть в браузере обычный HTML-файл. Раньше так делали постоянно, теперь всё иначе, но порой это может оказаться очень кстати.
Работа с расширением open in browser в VS Code
В подобных редких случаях вам пригодится расширение open in browser, благодаря которому, через контекстное меню, можно открыть страницу в браузере, заданном по умолчанию, или в каком-нибудь другом браузере, установленном в системе. В результате вам больше не придётся возиться с консолью для того, чтобы открыть единственный файл в браузере.
▍Расширение для React-разработчиков vscode-styled-components
Ранее мы рассматривали расширения, которые могут оказаться полезными для всех, кто пишет на JS. Теперь поговорим о vscode-styled-components. Это расширение имеет достаточно узкую область применения, а именно, оно предназначено для тех, кто пользуется библиотекой styled-components в React.
Работа с расширением vscode-styled-components в VS Code
Так как при работе с библиотекой styled-components используются тегированные шаблонные строки, многие средства для подсветки синтаксиса будут воспринимать соответствующие блоки кода как единое целое. Благодаря рассматриваемому расширению код будет воспринят правильно, а внутри шаблона можно будет легко различать его составные части.
▍Расширение VSCode Great Icons — иконки для редактора
Пожалуй, говоря о расширении VSCode Great Icons, достаточно сказать, что оно позволяет добавить в редактор более сотни отличных иконок для файлов.
Расширение VSCode Great Icons
▍Расширение Bookmarks — закладки
Код, в идеале, всегда является модульным, хорошо читаемым и достаточно кратким, что ведёт к тому, что проблем с просмотром файлов с текстами программ возникать не должно. Если же случится так, что некий файл окажется настолько большим, что в нём будет трудно ориентироваться, с помощью расширения Bookmarks его можно разбить на логические части, по которым удобно перемещаться.
Работа с расширением Bookmarks
▍Тема One Monokai
У меня есть рабочая теория, которая заключается в том, что непривлекательный внешний вид, скажем, окна редактора кода, ведёт к переутомлению глаз. Я дописываю научную работу, посвящённую этому вопросу.
Тема One Monokai
Стандартная тема оформления VS Code, на самом деле, не так уж и плоха. Однако, если код приложения, на который вы смотрите целый день, без особых трудностей можно сделать хотя бы немного симпатичнее, стоит этой возможностью воспользоваться. Конечно, существует огромное количество дополнительных тем для VS Code, но One Monokai — это как раз та, которая лично мне очень и очень понравилась. Безусловно, подобные вещи очень субъективны, нельзя говорить о том, что она понравится всем или хотя бы очень многим, но вы вполне можете поискать среди тем для VS Code ту, которая подойдёт именно вам.
Итоги
В этом материале мы рассмотрели десять расширений для VS Code. Надеемся, вы найдёте среди них что-нибудь такое, что вам пригодится.
Visual Studio Code или просто VS Code – это бесплатный, популярный и имеющий множество дополнений текстовый редактор, который в первую очередь предназначен для создания и отладки современных веб- и облачных приложений.
Разработан он компанией Microsoft и доступен для операционных систем Windows, MacOS и Linux.
Распространяется данная программа бесплатно, исходный код её доступен на GitHub.
VS Code поддерживает большое количество языков программирования, включает в себя отладчик, средства для работы с Git, подсветку синтаксиса, технологию автодополнения IntelliSense, инструменты для рефакторинга, терминал и многое другое.
VS Code является достаточно гибким инструментом, расширяемым с помощью плагинов, доступных на Visual Studio Marketplace. Открыть панель с расширениями в программе можно через комбинацию клавиш Ctrl+Shift+X .
Плагинов для Visual Studio Code очень много, но в рамках этой статьи рассмотрим только наиболее популярные из них. В VS Code уже встроен такой плагин как Emmet. Если вы не знакомы с ним, то он предназначен для быстрого набора кода. Дополнительно его устанавливать не нужно.
Установка VS Code
Для установки VS Code на компьютер необходимо перейти на этот сайт. После этого на странице выбрать вашу операционную систему и нажать на значок "Загрузки". После завершения скачивания программы установить её себе на компьютер.
Чтобы лучше ориентироваться в программе вы можете установить языковый пакет для русского языка. Для этого откройте панель «Расширения» ( Ctrl+Shift+X ) и введите в ней текст «Russian Language Pack for Visual Studio Code». После этого выберите его в результатах поиска и установите его.
В Visual Studio Code имеется огромное количество различных плагинов кроме языковых пакетов. Предназначены они для расширения функциональности этого редактора. Все плагины для этого редактора размещены на Marketplace.
Общая настройка VS Code
VS Code содержит большое количество настроек, с помощью которых вы можете настроить этот редактор под себя.
Изменение настроек в VS Code осуществляется в соответствующем окне. Открыть его можно несколькими способами:
- через комбинацию клавиш Ctrl+, ;
- через пункт меню «Файл -> Настройки -> Параметры» (в версии на английском языке «File -> Preferences -> Settings»);
- нажать на значок шестерёнки и выбрать в открывшемся меню пункт «Параметры» (Settings).
Список параметров, которые пользователи наиболее часто настраивают:
Изменять настройки можно как глобально, так и конкретно для текущего проекта. Изменение глобальных настроек осуществляется в окне «Параметры» на вкладке «Пользователь». Эти настройки сохраняются в файл «settings.json». Открыть его можно нажав на значок «Открыть параметры (JSON)».
Пример файла «settings.json»:
Кстати, изменять настройки также можно просто посредством редактирования этого файла.
Сохранение настроек для рабочей директории выполняется в специальный файл «settings.json», который будет добавлен в папку «.vscode». Настройка параметров для рабочей директории (проекта) можно также выполнить просто посредством редактирования этого файла.
Настройка VS Code для HTML и CSS
Visual Studio Code обеспечивает базовую поддержку при написании HTML и CSS из коробки. Имеется подсветка синтаксиса, умные дополнения с IntelliSense и настраиваемое форматирование. VS Code также имеет отличную поддержку Emmet.
Зачем нужен Emmet? Он позволяет очень быстро писать код.
Например, Emmet аббревиатура ul>li*3>span.item-$ после нажатии клавиши Tab создаст следующий код:
В CSS аббревиатура Emmet как dn создаст код display: none .
VS Code имеет встроенные средства для форматирования кода. Настроить параметры форматирования можно в настройках. Находятся они в разделах «Расширения -> HTML» и «Расширения -> CSS».
Комбинация клавиш для выполнения форматирования в VS Code: Shift+Alt+F .
Функциональность VS Code при работе с HTML и CSS можно улучшить с помощью расширений.
Вот перечень некоторых из них:
- Auto Rename Tag – автоматически изменяет имя закрывающего тега при переименовывании открывающегося;
- Auto Close Tag – автоматически добавляет закрывающий HTML/XML тег при вводе закрывающей скобки открывающегося тега (кроме HTML, это дополнение добавляет эту возможность в JavaScript и многие другие языки);
- HTMLHint – плагин для статического анализа HTML кода;
- HTML CSS Support - поддержка CSS для документов HTML;
- IntelliSense for CSS class names in HTML - плагин для предложения вариантов завершения имени CSS класса в HTML на основе определений, найденных им в вашем рабочем пространстве;
- Autoprefixer - для автоматического добавления CSS свойств с префиксами;
- CSS Peek - позволяет посмотреть свойства, прикреплённые к классу или идентификатору без переключения на CSS файл, в котором они описаны;
- Prettier - Code formatter - для форматирования кода (HTML, CSS, JavaScript и др.);
Настройка VS Code для разработки на JavaScript
Разработку веб-проекта в Windows 10 можно ввести не только с использованием программ, предназначенных только для этой операционной системы, но и посредством WSL (Linux). Если вам нравится Linux и вы хотите его использовать, то Windows 10 позволяет вам это сделать из коробки (то есть непосредственно из дистрибутива). В следующем разделе приведена инструкция по установке WSL в Windows 10 и настройке Visual Studio Code для её использования в качестве среды разработки.
Кроме этого, ОС Linux в большинстве случаев - это система, которая затем у вас будет установлена на продакшене. А это значит, что вы получите окружение как на сервере или более близкое к этому.
Если вы не хотите использовать WSL в качестве среды разработки или работаете в другой операционной системе, то в этом случае можете сразу же перейти к разделу «Установка и настройка ES Lint».
Как в Windows 10 установить WSL и использовать её в VS Code
Коротко о подсистеме Windows для Linux (WSL). В Windows 10 появилась возможность осуществлять веб-разработку прямо в среде на основе Linux. Для этого вам необходимо просто включить компонент Windows 10 «Подсистема Windows для Linux (WSL)» и установить из Microsoft Store «любимый» дистрибутив Linux (например, Ubuntu 18.04). Подсистема WSL появилась в Windows 10, начиная с обновления «Anniversary Update» (1607), а версия 2004 этой ОС уже включает WSL 2.
Более подробно процесс установки WSL описан в этой статье, а именно в разделах «Включение подсистемы Windows для Linux» и «Установка приложения «Ubuntu». Если вы ещё не читали эту статью, то можете это сделать, перейдя по представленной выше ссылке.
Установка расширения «Remote – WSL» в VS Code. Для использования WSL в качестве среды для полной разработки прямо из VS Code необходимо установить расширение «Remote – WSL».
Это позволит вам ввести веб-разработку прямо в среде на основе Linux, использовать специфичные для неё наборы инструментов и утилит, а также запускать и отлаживать свои приложения в Linux, не выходя при этом из Windows.
Это расширение позволит выполнять команды непосредственно в WSL, а также редактировать файлы, расположенные в WSL или в смонтированной файловой системе Windows (локальные диски находятся в /mnt ) не беспокоясь о проблемах с совместимостью.
После установки расширения и перезагрузки редактора VS Code у вас появится индикатор WSL в нижнем левом углу окна программы.
При нажатии на него вам будут показаны команды Remote-WSL. Используя их, вы можете открыть новое окно VS Code, в котором в качестве среды будет использоваться WSL. При этом команда «Remote-WSL: New Window» выполнит это с использованием дистрибутива Linux, который у вас назначен по умолчанию, а команда «Remote-WSL: New Window using Distro. » - используя конкретный дистрибутив Linux из установленных.
Версия дистрибутива Linux, которая сейчас используется в WSL отображается в индикаторе следующим образом:
Установка и настройка ESLint
ESLint – это инструмент, который крайне желательно установить в систему, если вы разрабатываете код на JavaScript. Он будет показывать вам ошибки в коде, а также направлять вас при его написании так, чтобы он был выдержан в едином стиле.
Перед тем как переходить к установке ESLint сначала инсталлируем в ОС «Node.js v12.x».
В Ubuntu это осуществляется следующим образом:
Проверить номер установленной версии «Node.js» можно так:
После установки «Node.js» создадим папку для проекта в файловой системе ОС, а затем откроем её с помощью VS Code.
Создание проекта обычно начинается с его инициализации посредством npm. Этот процесс можно выполнить посредством следующей команды:
В результате выполнения этой команды у вас появится файл «package.json». Этот файл кроме информации о проекте и других вещей, ещё будет содержать набор зависимостей для данного проекта. Имея этот файл, мы сможем при необходимости очень быстро развернуть проект на любом другом компьютере.
Теперь перейдём к установке ESLint и некоторых других npm пакетов в проект:
Ключ --save-dev используется для того чтобы сделать запись об этих пакетах в «package.json». Данный ключ добавит их в секцию devDependencies .
Установка npm пакетов осуществляется в папку «node_modules» этого проекта.
В качестве стиля кода мы будем использовать Airbnb . Это руководство используется многими известными организациями и имеет очень большое количество звёзд на GitHub.
Для того, чтобы можно было использовать Airbnb для расширения базовой конфигурации ESLint мы установили пакеты eslint-config-airbnb-base (без зависимостей от React) и eslint-plugin-import (для поддержки синтаксиса импорта/экспорта ES6+ и предотвращения проблем с неправильным написанием путей к файлам и имен импорта).
После окончания загрузки пакетов приступим к интегрированию ESLint в Visual Studio Code. Осуществляется это посредством установки расширения с одноимённым названием.
Конфигурационный файл необходим для задания настроек, в соответствии с которыми ESLint будет осуществлять проверку JavaScript кода.
Чтобы сделать это самостоятельно нам необходимо в корне проекта создать файл .eslintrc и добавить в него, например, следующие данные:
Эти данные будут определять следующие настройки для ESLint:
- env - это свойство, которое определяет среды, в которых JavaScript должен работать. Для фронтенда средой выступает браузер, поэтому добавим в env свойство "browser": true . Свойство "es6": true предназначено для автоматического включения синтаксиса ES6.
- extends - предназначен для указания конфигурации, с помощью которой мы хотим расширить общую конфигурацию ESLint. В качестве значения extends укажем конфигурацию airbnb-base (без React). При необходимости можно указать не одну, а несколько конфигурации. В этом случае каждая следующая конфигурация будет расширять предыдущую. Т.е. если мы укажем какую-то конфигурацию после airbnb-base , то она будет уже расширять не общую конфигурацию ESLint, а airbnb-base ;
- parserOptions - позволяет задать параметры языку JavaScript, которые мы хотим поддерживать. В настоящее время рекомендуется использовать при разработке проектов синтаксис ECMAScript 6. Указание поддержки этой версии осуществляется посредством задания ключу ecmaVersion значения 6. При необходимости вы можете указать вместо этой другую версию.
Если вам необходимо дополнительно линтить ошибки кода, размещенного в теге <script>, то установите плагин eslint-plugin-html :
Форматирование кода JavaScript будем выполнять с помощью Prettier. Для правильной совместной работы Prettier и ESLint установим следующие npm пакеты:
Для того чтобы ESLint не просматривал определённые папки и не выдавал по ним ошибки следует создать файл .eslintignore и прописать их в нём:
Если у вас включено стандартное форматирование кода в VS Code при сохранении, то чтобы в качестве плагина для форматирования js файлов применялся ESLint, следует в конфигурационный файл «settings.json» добавить следующее:
Теперь, ESlint будет проверять JavaScript код и показывать в нём ошибки и предупреждения. Они будут помечаться с использованием волнистых линий.
Результат проверки JavaScript кода ESLint:
Дополнительная настройка VS Code
Вот ещё некоторый список плагинов для VS Code, которые могут расширить возможности Visual Studio Code для фронтенд разработки и не только:
Большую часть времени разработчик творит код в редакторе. Редактор кода Visual Studio Code сам по себе помогает работать быстрее. Например, он подчёркивает ошибки красным цветом и выдаёт подсказки. Но процесс можно сделать ещё приятнее: достаточно установить нужное расширение.
Плагинов VS Code очень много, и здесь мы расскажем об одних из самых популярных. Все они пригодятся при работе с JavaScript.
ESLint
Это линтер, то есть программа, которая проверяет код на наличие синтаксических ошибок. ESLint анализирует ваш код, выделяет ошибки и предлагает пути их исправления. Конечно, в VS Code уже есть встроенная система IntelliSense, которая выдаёт подсказки. Но ESLint как нельзя лучше подойдёт, например, если вам нужны разные настройки — для JSX, для чистого JS, для среды Node.js. Кроме того, линтер можно встроить в систему проверки кода и перед отправкой материалов в репозиторий ещё раз убедиться, что всё в порядке.
Bracket Pair Colorizer
Помогает не утонуть во вложенных скобках. Расширение подсвечивает парные скобки случайным цветом, чтобы их легко было найти.
Better Align
Все значения выравниваются относительно оператора = и находятся на одном уровне, независимо от длины имён переменных.
EditorConfig
Перезаписывает настройки пользователя и рабочего окружения, заменяя их настройками, найденными в файлах.editorconfig. Расширение помогает обеспечить единообразный стиль написания кода всеми разработчиками, работающими над одним проектом. Так, если добавить файл EditorConfig в проект, то строки кода отформатируются в соответствии с параметрами в файле EditorConfig.
Copy/Paste detector
Помогает найти дублирование кода в проекте.
Prettify JSON
Расширение позволяет форматировать файлы в формате JSON.
JavaScript (ES6) code snippets
Это сниппет, то есть он позволяет ввести только короткое сочетание клавиш, а вместо него появится целая строка кода. Вручную почти ничего не надо делать, что экономит время.
Например, команда enf → вызовет export const log = (parameter) => < console.log (parameter); >;
npm Intellisense
Пригодится при разработке под Node.js. Начните писать название модуля — по первым символам плагин подскажет варианты.
Git History
С его помощью можно посмотреть историю изменений коммита, файла или конкретной строки, увидеть предыдущую копию файла, сравнить ветки и коммиты. Расширение также покажет сведения об авторе изменения — имя, электронную почту.
Project Manager
Обычно при работе с несколькими проектами переключаться между ними неудобно. Плагин решает этот вопрос.
Document this
Плагин пригодится, чтобы не писать заготовки будущих комментариев вручную и автоматизировать процесс.
Обычно участки кода, которые планируется позже отрефакторить, помечают комментарием TODO. Могут быть и другие комментарии, например, FIXME, NOTE. Тodo+ сканирует файл и выводит все комментарии в отдельную панель.
REST Client
VSCode-random
Подойдёт, если вам нужен набор сгенерированных данных. Расширение включает несколько генераторов, которые выдают названия стран, URL-адреса, цвета, имена людей, названия улиц, валидные email, случайные числа и ещё много другого. Всё проще, чем готовить такие данные самостоятельно.
Import Cost
Пакеты в NPM (менеджере пакетов) могут быть очень объёмными. С помощью этого расширения можно увидеть размер пакета после подключения прямо в редакторе и выбрать оптимальный. А ещё вы можете задать порог — и пакеты тяжелее этого порога подсветятся красным.
Handlebars/Handlebars Preview, pug/htmlPugConverter
Помогают в работе с популярными шаблонизаторами handlebars и Pug.
Handlebars подсвечивает синтаксис.
Handlebars Preview быстро компилирует шаблон Handlebars и показывает результат в окне предварительного просмотра.
htmlPugConverter упрощает конвертацию HTML в синтаксис Pug и обратно.
pug — сниппет для шаблонизатора Puge/Jade.
Попробуйте эти расширения при работе с JavaScript сами. Вот увидите — жизнь станет намного проще! А если не понравится, любой плагин можно удалить — как и установить — в один клик.
Думаете, что уже установили на свой VS Code все, что нужно? Вы просто еще не видели эти расширения! Срочно смотрите и устанавливайте!
Visual Studio Code (известный также как VS Code) – легкий, но мощный кроссплатформенный редактор исходного кода. Великолепно подходит для веб-разработки. У него есть множество встроенных плюшек вроде поддержки TypeScript и дебаггера Chrome. А кроме того – триллионы плагинов, с которыми любая сфера программирования станет намного проще.
Представляем топ-лист расширений для JavaScript разработчика!
1. Project Snippets
Великолепный плагин Project Snippets основан на встроенной в VSCode фиче user snippets. Эта удобная возможность позволяет сохранять фрагменты кода, а затем повторно их использовать – в текущем или новом проекте.
Как опытный JavaScript разработчик вы непременно обнаруживали, что набираете один и тот же код не в первый раз. Например, что-то подобное для React-проекта на TypeScript:
Этот кусок можно просто поместить в набор пользовательских сниппетов. Тогда вместо того, чтобы в следующий раз писать его с нуля (или копировать из другого проекта и вставлять в новый), вы просто введете кастомный префикс этого фрагмента.
Пройдите по цепочке File > Preferences > User Snippets > New Global Snippets File . Редактор предложит вам ввести имя нового сниппета – typescriptreact.json . Сразу после ввода откроется новый json-файл, который вы можете использовать для React-приложений на TypeScript.
Сниппет будет выглядеть вот так:
Теперь воспользуемся им в деле. Создайте новый TypeScript файл с расширением .tsx , напечатайте в нем префикс, соответствующий только что созданному фрагменту – rsr . Умный редактор сразу же предложит вам сгенерировать сниппет. Для его вывода вы можете воспользоваться выпадающим меню или нажать клавишу tab .
Проблема в том, что этот фрагмент будет сохранен для всех ваших проектов. Иногда это очень здорово (для каких-нибудь базовых шаблонов). Но зачастую проекты по-разному сконфигурированы и для них требуются разные сниппеты.
Ваш глобальный файл настройки typescriptreact.json может выглядеть вот так:
Это становится проблемой, когда необходимо различать разные варианты. Если вы работаете над проектом с другой файловой структурой, в котором компонент Link лежит по пути components/Link , созданный сниппет уже не подойдет.
Обратите внимание, что в трех шаблонах border test значения свойства обернуто в одинарные кавычки: border: '1px solid red' . В JavaScript это абсолютно правильно, но что если в своем проекте вы используете styled-components? Такой синтаксис вам не подойдет, ведь styled-components работают с обычным CSS.
Вот здесь и восходит звезда расширения project snippets для VSCode. Оно дает вам возможность создавать фрагменты не только на глобальном уровне, но и на уровне проекта/рабочей области, чтобы они не мешали друг другу.
2. Better Comments
Вероятно вы придерживаетесь лучших практик программирования и пишете полезные комментарии к своему коду. Наверняка бывали моменты, когда спустя долгое время и несколько итераций разработки вы не могли найти старые заметки.
Сделайте ваши комментарии заметнее и понятнее с помощью плагина Better Comments, который раскрасит их в соответствии со значением:
Теперь вы легко можете оставить своей команде предупреждение или задать вопрос с помощью символов ! и ? – они точно будут замечены.
3. Bracket Pair Colorizer
Этот плагин вам совершенно необходим! Bracket Pair Colorizer всего лишь раскрашивает разные пары скобок разными цветами – но эта мелочь потрясающе влияет на вашу продуктивность!
Программирование на JavaScript должно быть приятным, а не раздражающим.
4. VSCode Material Theme
Material Theme – легендарная тема оформления, доступная и для вашего VSCode.
Вполне возможно, что это лучшая из всех когда-либо существовавших тем – установите ее прямо сейчас!
5. @typescript-eslint/parser
Если вы активно используете TypeScript в разработке, то пора задуматься о переносе конфигураций TSLint в ESLint + TypeScript, ведь очень скоро поддержка этого инструмента будет прекращена.
Проекты постепенно готовятся к принятию @typescript-eslint/parser и связанных с ним модулей.
С новыми настройками вы по-прежнему можете использовать большинство правил ESLint. Сохраняется совместимость с Prettier.
6. Stylelint
Если вы еще не используете расширение stylelint для VSCode – какие у вас могут быть оправдания? Срочно установите, ведь оно:
- помогает избежать ошибок в CSS;
- контролирует соблюдение соглашений о стиле;
- работает с Prettier;
- понимает ванильный CSS, а также препроцессоры SCSS/Sass/Less;
- поддерживает различные плагины, созданные сообществом.
7. Markdownlint + docsify
Многие разработчики любят делать заметки в markdown-файлах: это простой и понятный формат, его легко и писать, и читать.
Существует множество инструментов, которые делают процесс работы с markdown-разметкой еще приятнее. В их числе markdownlint, который следит за форматированием файлов.
А для генерирования документации используйте плагин docsify, который поддерживает Markdown.
8. TODO Highlight
9. Import Cost
Плагин Import Cost сообщает вам, сколько весит модуль, который вы собираетесь импортировать в проект.
Этот инструмент особенно полезен в первый период использования. Некоторое время (и много написанного кода) спустя, вы уже запоминаете размер основных пакетов. Тем не менее, попробуйте, это может оказаться хорошим опытом.
10. Highlight Matching Tag
Признавайтесь, часто теряетесь в веренице тегов? Highlight Matching Tag будет искать потерянный закрывающий дескриптор за вас.
11. vscode-spotify
Многие программисты предпочитают работать под музыку и часто используют для прослушивания композиций сервис Spotify. Когда нужно переключить песню, приходится отвлекаться от редактора (иногда даже сворачивать его), а потом бывает сложно вновь вернуться в прерванный на секунду рабочий процесс.
Плагин vscode-spotify позволяет использовать Spotify прямо внутри вашего VSCode! Теперь вы можете управлять своим плеером, не покидая редактора.
12. GraphQL for VS Code
GraphQL стремительно набирает популярность, и мы всё активнее используем его в JavaScript-проектах. Пора бы уже подумать об установке GraphQL for VSCode в ваш редактор.
Плагин умеет подсвечивать синтаксис, проверять и автоматически дополнять код.
13. Indent-Rainbow
Плагин Indent-Rainbow структурирует ваш код, выделяя отступы разными цветами. Теперь здесь намного проще ориентироваться:
14. Color Highlight
Очень удобный плагин, который находит внутри кода обозначения цветов в разном формате и соответственно подсвечивает их.
15. Color Picker
Это расширение для VS Code предлагает вам графический интерфейс для выбора нужного цвета.
16. REST Client
Возможно, плагин REST Client не покажется вам супер полезным на первый взгляд по сравнению, например, с привычным Postman. Однако, поиграв с ним немного, JavaScript разработчик уже не сможет жить по-прежнему.
Это замечательный инструмент для тестирования API. Вы можете просто создать новый файл и написать в нем:
Вы даже можете передать GET-параметры или тело POST-запроса, добавив всего пару строк кода:
Этот фрагмент соответствует POST-запросу с параметрами .
Это лишь крошечная часть возможностей REST Client. Вы можете узнать о нем больше, если интересно.
17. Settings Sync
Терпеть не можете вручную прописывать настройки ваших плагинов? На помощь вам спешит – вот неожиданность! – еще один плагин – Settings Sync.
Все, что нужно, это аккаунт на gist/GitHub. Каждый раз, когда вы хотите сохранить свои настройки – включая горячие клавиши, сниппеты, расширения – просто нажмите SHIFT+ALT+U , и они будут загружены в вашу учетную запись. При следующем входе в систему или переносе на другой компьютер, вы можете вновь загрузить их комбинацией SHIFT+ALT+D .
18.Todo Tree
Расширение Todo Tree для VS Code соберет по вашей команде все задачи, разбросанные по приложению, в одно дерево в левой части рабочей области редактора.
19. Toggle Quotes
Toggle Quotes – забавная утилита, позволяющая переключаться между разными типами кавычек. Это особенно удобно при использовании строковых интерполяций.
20. Better Align
Вы можете выровнять ваш код без предварительного выделения с помощью плагина Better Align. Просто поместите курсор в нужное место, откройте палитру команд ( CTRL+SHIFT+P ) и вызовите команду Align .
21. Auto Close Tag
Эта небольшая полезная утилита закрывает за вами теги – ей не трудно.
22. Sort Lines
Специально для перфекционистов, которые не смогут уснуть, если массивы строк в их программе не отсортированы по алфавиту! Плагин Sort lines для VS Code сделает вашу жизнь проще.
23. VS Code Google Translate
Совершенно незаменимая вещь для программиста! Если вы не знаете, как правильно назвать переменную или работаете в проекте с поддержкой нескольких языков, обязательно установите VS Code Google Translate. Теперь вы можете переводить, не уходя из редактора.
24. Prettier
Все знают Prettier – это замечательный парикмахер для вашего JavaScript/TypeScript/и т. д. кода.
25. VS Code Material Icon Theme
Очень крутая тема, которая устанавливает разные иконки для разных типов файлов. Особенно хорошо сочетается с темной темой редактора.
26. IntelliSense for CSS Class Names in HTML
Плагин IntelliSense for CSS class names in HTML обеспечит умное автозавершение для CSS-классов в HTML-коде. Нам этого действительно не хватало!
27. Path Intellisense
Одно из самых полезных расширений VS Code. Path Intellisense умеет автоматически завершать имена файлов, которые вы набираете.
Читайте также: