Полезные расширения для VSCode

От Матвея 🥸

Сайт

https://ra1nbow.xyz
[!info] Github

https://github.com/ra1nbow1
Список расширений, которыми я лично пользуюсь и всем рекомендую. Зачем делать самому и долго, когда можно сделать с помощью чего-то и быстро?

Веб-разработка

Auto Rename Tag

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

Info

Color Info

Предоставляет информацию о выбранном цвете и показывает попап для генерации нового цвета.

Info

Colorize

Окрашивает текст, в котором используется цвет. Например, background-color: yellow;

Info

CSS Peek

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

CSS Peek - Visual Studio Marketplace

An amazing tool I've used before and they didn't ask me to say that :) - Extension Author Manage pull requests and conduct code reviews in your IDE with full source-tree context.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

CSS Snippets

Расширяет встроенный в Emmet список фрагментов кода (сниппетов) для CSS.

CSS Snippets - Visual Studio Marketplace

This extension provide you shorthand CSS snippets for VS Code.
https://marketplace.visualstudio.com/items?itemName=joy-yu.css-snippets

ES7+ React/Redux/React-Native snippets

Добавляет сниппеты для разработки на React как для JavaScript, так и для TypeScript.

Info

ESLint

Линтер кода с гибкими настройками.

Info

HTML CSS Support

Добавляет автодополнения для названий селекторов.

Info

Import Cost

Показывает, сколько весит импортируемый модуль.

Info

JavaScript (ES6) code snippets

Расширяет встроенный в VSCode список сниппетов для JavaScript

Info

jQuery Code Snippets

Добавляет спиппеты для jQuery.

jQuery Code Snippets - Visual Studio Marketplace

Live Server

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

Info

Smart CSS Autocomplete

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

Info

Turbo Console Log

Позволяет быстро выводить в консоль фрагменты кода.

Turbo Console Log - Visual Studio Marketplace

This extension make debugging much easier by automating the operation of writing meaningful log message.
https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

Document This

Автоматически создает комментарии для описания функций.

Info

Python-разработка

Pylance

Добавляет функции из PyCharm: быстрые импорты, хинты, автодополнение параметров и другое.

Info

Все остальное

Better Comments

Добавляет подсветку различных типов комментариев, как в JetBrains IDE.

Info

Clock in status bar

Если у вас MacOS и VSCode запущен в полноэкранном режиме, то часы скрыты. Это расширение добавляет часы в строку состояния.

Info

Code Snapshot

Красивые скриншоты кода.

Code Snapshot - Visual Studio Marketplace

Code Snapshot is a VS Code extension that tries to make your life easier.
https://marketplace.visualstudio.com/items?itemName=robertz.code-snapshot

CodeSnap

Красивые скриншоты кода.

Info

Polacode

Красивые скриншоты кода.

Info

Discord Presence

Добавляет интеграцию VSCode с Discord.

Info

Позволяет создавать майндмэпы прямо в VSCode.

Info

Git Extention Pack

Интеграция с git

Info

Git Graph

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

Info

Github Copilot

Комментарии излишни. ПОКУПАЙТЕ ДОСТУП. ВСЕМ СОВЕТУЮ.

Info

GitHub Pull Requests and Issues

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

Info

GitLens — Git supercharged

Объединяет в себе все вышеперечисленные git-расширения, но нужна платная подписка.

Info

Heroku

Проверяет деплоймент-статус вашего приложения.

Info

heroku-cli

Добавляет CLI от Heroku для быстрого взаимодействия с платформой.

Info

Inline Parameters for VSCode

Добавляет прдсказки ко всему, что только можно. Очень классная вещь.

Info

MySQL

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

Info

Добавляет кнопку в контекстное меню, которая открывает текущий файл на гите.

Open in GitHub, Bitbucket, Gitlab, VisualStudio.com ! - Visual Studio Marketplace

Path Intellisense

Добавляет автодополнение для путей к файлам.

Path Intellisense - Visual Studio Marketplace

Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Prettier

Самый популярный линтер кода на любом языке.

Info

Project Manager

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

Info

Remote - SSH

Добавляет возможность подключения по SSH без необходимости использования сторонних клиентов.

Info

Tabnine

Бесплатный ИИ для написания кода за вас. Бесплатный аналог Github Copilot.

Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more - Visual Studio Marketplace

What's Tabnine Tabnine is an AI code assistant that makes you a better developer.
https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

WakaTime

Отслеживает вашу активность в VSCode. Сколько времени, в каком проекте, на какой ОС, на каком языке вы писали код.

Info

Внешний вид

Bearded Icons

Bearded Icons - Visual Studio Marketplace

CodeSandbox Black

Info

Feather Product Icons

Info

Fluent Icons

Fluent Icons - Visual Studio Marketplace

A product icon theme for Visual Studio Code Product icons themes allow theme authors to customize the icons used in VS Code's built-in views: all icons except file icons (covered by file icon themes) and icons contributed by extensions.
https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons

GitHub Theme

Info

Material Icon Theme

Info

Monokai Pro

Info

Octicons Product Icons

Info

One Dark Pro

Info

VSCode Great Icons

Info

vscode-icons

Info