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

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

Управление проектами

Project Manager

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

Для корректной работы плагина в каждом проекте должен быть инициализирован репозиторий Git, если вы хотите увидеть их в Project Manager.

Синтаксис и языковая поддержка

EditorConfig for VS Code

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

DotENV

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

SVG

Добавляет поддержку языка и синтаксиса для работы с векторными изображениями в формате SVG.

YAML

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

CSS Modules Syntax Highlighter

Внедряет поддержку синтаксиса CSS Modules.

Git

GitLess и Git Graph

GitLess — форк некогда легендарного GitLens, который внедряет в VS Code модуль, где содержатся все необходимые инструменты для работы с Git, но при этом без назойливой рекламы платного функционала от GitKraken.

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

В свою очередь, расширение Git Graph предоставляет виджет с графом Git, который наглядно визуализирует структуру веток проекта и их взаимосвязи, что делает его отличным дополнением к плагину GitLess.

gitignore

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

Автоматическое дополнение

IntelliCode и IntelliCode API Usage Examples

Внедряют в VS Code автодополнение кода на основе AI, а также предоставляют всплывающие подсказки со ссылками на примеры схожего по смыслу кода из GitHub, по мере того как вы пишете свой код.

Path Intellisense

Активирует Intellisense при вводе путей до файлов в рамках вашего проекта и файловой системы в целом.

IntelliSense for CSS class names in HTML

Улучшает автодополнение для классов CSS.

CSS Peek

Добавляет в VS Code всплывающие подсказки при наведении курсора на класс CSS, а также переходы к объявлению классов при нажатии Ctrl + Left Click.

CSS Modules

Активирует автодополнение для кода, связанного с модулями CSS. Помимо этого, плагин также добавляет возможность удобно переходить к объявлениям селекторов CSS по нажатию Ctrl + Left Click.

SCSS IntelliSense

Добавляет в VS Code IntelliSense для переменных, миксинов и функций Sass для всех файлов в вашем рабочем окружении.

Линтинг

ESLint

Добавляет поддержку линтера ESLint, который широко используется среди разработчиков и де-факто является стандартом среди линтеров для JS / TS.

Stylelint

Внедряет в VS Code линтер Stylelint, предназначенный для обработки правил CSS. Плагин работает схожим с ESLint образом, за исключением того, что Stylelint воздействует исключительно на стили.

Prettier

Встраивает в редактор линтер Prettier. После установки плагин будет автоматически приводить ваш код в единообразный вид при каждом сохранении файла. Prettier хорошо настраивается и работает в связке с вышеупомянутыми линтерами ESLint и Stylelint.

Горячие клавиши

htmltagwrap

Добавляет комбинацию клавиш Alt + W, при срабатывании которой выделенный вами фрагмент верстки оборачивается в HTML-тег.

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

Toggle Quotes

Позволяет моментально переключаться между различными видами скобок ('' -> «» -> «) в строковых значениях при нажатии Ctrl + '.

Turbo Console Log

При нажатии Ctrl + Alt + L мгновенно генерирует на следующей строке выделенный вами фрагмент кода, обернутый в console.log().

Сниппеты

ES7+ React/Redux/React-Native snippets

Добавляет сниппеты на все случаи жизни, часть из которых вам определенно пригодится в разработке на JS / TS, React, Redux и React Native.

Snippet

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

Оформление

Darcula Solid и Fluent Icons

Darcula Solid — темная тема оформления, выполненная в серых и оранжевых тонах. Дизайн темы воссоздан на основе одноименной темы для WebStorm, но при этом вносит ряд собственных улучшений и адаптаций, привносящих более приятный опыт разработки.

https://www.youtube.com/watch?v=fn-CtYfPU2w\u0026pp=YAHIAQHwAQG6AwIYAqIGFQHV2fo7cBa2OjJpYi2jh9kWj09d5Q%3D%3D

Что касается набора иконок, то я могу порекомендовать Fluent Icons, которые органично вписываются в интерфейс VS Code.

Визуализация

indent-rainbow

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

Error Lens

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

Color Highlight

Внедряет в VS Code подсветку цветовых кодов. Например, #ff0000 будет выделен красным цветом, а rgba(81, 21, 177) фиолетовым. Это значительно упрощает восприятие кода с цветовыми кодами, что особенно полезно при работе со стилями.

Better Comments

Подсвечивает комментарии (например TODO, FIXME) броским цветом. Плагин можно настроить под себя, добавив туда собственные типы комментариев и цветовую схему.

Node, NPM

Search node_modules

Внедряет в VS Code функционал поиска файлов по директории node_modules в текущем проекте.

npm Intellisense

Добавляет автозаполнение для импортов JS / TS модулей.

Дизайн

Figma for VS Code

Позволяет открывать дизайн-макеты Figma прямо в VS Code и извлекать из них необходимую информацию для разработки UI, не покидая VS Code.

Проверка орфографии

Code Spell Checker

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

Скриншоты

CodeSnap

Плагин, который позволит вам делать потрясающие скриншоты выделенного вами кода, с подсветкой синтаксиса и вашей темой оформления IDE.

Автоматическая обработка кода

empty-indent

Автоматически удаляет лишние отступы в пустых строках при сохранении текущего файла.

Бонус: дополнительные настройки для IDE

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

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

Вы можете вставить эти настройки в свой settings.json как есть, либо извлечь в свой конфиг часть из них, в зависимости от ваших потребностей.

{
«better-comments.tags»: [
{
«backgroundColor»: «transparent»,
«bold»: false,
«color»: «#FF2D00»,
«italic»: false,
«strikethrough»: false,
«tag»: «!»,
«underline»: false
},
{
«backgroundColor»: «transparent»,
«bold»: false,
«color»: «#3498DB»,
«italic»: false,
«strikethrough»: false,
«tag»: «?»,
«underline»: false
},
{
«backgroundColor»: «transparent»,
«bold»: false,
«color»: «#474747»,
«italic»: false,
«strikethrough»: true,
«tag»: «//»,
«underline»: false
},
{
«backgroundColor»: «transparent»,
«bold»: false,
«color»: «#FF8C00»,
«italic»: false,
«strikethrough»: false,
«tag»: «todo»,
«underline»: false
},
{
«backgroundColor»: «transparent»,
«bold»: false,
«color»: «#98C379»,
«italic»: false,
«strikethrough»: false,
«tag»: «*»,
«underline»: false
}
],
«codesnap.backgroundColor»: «»,
«codesnap.boxShadow»: «»,
«codesnap.containerPadding»: «0»,
«codesnap.showWindowControls»: false,
«codesnap.shutterAction»: «save»,
«codesnap.transparentBackground»: true,
«cSpell.userWords»: [
«codesnap»,
«datasets»,
«devtool»,
«flexbox»,
«flexbugs»,
«minmax»,
«mobx»,
«noopener»,
«noreferrer»,
«outro»,
«rgba»,
«sourcemap»,
«stylelint»,
«teamcity»,
«testid»,
«uglifyjs»,
«uikit»
],
«editor.codeActionsOnSave»: {
«source.organizeImports»: true
},
«editor.renameOnType»: true,
«emmet.includeLanguages»: {
«javascript»: «javascriptreact»,
«typescript»: «javascriptreact»,
«vue-html»: «html»
},
«errorLens.fontWeight»: «500»,
«eslint.probe»: [
«javascript»,
«javascriptreact»,
«typescript»,
«typescriptreact»,
«html»
],
«files.trimTrailingWhitespace»: true,
«gitlens.currentLine.enabled»: true,
«gitlens.hovers.currentLine.over»: «line»,
«gitlens.views.commits.files.layout»: «list»,
«gitlens.views.stashes.files.layout»: «list»,
«html-css-class-completion.enableEmmetSupport»: true,
«htmltagwrap.autoDeselectClosingTag»: true,
«htmltagwrap.tag»: «p»,
«indentRainbow.colors»: [
«#833ab414»,
«#fd1d1d14»,
«#fcb04514»
],
«indentRainbow.ignoreLinePatterns»: [
«/[ ]/g»
],
«javascript.suggest.autoImports»: true,
«javascript.updateImportsOnFileMove.enabled»: «always»,
«prettier.tabWidth»: 2,
«projectManager.git.ignoredFolders»: [
«.haxelib»,
«archived»,
«node_modules»,
«out»,
«test»,
«typings»
],
«stylelint.snippet»: [
«css»,
«less»,
«postcss»,
«scss»
],
«stylelint.validate»: [
«css»,
«less»,
«postcss»,
«scss»
],
«svg.preview.autoShow»: false,
«svg.preview.mode»: «svg»,
«turboConsoleLog.addSemicolonInTheEnd»: true,
«turboConsoleLog.delimiterInsideMessage»: «->»,
«turboConsoleLog.includeFileNameAndLineNum»: false,
«turboConsoleLog.insertEnclosingFunction»: false,
«turboConsoleLog.logMessagePrefix»: «>>>»,
«typescript.suggest.autoImports»: true,
«typescript.updateImportsOnFileMove.enabled»: «always»
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее о 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 во время сборки.

https://www.youtube.com/watch?v=qGTrz6cuO9Q\u0026pp=YAHIAQHwAQG6AwIYAqIGFQHV2fo72hz-8Jlx1VyRYm225TFujg%3D%3D

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды 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 и её обновлениями.

13 расширений VSCode, которые пригодятся любому веб-разработчику

Подготовили адаптированный перевод материала JavaScript (Medium) о полезных расширениях VSCode.

Рассмотрим 13 расширений Visual Studio Code (VSCode) ― кроссплатформенного редактора скриптов от Microsoft, ― которые помогают отлаживать код, делать его более читабельным и красивым, а также добавляют полезные функции в рабочее пространство разработчика.

Одно из самых важных расширений, которое автоматически добавляет закрывающий тег. Не требует никаких команд для активации. По умолчанию Auto Close Tag доступно в VSCode.

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

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

Чтобы использовать это расширение, сначала нужно нажать F1. Затем в строке написать «Beautify» и выбрать его из списка — код автоматически исправится.

Это расширение придаёт каждой паре групп свой цвет — можно быстро и легко найти нужную пару.

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

Когда расширение определяет проблему, она отмечается красным подчёркиванием. И проблему можно легко исправить самостоятельно.

Одно из классных расширений для JavaScript. Когда пишете что-то в своём коде и забываете, как вызывается функция, расширение автоматически предложит её записать — нужно будет просто нажать Enter.

 Профессия

Узнать больше

• Научим программировать на JavaScript и PHP — сможете создавать сайты и веб-приложения
• Масштабная программа и много практики — выполните 9 проектов для портфолио
• Лучших выпускников ждёт стажировка или трудоустройство в Affinage

Kite делает почти то же самое, что и предыдущее расширение JavaScript (ES6) code snippets. Нейронные сети, которые используются в этом расширении, помогают быстрее писать код.

via GIPHY

Слева — ввод символов с использованием расширения Kite, справа — без него

При написании или коррекции HTML-, CSS- или JavaScript-файла нажатие команды «Go Live» в нижней части окна VSCode позволит автоматически добавить изменения на веб-страницу без перезагрузки и других действий.

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

Если нужно прописать путь в теге «href» или «src», расширение предоставит путь к уже существующему файлу.

Visual Studio Code Extensions: 15 Best for 2023

• Visual Studio Code lets you access a plethora of first-party or third-party extensions to enhance its feature list.
• You can use them to your advantage and make coding fun and easy.
• Below, we have listed some of the best extensions you can use with VS Code in 2023.

Visual Studio Code is a mini version of the Visual Studio IDE that is lightweight, can use a plethora of extensions, supports all languages, and much more. When it comes to extensions, you should be aware of the best Visual Studio Code extensions to improve your productivity.

For Visual Studio IDE users, we already have a guide that lists some of the best extensions for Visual Studio. In this guide, we will give you a bunch of Visual Studio Code extensions that will help improve your efficiency and productivity. Let us get right into it.

LambdaTest is a cross-browser testing extension that can be pretty useful for developers. You can test public or locally hosted websites and web apps.

You can write your codes in Visual Studio Code and use this extension to perform live testing of your app on an online browser. It supports almost all web browsers and lets you test your app on a real device and OS.

Some of the best features of LambdaTest Visual Studio Code extension are:

• Offers automated browser testing.
• Live testing on Android and iOS simulators.

TOP 39 VS Code Extensions for Frontend Developers in 2023

P42 JavaScript Assistant is a visual studio code extension with more than 80 quick automatic refactors and fixes for JavaScript, TypeScript, and React.

Visit Website

This Visual Studio code extension allows you to insert React and Next.js code snippets into your files with ease.

Visit Website

Code Attendant is a Visual Studio Code extension that allows the translation of natural language to javascript code with the help of artificial intelligence.

Visit Website

Preview.js is a Visual Studio Code extension to preview your UI components directly in your code editor, compatible with React, SolidJS, and Vue.

Visit Website

An extension to integrate Excalidraw, the collaborative virtual whiteboard tool, to VS Code.

Visit Website

Project Manager is a free Visual Studio Code extension to access all your projects and switch between them easily.

Visit Website

Dendron is an open-source Visual Studio Code extension for taking notes and organizing information, created specifically for developers.

Visit Website

VSLook is a Visual Studio Code extension to customize the look and feel of the VSCode editor.

Visit Website

Auto rename tag is a VS Code extension to auto-rename paired HTML/XML tags.

Visit Website

Mintlify Doc Writer is a Visual Studio Code extension for creating automatic AI-generated documentation for more than ten programming languages.

Visit Website

A Visual Studio Code extension to improve the development experience with Tailwind CSS.

Visit Website

HTML End Tag Labels is a VS Code extension to display the different labels at the end of an HTML tag.

Visit Website

Axe Accessibility Linter is a VS Code extension to detect accessibility issues in your HTML, Angular, React, Markdown, and Vue files.

Visit Website

A Visual Studio Code extension for improving the visibility of errors and warnings in your code.

Visit Website

SVG Preview is a helpful Visual Studio extension for previewing your SVG files.

Visit Website

A helpful Visual Studio Code extension to preview images in your code by hovering over the image path.

Visit Website

A Visual Studio Code extension to view a Git graph of your repository and run Git actions from the graph.

Visit Website

A tool to add a playground for JavaScript and TypeScript to VS Code for rapid prototyping.

Visit Website

An extension to add code snippets for JavaScript by just writing easy-to-remember shortcuts.

Visit Website

The Better Comments extension will help you add alerts, information, TODOs, and other annotations to your code to make it more readable.

Visit Website

An add-on to integrate the ESLint library into VS Code to help you find and fix JavaScript problems in your code.

Visit Website

Path Intellisense is a plugin to add the filename auto-completion feature to VS Code.

Visit Website

GitLens enhances Git in Visual Studio Code and reveals hidden repository data visually.

Visit Website

With a single click, start a local development server with a live reload.

Visit Website

A plugin to add the feature to VS Code to add the HTML/XML closing tag automatically.

Visit Website

An extension to color indent levels in your code to make it easier to read.

Visit Website

A helpful extension to add icons to your Visual Studio Code files and folders.

Visit Website

Detect the most common grammar mistakes in VS Code with the Code Spell Checker plugin.

Visit Website

Import Cost is an add-on to display the size of the imported packages directly into your code editor.

Visit Website

A plugin to add Grammarly, the well-known spell checker, to your Visual Studio Code.

Visit Website

A VSCode extension to help you focus while coding by altering the speed of the music according to your typing pace.

Visit Website

Change the color of your Visual Studio Code workspace to identify your editor quickly.

Visit Website

Efficiently move, duplicate, create, rename, and delete files and directories in VS Code.

Visit Website

Visual Studio Code extension to improve code readability by highlighting code blocks in the editor.

Visit Website

An extension for VSCode to bring the power of AI to your coding process with ChatGPT and improve your workflow.

Visit Website

Enhance function calls with inline parameter annotations using this VS Code extension

Visit Website

Integrate ChatGPT into VS Code with this extension to create and edit code, provide explanations, generate tests, and more.

Visit Website

Enhance your code editing experience with a seamless VS Code extension that effortlessly sorts lines.

Visit Website

A Visual Studio Code extension to expose hidden characters that can be harmful during development.

Visit Website

If you want to further customize your programming environment, we've also compiled a list of the best free themes for Visual Studio Code. With the perfect theme and the right extensions, you'll be well on your way to creating a highly productive and visually appealing programming environment.

20 Best VSCode Extensions to Improve Your Productivity

Extensions to your IDE are invaluable to speed up your work without reducing the quality of your output. Considering Visual Studio Code is the most popular IDE, here are 20 VSCode extensions that will make you a more productive developer. These extensions mostly apply to web developers, but there are some general-purpose extensions that will benefit everyone else too.

Here are the VSCode extensions we'll cover:

Settings Sync

Settings Sync saves you a lot of time installing extensions across devices

Before you start installing extensions left and right, it's good to know of the existence of Settings Sync. It allows you to sync to GitHub almost everything you customize on VSCode, from settings to keyboard shortcuts to other VSCode extensions.

This way, you'll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again.

Live Server

Immediately see code changes reflected in the browser

This is the favorite VSCode extension of many software developers. Live Server launches a local development server with a live reload feature both for static and dynamic pages.

Every time you save your code, you'll instantly see the changes reflected in the browser. You'll be much faster at spotting errors and it's much easier to do some quick experiments with your code.

Remote — SSH

Use any remote machine with an SSH server

The Remote — SSH extension lets you use any remote machine with an SSH server as your development environment. This makes it much easier to develop and/or troubleshoot in a wide variety of scenarios.

You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine.

Prettier

Spend less time formatting your code

Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style.

You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.

GitHub Copilot

AI is here to do the work for you

Some would call GitHub Copilot a revolution in computer programming, others would call it a useful tool. Whatever you think of it, the autocomplete AI is worth integrating into your workflow.

Trained on GPT-3, GitHub Copilot gives code suggestions, auto-completes code, and can even help write code when you provide a natural language comment.

Auto Rename Tag

Rename tags automatically

• While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change.
• The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.
• Edit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care.

GitLens

Supercharge your Git capabilities

GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).