17 полезных плагинов JavaScript в VS Code
- 6 июня 2023
Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.
Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.
ESLint
Проверяет код на синтаксические ошибки и предлагает исправления.
Конечно, в VS Code уже есть встроенная система IntelliSense, которая показывает подсказки. Но ESLint больше подходит, например, если вам нужны разные настройки — для JSX, для чистого JS, для среды Node.js. Ещё линтер можно встроить в систему проверки кода и перед отправкой файлов в репозиторий ещё раз убедиться, что всё в порядке.
Better Align
Выравнивает переменные, свойства объекта и другие элементы кода по операторам :, =, +=,-=,*=,/= или по стрелке =>. При этом длина переменных не важна.
EditorConfig
Расширение помогает разработчикам, которые работают над одним проектом, придерживаться единого стиля кода. EditorConfig перезаписывает настройки пользователя и рабочего окружения, заменяя их настройками, найденными в файлах .editorconfig.
Prettify JSON
Расширение форматирует файлы в формате JSON.
JavaScript (ES6) code snippets
Этот сниппет ускоряет разработку: вы вводите короткое сочетание клавиш, а вместо них появляется целая строка кода. Например, команда enf вызовет export const log = (parameter) => { console.log (parameter); }.
npm Intellisense
Пригодится при разработке под Node.js. Начните писать название модуля — по первым символам плагин подскажет варианты.
Git History
С его помощью можно посмотреть историю изменений коммита, файла или строки, увидеть предыдущую копию файла, сравнить ветки и коммиты. Ещё расширение покажет имя и электронную почту автора изменения.
Project Manager
Когда вы работаете сразу над несколькими проектами, приходится переключаться между ними — это не всегда удобно. Project Manager решает эту проблему. С ним вы можете создавать, открывать, закрывать и быстро переключаться между различными проектами прямо из интерфейса Visual Studio Code.
Document this
Плагин пригодится, чтобы не писать заготовки будущих комментариев вручную и автоматизировать процесс.
Todo+
Обычно участки кода, которые планируется позже отрефакторить, помечают комментарием TODO. Могут быть и другие комментарии, например, FIXME, NOTE. Тodo+ сканирует файл и выводит все комментарии на отдельную панель.
REST Client
Позволяет отправлять HTTP-запросы и сразу же просматривать на них ответы. Например, для отправки GET-запроса достаточно ключевого слова GET и URL — рядом появится кнопка. При нажатии откроется отдельная вкладка с результатом выполнения запроса.
VSCode-random
Подойдёт, если вам нужен набор сгенерированных данных. Расширение включает несколько генераторов, которые выдают названия стран, URL-адреса, цвета, имена людей, названия улиц, валидные email, случайные числа и ещё много другого. Всё проще, чем готовить такие данные самостоятельно.
Import Cost
Пакеты в NPM (менеджере пакетов) могут быть очень объёмными. С помощью этого расширения можно увидеть размер пакета после подключения прямо в редакторе и выбрать оптимальный. А ещё вы можете задать порог — и пакеты тяжелее этого порога подсветятся красным.
Code Runner
Благодаря плагину вы сможете запустить код или сниппет на многих языках. Например, C, C++, Java, JavaScript, PHP, Python.
Snippets
Сниппеты — сокращения для часто используемых фрагментов кода. Их нужно сначала заучить, но после этого работа сильно ускоряется. Например, вам больше не нужно каждый раз писать const packageName = require('packageName'); — достаточно написать req и нажать клавишу tab. И таких примеров много.
Tabnine AI
Нейросеть поможет ускорить работу благодаря автодополнению кода. Аналог GitHub Copilot и других подобных сервисов.
Handlebars/Handlebars Preview, pug/htmlPugConverter
Помогают в работе с популярными шаблонизаторами handlebars и Pug.
Handlebars подсвечивает синтаксис.
Handlebars Preview быстро компилирует шаблон Handlebars и показывает результат в окне предварительного просмотра.
htmlPugConverter упрощает конвертацию HTML в синтаксис Pug и обратно.
pug — сниппет для шаблонизатора Puge/Jade.
Попробуйте эти расширения при работе с JavaScript сами. Вот увидите — жизнь станет намного проще. А если не понравится, любой плагин можно удалить — как и установить — в один клик.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Figma Dev Mode становится платным. Всё пропало?
Если вы всё пропустили, то на днях в Фигме появилась такая плашка:
Коротко: Dev Mode, скоро выходит из бета-версии и станет платным. Dev Mode — это тот новый режим, который умеет удобно сразу показывать весь нужный CSS и свойства в одном месте. Мы уже рассказывали о нём в «Доктайпе».
Но прошло полгода и лавочка закрылась. Отвечаем на самые распространенные вопросы, которые могли у вас появиться (потому что они появились и у нас).
- 30 января 2024
Dev Mode в Figma. Быстрый обзор бета-версии
Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.
Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.
Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.
- 10 августа 2023
Горячие клавиши Figma для быстрой работы
Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.
Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)
Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.
Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)
Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.
А если не пользуетесь — попробуйте.
- 7 августа 2023
Старт в Figma для верстальщика
Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.
Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
- 2 августа 2023
Инструменты для работы со шрифтами
Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.
Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.
- 29 июня 2023
10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
- 13 июня 2023
10 лучших тем для VS Code
VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.
- 11 июня 2023
10 полезных плагинов VS Code для вёрстки
Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.
Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.
- 9 июня 2023
Подборка микроанимаций для фронтенда с CodePen в 2023
⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.
Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.
- 12 апреля 2023
Как собрать проект на Webpack
Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.
Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.
- 7 апреля 2023