Visual studio code полезные расширения. Полезные плагины для Visual Studio Code. Включение Live Server, если нет.html или.htm файлов
Visual Studio Code - бесплатный, кроссплатформенный текстовый редактор от Microsoft, ставший популярным благодаря легковесности, мощному и расширяемому функционалу и, конечно же, "халявности", в отличие от PHPStorm, Sublime и др.
Как и большинство современных IDE, VSCode имеет множество дополнений, расширяющих его исходные возможности. Мы отобрали 15 плагинов, которые будут полезны любому программисту, работающему в этом редакторе.
Open-In-Browser
По умолчанию, в Visual Studio Code нет возможности открыть файл в браузере. Данное расширение не только добавляет функцию "Открыть в браузере", но и позволит открыть файлы в любом установленном на компьютере браузере.
Quokka
Quokka - утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода, выдавая результаты выполнения функций и подсчитанные значения переменных. Расширение легко настраивается и работает из коробки с JSX или Typescript проектами.
Faker
Позволяет быстро вставлять случайные данные (произвольные имена, адреса, изображения, телефонные номера и др.) в код. У каждой категории есть свои подразделы, что позволяет более точно подстроиться под потребности программиста.
CSS Peek
С этим плагином вы можете отслеживать определения классов и id в CSS файле. Для этого нужно нажать правой кнопкой мыши на селекторе в вашем HTML файле и выбрать Go to Definition (Перейти к определению) или Peek definition (Подсмотреть определение).
HTML Boilerplate
HTML Boilerplate упрощает работу с HTML, избавляя от необходимости самому писать теги head и body . Наберите в пустом файле html , нажмите на на клавишу Tab и Visual Studio Code сгенерирует шаблон документа!
Prettier
Prettier – популярный у web-разработчиков редактор кода, позволяющий приводить код, написанный разными людьми, к единому виду. В настройках Prettier можно установить автозапуск, что позволит сразу форматировать код, написанный на JS и CSS.
Color Info
Небольшой плагин, который выдает краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как он выглядит и как его написать в других цветовых форматах (hex , rgb , hsl и cmyk ).
SVG Viewer
Это расширение позволит работать с SVG файлами: вы cможете редактировать SVG файлы, конвертировать их в PNG формат и создавать data URL схемы.
TODO Highlight
Это дополнение позволяет вам проставлять метки в недоделанные места в коде, что упрощает над проектом. По умолчанию, заданы только метки TODO (доделать) и FIXME (исправить), но вы можете создавать и свои собственные типы меток.
Шрифты с иконками
Расширение, добавляющее в Visual Studio Code поддержку около 20 популярных иконочных шрифтов, в том числе Font Awesome , Ionicons , Glyphicons , Material Design ...
Minify
Утилита для оптимизации и сжатию кода. Minify работает с HTML , JS и CSS файлами и отлично сочетается с такими плагинами, как uglify-js , clean-css и html-minifier .
Change Case
VS Code позволяет приводить выделенное только к верхнему и нижнему регистрам. С помощью Change Case , вы получите доступ к большому количеству регистров (змеиный, верблюжий и др.).
Regex Previewer
Дополнение, позволяющее работать с регулярными выражениями. Regex Previewer применяет шаблон регулярного выражения к любому открытому текстовому файлу, выделяя все совпадения. Прямо как
Рассмотрим лучшие плагины редактора Visual Studio Code для Web-разработки в 2020 году.
- Live Server
- Auto Close Tag
- Import Cost
- Material Theme
- Apache Conf
- Russian Language Pack
- Небольшой бонус
1. Live Server
Включение Live Server для.html или.htm файлов:
Включение Live Server, если нет.html или.htm файлов:
Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server
2. Sass
Поддержка синтаксиса Sass: отступы, автозаполнение и прочее
Компилирует SASS / SCSS файлы в CSS в режиме реального времени
Для включения нужно нажать Watch Sass в статус баре
Что включает в себя Live Sass Complier:
- выбор папки экспорта компилируемого файла
- выбор стиля CSS (расширенный, компактный, сжатый, вложенный)
- выбор имени расширения (.css или.min.css)
- совместимость с расширением Live Server
- настройка автоматической простановки вендорных префиксов
- и прочее
Выделение тегов - открывающего и закрывающего
Подсветку выделения тегов можно кастомизировать под себя. Моя настройка:
"highlight-matching-tag.leftStyle" : { "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" } , "highlight-matching-tag.rightStyle" : { "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" } ,Выделение web-цветов в редакторе соответствующим цветом
Расширение подкрашивает симметричные скобки одинаковым цветом, но отличным от других скобок.
![](https://i0.wp.com/only-to-top.ru/images/tools/2018/2018-10-13-rasshireniya-dlya-vs-code/bracket-pair-colorizer.png)
При изменении одного парного тега, второй будет изменён автоматически.
По умолчанию расширение работает для всех языков, чтобы изменить данную настройку используйте следующий код:
"auto-rename-tag.activationOnLanguage" : [ "html" , "xml" , "php" , "javascript" ] ,8. Auto Close Tag
Автоматическое закрытие тегов
По умолчанию работает для всех языков: HTML, PHP, JavaScript, markdown, liquid и т.д. Изменить настройки можно в setting.json
"auto-close-tag.activationOnLanguage" : [ "php" , "javascript" , "javascriptreact" , "typescript" , "typescriptreact" , "plaintext" , "markdown" , "vue" , "liquid" , ]9. Import Cost
Это расширение будет отображать встроенный в редакторе размер импортируемого пакета.
10. Material Theme
Одна из самых популярных тем для VS Code. Так же можно установить шрифт, поддерживающий лигатуры (преобразование последовательности символов в единый элемент)
Тогда настройки для settings.json будут такими
"editor.fontLigatures" : true , "editor.fontFamily" : "Fira Code" , "editor.fontWeight" : "100" ,11. Apache Conf
Поддержка синтаксиса Apache. Удобно для редактирования файлов с расширениями .htaccess . Также поддерживает типы файлов: .conf, .htgroups, .htpasswd
Для быстрой вставки случайных данных при помощи библиотеки Faker. Вы сможете вставлять произвольные имена, адреса, изображения, телефонные номера и другое. Очень популярный и очень полезный плагин.
Он позволяет автоматичиски дополнять имена файлов по мере ввода строки. Возможно, вскоре этот функционал будет интегрирован в редактор, но пока плагин очень помогает.
Плагин позволяющий оставлять закладки в коде, так же легко и удобно работать с ними.
Плагин для проверки орфографии в коде.
GitLens перезагружает встроенные возможности Visual Studio Code Git. Это помогает вам сразу же визуализировать информацию о истории кода в Git, плавно перемещаться и исследовать историю файла или ветки, получать ценную информацию через плагин, сравнения кода и многое другое.
Плагины для Back-end разработчиков
PowerShell
Позволяет работать со скриптами PowerShell прямо в интерфейсе Visual Code.
Python
Расширение кода Visual Studio с поддержкой языка Python (включая Python 3.6) с включая следующие функции:
- Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy)
- Intellisense
- Авто отступ, форматирование кода, рефакторинг
- Запуск и отладка юнит тестов (unittest, pytest, nose)
- Snippets
- Инструменты для разработки и отладки.NET Core.
- Большая поддержка редактирования C#, включая выделение синтаксиса, IntelliSense, переход к определению, поиск всех ссылок и т.д.
- Поддержка проектов project.json и csproj для Windows, MacOS и Linux.
Плагины для Front-end разработчиков
JSHint
JSHint — очень удобный инструмент для статического анализа JavaScript-кода. Проверяет отвечает ли написаный код стандартам программирования.
Code Time - это плагин с открытым исходным кодом, который предоставляет метрики прямо в редакторе кода.
После установки расширения будет предложено войти в панель управления. Если внутри редактора кода вы нажмете command + shift + P , откроется окно, в котором можно ввести Code Time , а затем выбрать между отображением данных в редакторе кода или в браузере.
Внутри браузера информация будет выглядеть так:
Внутри браузера красочнее:
Code Time полезен, если вам нужно точно знать или просто интересно, сколько времени вы тратите на написание кода.
One Dark Pro
One Dark Pro одна из самых популярных и часто загружаемых тем для Visual Studio Code.
В этом примере видно, что у нас есть значки для каталогов, таких как клиент и сервер, а также для файлов, таких как .eslintrc .gitignore и package.json .
One Dark Pro поддерживается в React, Angular, Redux и множестве различных фреймворков и библиотек, предоставляя различные значки каталогов для компонентов, утилит, стилей, а также для редюсеров (Reducers), действий (Actions) и хранилищ (Store).
Bracket Pair Colorizer
Это расширение позволяет сопоставлять скобки с цветами. Это удобно, когда у вас есть глубоко вложенные объекты или функции, как показано здесь:
Color Highlight
Color Highlight показывает визуальное представление любого цветового кода. Например, если вы введете RGB, RGBa, шестнадцатеричный или любой другой цветовой код, можно увидеть цвет, как в этом примере:
Path Intellisense
Path Intellisense - это плагин, который автоматически завершает имена файлов.
Это полезно для импорта компонентов в React, поскольку не нужно вручную вводить путь к файлу, который вы ищете.
ES7 React/Redux/GraphQL/React-Native фрагменты
Следующее расширение - ES7 React/Redux/GraphQL/React-Native фрагменты. Длинное название, но сэкономит вам много времени, особенно если вы используете его в React.
Это расширение предоставляет фрагменты JavaScript и React/Redux в ES7 с функциями плагина Babel для VS Code.
Прямо в редакторе кода можно нажать command + shift + P , а затем ES7 Snippet Search , вы увидите длинный список коротких команд, которые можно запустить, чтобы получить более длинные фрагменты кода.
С помощью этого расширения можно легко найти команду, например, для фрагмента функционального компонента.Вы запускаете команды, набирая их в редакторе и нажимая ввод. Все просто!
GitLens - Git supercharged
GitLens расширяет возможности Git, встроенные в Visual Studio Code. Помогает с первого взгляда определить автора кода с помощью аннотаций Git-blame и code lens, легко перемещаться и изучать репозитории Git, получать ценные сведения с помощью команд сравнения и многое другое. Нажав на строку кода, вы увидите, кто его редактировал, когда его редактировали и в каком коммите.
Давайте поговорим о Code
- .
Мои дорогие читатели попросили меня рассказать о тех расширения, которые я использую для разработки. Этим мы сейчас и займёмся.
Ссылка на загрузку VSC: https://code.visualstudio.com/
Наш VSC будет пятирогим лазеростреляющим единорогом -после того как мы снабдим его самыми полезными расширения, которыми я пользуюсь каждый день.
О, а если вы еще не используете замечательный редактор VSC, под картинкой выше есть ссылка на официальный сайт, с которого его можно загрузить.
Material Theme
Material Theme
Самая эпичная тема для Visual Studio Code:![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*CTL8x9C2IFMZ5zwjEp8NUA.jpeg)
Auto Import
Автоматически находит, парсит и дополняет названия методов и событий для всех доступных файлов. Поддерживает Typescript и TSX.![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*dCrNs4ZqjAB9af98ymep5g.gif)
Import Cost
Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.![](https://i1.wp.com/cdn-images-1.medium.com/max/800/1*LbfI4D9XXiZYS1Slwsys5g.gif)
Indent-Rainbow
Простое расширение, которое делает отступы более читабельными.![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*9QOOXgJZxLx9cGBxC3uQCg.png)
IntelliSense for CSS class names in HTML
Расширение VSCode, которое автоматически дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных в вашей рабочей области или внешних файлов, на которые ссылается элемент link .![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*f-jJmKCwYjz4uAfV9s5mog.gif)
SVG Viewer
Простой способ предпросмотра SVG.![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*4jgDiBembBhfkZ1EQS-s6A.gif)
Prettier - Code formatter
Не могу жить без него - пакет VSCode для форматирования JavaScript / TypeScript / CSS с использованием Prettier .![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*9-y881Wbfw2e7yrH13_P9w.png)
React Native Tools
Подсказки, отладка и встроенные команды для React Native.![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*Oo1LbEs43drxplvxqqkVtw.gif)
Sublime Text Keymap and Settings Importer
![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*Ji9GZ55bFgdR5KjHpxhrWw.png)
![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*j5Le3So-hPdM1U1dZBoPWw.gif)
npm Intellisense
Плагин VSCode, который автоматически дополняет имена модулей npm в операциях импорта.![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*7P4jVq5Vxd51noleeYtLAQ.gif)
lit-html
Добавляет подсветку синтаксиса и поддержку разметки HTML внутри строк JavaScript и TypeScript, как это используется в lit-html и других фреймворках.![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*fdCJZCc9YKs-UsAbFmHH-A.gif)
highlight-matching-tag
Это расширение предназначено для подсветки парных открывающих или закрывающих тегов - функциональности, отсутствующей в VSCode, но которая должна бы быть встроена в редактор из коробки.![](https://i1.wp.com/cdn-images-1.medium.com/max/800/1*Ev15e9HnXOd1qjvuW97-WQ.gif)
GitLens - Git supercharged
![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*arPZRYqFkg0BDmQmfZgukQ.png)
Git Project Manager
Git Project Manager (GPM) - это расширение Microsoft VSCode, которое позволяет вам открыть новое окно на основе git-репозитория непосредственно из VSCode.![](https://i1.wp.com/cdn-images-1.medium.com/max/800/1*PvDRDxbdNKnnVhJ1HS4fjQ.gif)
Git History
Просмотр логов git и истории изменения файлов и сравнение веток или коммитов.![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*VIfXgiX588VC8yRigAVhdg.gif)
File Utils
Удобный способ создания, дублирования, перемещения, переименования и удаления файлов и каталогов.![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*0STW58GU60QuISYOcFv6og.gif)
Bracket Pair Colorizer
Настраиваемое расширение для раскрашивания парных скобок. Крайне полезно при работе с большим количеством обратных вызовов.![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*Mc7P11ekmFL7irjflGkMIg.png)
Color Highlight
Это расширение подсвечивает CSS / веб-цвета, найденные в вашем документе.![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*tsOwh2G1AD29Xapu73IrFg.png)
CSS Peek
Переход к CSS-свойствам идентификаторов (id) и классов непосредственно из файлов HTML. Поддерживает переключение и между файлами и быстрый переход из одного в другой.![](https://i1.wp.com/cdn-images-1.medium.com/max/800/1*JHJxrnRar_7mSXYk4zW3uQ.gif)
Debugger for Chrome
Инструмент для отладки JavaScript-кода или любого другого кода в браузере Chrome.![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*pTBUYCONYSNF3MxDrWcpkQ.gif)
Quokka.js
Выполняет JavaScript-код в консоли параллельно с тем, как вы его пишете. (Полезно для быстрых демонстраций).![](https://i1.wp.com/cdn-images-1.medium.com/max/800/1*ukcsChGYEreBhhAksiYceA.gif)
Trailing Spaces
Мгновенно выделяет и удаляет конечные пробелы.![](https://i2.wp.com/cdn-images-1.medium.com/max/800/1*MriN730lVaOm9_qscQOvGw.png)
TypeScript Hero
![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*imCB6iHa8SjBvsHxY7oZ_A.png)
WakaTime
Метрики, инсайты и отслеживание времени, автоматически генерируемые на основании статистики вашей работы по программированию.![](https://i1.wp.com/cdn-images-1.medium.com/max/800/1*XmgzX-fQ-Y6wxEMd98NpCw.png)
Vetur
Поддержка Vue для VSCode![](https://i0.wp.com/cdn-images-1.medium.com/max/800/1*x3N3tR0HGBPFdBihTmgZ8g.png)
Code Runner
Запустите фрагмент кода или целый файл сразу в нескольких языках.![](https://i1.wp.com/cdn-images-1.medium.com/max/800/1*OAD4CzbkQz05eCqvy_XNsg.gif)