Плагин vs code для подсветки тегов

Лучшие плагины для VS Code

Рассмотрим лучшие плагины редактора Visual Studio Code для Web-разработки в 2021 году.

1. Live Server

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

Включение Live Server для .html или .htm файлов:

правым щелчком мыши в окне с кодом » Open with Live Server

Включение Live Server, если нет .html или .htm файлов:

1. нажатием горячих клавиш alt + l alt + o — для запуска сервера и alt + l alt + c — для его остановки
2. нажатием F1 или ctrl + shift + p » Live Server: Open With Live Server

Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server

1. Нужно установить дополнение для браузера Chrome или Firefox.
2. Должен быть установлен локальный сервер. Я использую Open Server.
3. Помещаем свой проект на локальный сервер и запускаем его.
4. Откроем установленное расширение и заполним необходимые поля. Actual Server Address: адрес и порт на котором расположен сервер.
   Live Server Address: адрес, на котором работает расширение Live Server.
5. Нажимаем кнопку Go Live в статус баре.
6. Заходим на адрес локального сервера (в моём случае Open Server и адрес является названием проекта), т.е. заходим по адресу, который записали в Actual Server Address .

2. Sass

Поддержка синтаксиса Sass: отступы, автозаполнение и прочее

3. Live Sass Complier

Компилирует SASS / SCSS файлы в CSS в режиме реального времени

Для включения Live Sass Complier нужно нажать Watch Sass в статус баре

Что включает в себя Live Sass Complier:

1. выбор папки экспорта компилируемого файла
2. выбор стиля CSS (расширенный, компактный, сжатый, вложенный)
3. выбор имени расширения (.css или .min.css)
4. совместимость с расширением Live Server
5. настройка автоматической простановки вендорных префиксов
6. и прочее

4. Higlight Matching Tag

Выделение тегов — открывающего и закрывающего

Подсветку выделения тегов можно кастомизировать под себя. Моя настройка:

5. Color Highlight

Выделение web-цветов в редакторе соответствующим цветом

6. Bracket Pair Colorizer

Расширение подкрашивает симметричные скобки одинаковым цветом, но отличным от других скобок.

7. Auto Rename Tag

При изменении одного парного тега, второй будет изменён автоматически.

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

8. Auto Close Tag

Автоматическое закрытие тегов

По умолчанию работает для всех языков: HTML, PHP, JavaScript, markdown, liquid и т.д. Изменить настройки можно в setting.json

9. Import Cost

Это расширение будет отображать встроенный в редакторе размер импортируемого пакета.

10. Material Theme

Одна из самых популярных тем для VS Code. Так же можно установить шрифт, поддерживающий лигатуры (преобразование последовательности символов в единый элемент)

Тогда настройки для settings.json будут такими

11. Apache Conf

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

12. Russian Language Pack

13. Code Spell Checker

Проверка орфографии русского и английского языков в VS Code.

1. установите Code Spell Checker;
2. установите Russian — Code Spell Checker;
3. добавьте в настройки строку «cSpell.language»: «en,ru»,

14. Автоматическая замена табов пробелами в VS Code

Сначала зададим количество пробелов в одном табе:

Теперь настроим автоматическую замену табов пробелами:

Источник

Расширения VS Code, благодаря которым я каждый день заново влюбляюсь в программирование

Перевод статьи «VS Code extensions that make me fall in love with programming each day».

Над этим постом я прокрастинировал очень долго. Собственно, я собирался написать нечто подобное еще несколько месяцев назад, но ленился, поскольку статья должна была быть чисто теоретической, без всякого кода. Тем не менее, это точно будет один из самых полезных постов, которые вы прочтете сегодня!

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

И, раз уж заговорил о стиле кода, покажу, как выглядит мой VS Code в работе:

Расширения VS Code для повышения продуктивности

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

1. WakaTime

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

Говоря простым языком, WakaTime отслеживает всю вашу активность, связанную с кодингом. Сколько времени вы проводите за написанием кода, над какими проектами работаете, какие языки программирования используете и насколько хорошо вам это удается.

Всю собранную статистику можно просматривать на красивых диаграммах.

2. Visual Studio IntelliCode

Представьте технологию Intellisense с поддержкой ИИ, который может посоветовать, какой код писать. Представленная вами картинка практически воплощена в реальность!

Расширение Visual Studio IntelliCode предоставляет функционал разработки с применением ИИ для Python, TypeScript/JavaScript и Java. Расширение распознает контекст вашего кода при помощи машинного обучения.

3. Terminal Here

Если вы не пользуетесь IDE и предпочитаете писать код в текстовом редакторе, обратите внимание на это расширение: оно вам точно понравится!

Примечание автора: лично я не люблю кодить в IDE и отдаю предпочтение текстовому редактору VS Code. В основном я пишу на Java, при этом мне нравится поддерживать определенную структуру файлов (по одной папке на один вопрос). Как вы, вероятно, догадались, чтобы запускать выполнение файлов, мне приходилось каждый раз менять директории. Этот плагин — просто спасение!

Это расширение открывает в терминале VS Code текущую директорию. Разве не потрясающе?

4. Live Server

Как бы объяснить всю важность этого плагина.

Вы открываете свои страницы при помощи Live Server, и вам больше не приходится каждый раз при внесении изменений перезагружать их!

5. ReactJS Code Snippets

Если вы React-разработчик и не пользуетесь этим плагином, вы теряете зря кучу времени! ReactJS Code Snippets позволяет создавать компоненты, используя готовые сниппеты кода.

6. Python

Вероятно, мне все равно не удастся описать весь функционал этого расширения в рамках одного поста, так что скажу кратко: оно позаботится обо всех ваших нуждах, связанных с написанием кода на Python!

Выбор интерпретатора Python в строке состояния в один клик:

Настройка дебаггера через Debug Activity Bar:

Конфигурация тестов путем запуска команды Configure Tests:

Быстрый запуск Jupiter notebook:

7. Path Intellisense

Очень полезный функционал для разработчиков. Будь то импорт зависимостей, включение изображений в HTML-документ, добавление JS-скриптов или подключение CSS-документов в HTML-файл — нам постоянно нужно указывать пути к файлам.

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

8. NPM Intellisense

Если вам понравилось предыдущее расширение, а сами вы — node-разработчик, я уверен, что этот плагин вы тоже установите. В конце концов, кто ж не захочет иметь автодополнение или подсказки при импорте npm-библиотек?

9. Markdownlint

Откройте наугад несколько open-source проектов на GitHub, и вы увидите, что у них есть нечто общее, а именно — стиль README.md.

Язык разметки Markdown создавался с тем расчетом, чтобы документы на нем было легко читать, писать и понимать. Цель была достигнута, но гибкость языка стала и его преимуществом, и его недостатком. В этом языке допустимо использование многих стилей, из-за чего форматирование может стать непоследовательным. К тому же, некоторые конструкции не во всех парсерах хорошо работают, и из-за этого их следует избегать.

Markdownlint это расширение Visual Studio Code, включающее библиотеку правил для Markdown-файлов, благодаря которым повышается стандартизация и последовательность форматирования.

Не ленитесь: установите себе этот плагин и поисправляйте свою markdown-разметку:)

10. Markdown Preview Enhanced

Возможно, вы, как и я, давно забросили MSWord и прочее ПО для текстовых документов, переключившись на использование markdown? Установите себе этот плагин, и вы сможете следить за тем, как выглядит ваш документ.

11. Auto Close Tag

Если вы веб-разработчик и при этом не пользуетесь автоматическим закрытием тегов, как вы вообще справляетесь? Закрывать теги вручную так муторно, что я не устаю благодарить небеса за то, что есть плагин, который делает это автоматически.

12. Auto Rename Tag

Как следует из названия, этот плагин служит для изменения названий тегов. Вы меняете открывающий тег, а закрывающий меняется автоматически (и наоборот).

Расширения VS Code для лучшего стиля кода

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

1. Prettier

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

Между сторонниками отступов в 2 и 4 пробела идет постоянная, непрекращающаяся борьба (люди, которые ставят 8 пробелов, зачем вы это делаете?!). Но при помощи этого расширения код с отступами в 2 пробела можно легко конвертировать в код с отступами в 4.

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

Это расширение предназначено для форматирования кода. Оно принудительно приводит код к заданному стилю.

2. Rainbow Brackets

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

При помощи этого плагина можно сделать круглые скобки одного цвета, квадратные — другого, а фигурные — третьего. Это имеет особенное значение для программистов, пишущих на Lisp или Clojure и, конечно, для JavaScript-разработчиков. Но остальным тоже не помешает;)

3. Snazzy Operator

Это расширение — моя любовь. Вы, может, думаете, что это просто еще одна тема VS Code, но я в нее просто влюблен.

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

4. vscode-styled-components

И, наконец, потрясающий плагин для подсветки синтаксиса и intellisense.

Но погодите! А вы заметили еще кое-что на самом первом скриншоте, который я показывал? Если нет, я вам его еще раз покажу:

А теперь заметили? А? Ладно, вот вам подсказка: посмотрите на мой терминал.

Если вы работаете на Linux или Mac, для вас это, может, и не новость. Но мои друзья, использующие Windows, могли заметить нечто интересное.

В общем, для своей WSL (подсистема Windows для Linux) я использую тему Oh-My-Zsh. Можете поискать инфу в гугле. Возможно, будет непросто найти пошаговое руководство, как установить эту тему именно в терминале VS Code, но вы постарайтесь.

Источник