Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг
25.5K subscribers
1.32K photos
101 videos
28 files
2.37K links
FullStack-материалы от Senior-разработчика для WEB-специалистов

Сотрудничество: @CodingLead

РКН: shorturl.at/qinly
Download Telegram
🌐 Relative Path – расширение, которое находит путь к файлу

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

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

Просто нажмите Ctrl+Shift+H (MAC: Cmd+Shift+H) и выберите файл. Если в вашей рабочей области более 1000 файлов, вам будет предложено сначала отфильтровать этот список. Кроме того, вы можете открыть панель команд с помощью кнопки F1 и выполнить поиск относительного пути.

Сайтодел | #расширение #vscode
🌐 Code Spell Checker – расширение для редактирования кода

Это расширение предназначено для проверки грамотности кода. Оно проверяет распространенные ошибки и уменьшает количество ложных срабатываний. Проверка орфографии позволяет легко обнаружить опечатки в вашем коде, который вы пишете в VSCode. Code Spell Checker использует волнистые линии для обозначения опечаток.

Расширение отлично работает с написанием составных слов в стиле CamelCase (верблюжий регистр). Code Spell Checker понимает ключевые слова на нескольких языках программирования, включая TypeScript, JavaScript и Python.

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

Сайтодел | #расширение #vscode
🌐 Git History – расширение VSCode для отображения истории коммитов

Это популярное расширение для Visual Studio Code, которое показывает подробную информацию о коммитах в Git, просматривая предыдущие копии файлов, изменения активной строки в редакторе и т.д.

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

Удобство состоит в том, что расширение работает из Visual Studio Code. На панели задач выберите Git: View History (git log), а затем нажмите Git History Window, чтобы начать работу.

Сайтодел | #расширение #vscode
🌐 Rainbow Brackets – расширение VSCode, которое подсвечивает скобки

Иногда мы забываем поставить скобки в нужном месте, и весь код перестает работать! Расширение Rainbow Brackets помогает бороться с этой проблемой. С набором разноцветных подсветок сразу станет понятнее, какие скобки относятся к какой части кода.

Приложение подсвечивает парные скобки одинаковым ярким цветом, а одиночные – красным, чтобы вы точно не упустили их. Rainbow Brackets выделяет и квадратные, и фигурные скобки.

Расширение особенно популярно у программистов, которые работают с языком JavaScript. Найти Rainbow Brackets можно в разделе «Расширения» в VSCode.

Сайтодел | #расширение #vscode
🌐 MetaGo – расширение VSCode для быстрого перемещения курсора и выделения текста

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

В MetaGo есть свои собственные горячие клавиши, например Alt+a для изменения выбранного участка, Ctrl+o, Ctrl+l для работы с текстом, ctrl+alt+/ чтобы добавить новый курсор. Теперь вы можете выбрать более одного участка текста за один раз!

Навигация по закладкам происходит тоже при помощи горячих клавиш: Alt+' для переключения закладки в месте расположения курсора, Alt+ [ перейти к предыдущей закладке, Alt+] перейти к следующей закладке, Alt+\ для отображения списка закладок с меню управления.

Сайтодел | #расширение #vscode
🌐 Change Case – плагин для VSCode для работы с текстом

Этот плагин может преобразовывать текст в разные регистры. Помимо нижнего и верхнего регистра в нем предусмотрены и другие варианты: Camel Case или Pascal Case, разделение строк при помощи точек и слешей и так далее.

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

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

Сайтодел | #расширение #vscode
🌐 GraphQL - расширение VSCode, которое проверяет и подсвечивает код

Расширение GraphQL VSCode создано с целью тесной интеграции экосистемы GraphQL с VSCode для удобства разработчиков. Это расширение обеспечивает подсветку синтаксиса (тип, запрос, интерфейс, объединение, перечисление, фрагменты, директивы).

GraphQL выполняет переход к определению, просматривает информацию о наведении (hover) и cоздает автозаполнение для проектов graphql. Оно работает с запросами, помеченными тегом gql.

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

Сайтодел | #расширение #vscode
🌐 Log File Highlighter – расширение VSCode для поддержки log-файлов

Это расширение Visual Studio Code создано для добавления цветовой подсветки в log-файлы. Оно основано на стандартных соглашениях для файлов журналов log4net, но подходит и для других вариантов log-файлов.

Цвета в Log File Highlighter настраиваются, но по умолчанию используется текущая цветовая тема. Более ранняя версия подсветки из этого расширения была включена в Visual Studio Code версии 1.20.

Если вам нравится, как выглядят изначально log-файлы в VSCode, то вам не нужно это расширение. Однако если вам нужна дополнительная подсветка, настраиваемые шаблоны и расчет продолжительности времени, то смело устанавливайте Log File Highlighter.

Сайтодел | #расширение #vscode
🌐 Apache Conf – расширение VSCode, которое поддерживает синтаксис Apache

Расширение создано для работы с синтаксисом Apache. Оно поддерживает такие расширения файлов, как .conf, .htaccess, .htgroups, .htpasswd.

Apache Conf позволит VS Code понять, что это файл Apache, и автоматически правильно выбрать язык. Определите Apache conf в качестве языка: в правом нижнем углу нажмите кнопку «Выбрать языковой режим».

Чтобы установить расширение в Visual Studio Code, откройте панель команд с помощью клавиш Ctrl+Shift+P или введите в командную строку ext install apache.

Сайтодел | #расширение #vscode
🌐 JsHint – расширение VSCode для с кодом JavaScript

Введение: JsHint - это инструмент, который обнаруживает ошибки и потенциальные проблемы в коде JavaScript. Поскольку JsHint очень гибкий, вы можете легко настроить его в среде, где вы собираетесь писать код.

Для того, чтобы установить JsHint в Visual Studio Code, зайдите в раздел расширений и выберите там JsHint. Расширение ищет модуль JsHint в текущей директории и глобально. Вы можете установить расширение локально с помощью npm install jshint или глобально с помощью npm install -g jshint

Чтобы отключить JsHint для рабочей области, укажите "jshint.enable": false в настройках рабочей области. Расширение включено по умолчанию.

Сайтодел | #расширение #vscode
🌐 Node Essentials – расширение VSCode для легкой node-разработки

Это набор расширений, которые помогут вам в разработке приложений на node.js в общей среде. Node Essentials добавляет подсветку синтаксиса, команды, подсказки при наведении курсора и работает с файлами Dockerfile.

Node Essentials включает в себя ESLint, что помогает выполнить автоматическое заполнение имен файлов в вашем коде, а также инструмент работы с git – GitLens.

Расширение распознает синтаксис файлов dotenv, а также поддерживает EditorConfig для VS Code. Другой его плюс – работа с языком YAML.

Сайтодел | #расширение #vscode
🌐 Babel JavaScript - расширение VSCode для работы с разными стандартами JavaScript

Развитие JavaScript за последние несколько лет, а также появление фреймворков и библиотек вроде React, Flow, GraphQL привело к тому, что теперь существует много новых типов "синтаксисов".

Babel JavaScript включает подсветку синтаксиса для нового синтаксиса JavaScript и этих конкретных "языков", позволяя вашему редактору JavaScript работать с самыми новыми версиями языка.

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

Сайтодел | #расширение #vscode
🌐 CSS Navigation – расширение VSCode для навигации по файлам

CSS Navigation поможет вам в работе с документами разных форматов. Это расширение позволяет запускать навигацию от HTML в CSS / Sass / Less, а также снабжает рабочими символами для названий классов и id и помогает найти ссылки из CSS в HTML-файл.

В документе HTML выберите «Перейти к определению» или «Просмотреть определение», расширение будет искать связанные селекторы CSS, Scss и Less в текущей папке рабочей области.

CSS Navigation будет очень удобен в работе над реальными проектами, особенно крупными, поскольку оно позволяет не запутаться в CSS-классах, препроцессорах и id тегов.

Сайтодел | #расширение #vscode
🌐 Import Cost – расширение VSCode для проверки пакетов

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

Расширение использует Webpack с подключаемым модулем Babel-Webpack для определения импортированного размера.

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

Сайтодел | #расширение #vscode
🌐 Settings Sync – расширение VSCode для синхронизации

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

В число элементов, которые синхронизирует Setting Sync, входят файл настроек, файл запуска, папка со сниппетами, расширения и конфигурации расширений VSCode, папка рабочего пространства.

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

Сайтодел | #расширение #vscode
🌐 Color Info – расширение VSCode, которое дает информацию о цветах

Это не очень большой плагин для Visual Studio Code, который дает краткую справку о цветах в CSS. Просто наведите курсор на название нужного вам цвета и получите всю необходимую информацию о нем. Цвета транслируются в разные форматы: hex, rgb, hsl и cmyk.

Вы можете определить, какие из этих полей в каком порядке будут отражаться, используя настройки плагина. По умолчанию расширение работает с любым документом CSS, SASS, SCSS и LESS и распознает все основные цветовые форматы CSS, включая именованные цвета.

Вы также можете включить Color Info в дополнительных типах файлов, используя настройку colorInfo.languages. Эта настройка определяет, для каких файлов и языков включена информация о цвете и какие типы цветов поддерживаются.

Сайтодел | #расширение #vscode
🌐 Auto Complete Tag – расширение VS Code для редактирования кода

В это расширение вошли два известных плагина VS Code - Auto Close Tag и Auto Rename Tag. Первый плагин автоматически закрывает теги в HTML и в других языках. Второй плагин нужен, чтобы автоматически переименовывать теги.

Когда вы меняете открывающий тег, вместе с ним меняется и закрывающий тег. Например, если вы напишете тег <p>, но вместо того чтобы закрыть его при помощи </p>, напишете </div>, расширение Auto Complete Tag поменяет его на </p>

Автоматическое закрытие парных тегов поможет избежать серьезных ошибок в коде, когда из-за незакрытого тега перестает работать весь проект. Теперь вам не придется искать незакрытые теги во всем коде!

Сайтодел | #расширение #vscode
🌐 TypeScript Hero – расширение VSCode для работы с языком TypeScript

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

Вот краткий список того, что может TypeScript Hero: импортировать ваш проект или библиотеки в текущий файл, добавлять все отсутствующие импортированные файлы с помощью одной команды, применять технологию Intellisense, которая предлагает символы и автоматически добавляет необходимый импорт.

В TypeScript Hero есть так называемая "функция лампочки", которая исправляет написанный вами код. Расширение работает с форматом документов TS / TSX. Разработчики также планируют добавить в TypeScript Hero инструменты для работы с JavaScript.

Сайтодел | #расширение #vscode
🌐 Vetur – полезное расширение VS Code для работы с Vue

Это расширение представляет собой инструмент, который облегчает работу с Vue за счет подсветки необходимых частей кода и использования сниппетов. Vetur чрезвычайно популярен: его скачали более 9 миллионов раз. Установить расширение можно через Visual Studio Marketplace.

Основное преимущество Vetur – это подсветка кода Vue различными цветами, благодаря чему вы точно не запутаетесь при работе с объемными проектами. VS Code способен распознавать тип кода в файле по его расширению.

Vetur поддерживает код, написанный на HTML, JavaScript, TypeScript, CSS, Haml, PostCSS, Stylus, Sass и Pug. Расширение также поддерживает работу Emmet, форматирует код и проверяет ошибки, работает с технологией IntelliSense и поддерживает отладку.

Сайтодел | #расширение #vscode
Remote SSH - плагин VS Code для удаленного подключения

Если вы занимаетесь разработкой, часто приходится через SSH подключаться к серверу или определенному компьютеру. Это расширение упростит процесс подключения, а также позволит это сделать не выходя из VS Code.

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

Сайтодел | #расширение #vscode