#2 Расширения (плагины) и Темы в редакторе VS Code

Подписаться 69 тыс.

Просмотров 24 тыс.

50% 1

В этом видео я расскажу про Расширения, плагины и Темы в редакторе VS Code, которые я использую. А так же Русификация редактора VS Code, Сочетания клавиш, Подсветка скобок, Форматирование документа, Работа с GitHub, Синхронизация с браузером, Подсветка файлов Sass и Scss и подробнее про Настройки редактора VS Code, а так же Терминал в VS Code.
Содержание:
00:00 Введение
01:30 Обзор на VS Code: • #1 Visual Studio Code ...
02:05 Множественное выделение
02:25 Копировать предыдущую строку
02:40 Форматирование кода
03:05 Сочетания клавиш в VS Code
03:35 Поиск инструментов
04:10 Расширения
04:16 Beautify - Форматирование документа
04:59 Bracket Pair Colorized - Подсветка скобок
05:52 Git History Diff - Работа с GitHub
06:08 Работа с панелью GitHub в VS Code: • #10 Уроки Git+GitHub -...
06:46 Live Server - Синхронизация с браузером
07:56 Material Icon Theme - Иконки файлов
08:47 Material Theme - Моя цветовая тема
11:04 Русификация редактора VS Code
11:45 Подсветка файлов Sass и Scss
12:12 Live Sass Compiler - Компиляция Sass и Scss в редакторе VS Code
12:47 Sass через Gulp: • Компиляция SASS и SCSS...
13:07 Настройки редактора VS Code
14:15 Мои настройки - gist.github.com/morphIsmail/8...
15:50 Терминал в VS Code
✔Советую посмотреть:
Visual Studio Code обзор редактора: • #1 Visual Studio Code ...
Быстрый старт в JavaScript: • #0 Основы программиров...
Сборка проекта на Gulp 4: • Сборка проекта на Gulp...
Курс "Frontend разработчик на HTML, CSS и JavaScript": stepik.org/z/113402
Курс "Тренажер по вёрстке, плагин Emmet": stepik.org/113654
Все про редактор Visual Studio Code: • Visual Studio Code, на...
⚡️ Эксклюзив на Boosty - boosty.to/itdoctor
💡 Telegram канал - t.me/itdoctor_official/4
🎥 Курсы на Stepik - stepik.org/users/387773773/teach
💰 Донаты на ЮMoney - sobe.ru/na/itdoctor
ВКонтакте - itdoctorstudio
Яндекс Дзен - zen.yandex.ru/itdoctor
Rutube - rutube.ru/channel/23500045/
#vscode #visualstudiocode #visualcode #itdoctor

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 56

@ITDoctor 3 года назад

Курс Frontend разработчик на HTML, CSS и JavaScript: stepik.org/z/113402

@green3216 5 лет назад

Огромнейшей спасибо youtube за то, что позволяют таким людям как ITDoctor делиться с нами своим опытом. И , конечно же, спасибо вам ITDoctor !

@bobpps 5 лет назад

Огромнейшее спасибо! Было классно, если бы Вы рассказали об об интеграции в Laravel.

@user-mo6xq8jq7m 4 года назад

Спасибо большое, многое новое для себя нашёл!

@voltifer5267 5 лет назад

Спасибо огромное, все время хотел найти что-то подобное!

@user-rc6ye4jn3q 3 года назад

У тебя очень крутые и полезные видео! Спасибо большое!

@user-kr1vn4gw4s 5 лет назад

Ваш канал - золото!

@_meta_data_9992 3 года назад

классное видео, смотрю еще №1 сразу

@lackwindertonstreams7000 5 лет назад

Классное видео

@ganjackal 3 года назад

спс так скажем новичку не все понятно сразу но в процессе буду знать куда подсмотреть)!

@rommand7338 5 лет назад

Реально не хватает практического руководства по настройке линеров и форматтеров типа ESlint, stylelint - для работы с html, css, JS. Объяснить для новичков по шагам: где что прописать в настройках, куда(и какие) размещать конфиги, и что делать, если установленные через Vscode линеры не работают и требуется установка пакетов через npm.

@113DEVIL113 3 года назад

Спасибо, друг!)

@ITDoctor 3 года назад

Пожалуйста

@user-wo7vc6ow6d 4 года назад

Спасибо !!!

@martinpokrovski9212 5 лет назад

спасибо

@user-sl4km5cp7n 4 года назад

Спасибо за видео! Но вот только не пойму, почему Go live не открывает image. Может можно как-то подключить? Подскажите.

@maksymskachkov1098 3 года назад

Thanks!

@KuKu_RuKu88 4 года назад

Сильный обзор! Но, подскажите, можно ли на строить как-то подсвечивание элемента(блока) в браузере, как например в Брекетсе с хромом.??? В Брекетсе стоит только установить курсор не каком-то фрагменте кода, так сразу этот элемент подсвечивается синим цветом в Хроме !!! очень удобная штука, помогает видеть, как перемещается элемент. Помогите пожалуйста, если знаете !!! :))

@___KS___ Год назад

Beautify пишет больше не поддерживается .. модно ли им пользоваться в новых версиях и как это влияет на процесс ?

@alxputnik 5 лет назад

Спасибо большое за видосы. Что скажешь о JS & CSS Minifier? В CSS почему то не группирует медиазапросы у которых задана одинаковая величина экрана. Может настройки надо поправить, или вообще это не умеет?

@ITDoctor 5 лет назад

не знаю есть ли такая возможность в CSS Minifier, но в CSS Clean вроде есть. Это модуль для галпа. я показывал В видео по сборке проекта на Gulp 4 установку этого модуля, а на его странице можно посмотреть разные варианты настроек и возможности которые он поддерживает.

@alxputnik 5 лет назад

Сlean-css там имеется. Во всяком случае указан в зависимостях. Только с первого захода не нашел как его там в VS Code настраивать ) Попробую еще порыться.

@ITDoctor 5 лет назад

@@alxputnik у вот этого расширения есть вроде всё и варианты настроек там приведены. prntscr.com/n8wx2k

@alxputnik 5 лет назад

@@ITDoctor Спасибо, посмотрю. В первом случае "new CleanCSS": { "level": 2 }, почему то не сработали.

@user-vx8rc5ob5x 3 года назад

как изменить цвет в нескольких скриптах css?

@WixxTeR 4 года назад

а какое либо продолжение будет либо тема уже исчерпана? очень бы хотелось побольше о ВСК

@ITDoctor 4 года назад

Будет после армии

@Medeet 4 года назад

А как делать чтобы подсказки вышли

@hellishfire4710 5 лет назад

Каких то новых плагинов для себя не заметил =) Хотя хотелося б чего то полезного и такого чего нет в 500 остальних видео обзорах даного редактора) Например Sass Variables Helper очень прикольний плагин для работы с переменными colors .. Искал что то наподобие для шрифтов и миксин .. пока не нашел =) в поиске

@user-cx5jl8xw6d 5 лет назад

Редактор функциональнее чем Sublime Text ?

@geroy1965 Год назад

Доброго времени суток. Скачал расширение Git History Diff, перезапустил vscode и сам компьютер но расширение не появляется и не работает. В чем может быть проблема ?

@ITDoctor Год назад

давно не пользуюсь уже этим расширением. использую гит граф. с ним точно проблем нет могу лишь порекомендовать тоже делать так. или разбираться самостоятельно ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-NMh4u5tyDC4.html

@elena8553 4 года назад

подскажите пожалуйста, как сделать чтоб у файла gulpfile.js значок поменялся с JS на значок для Gulp? расширение Material Icon Theme установлено

@elena8553 4 года назад

разобралась, нужна была перезагрузка VSC :)

@user-ku9my6dt9p 2 года назад

)

@alexeipopov3319 5 лет назад

Важно! Чтобы SASS компилировался в папку css и создавался файл .css минифицированный нужно в настройкай settings.json в список прочих настроек вставить такую конструкцию: "liveSassCompile.settings.formats": [ { "format": "compressed", "extensionName": ".css", "savePath": "/css" } ] Вместо compressed можно вписать другое значение, читайте документацию, или удалить compressed нажать Ctrl+пробел (в VSCode откроются варианты) и выбрать значение. Папку и файл .css создавать не нужно, все создается автоматически после компиляции Путь к settings.json: Параметры>Расширения>Live Sass Compile Config>Settings:Formats Ну а там "Изменить в settings.json Всё, спасибо за внимание :-))) У меня так (сплагиатил у ITD): { "git.path": "C:\\Program Files\\Git\\cmd\\git.exe", "editor.minimap.enabled": true, "editor.wordWrap": "on", "editor.tabSize": 3, "editor.fontFamily": "'Consolas', monospace", "editor.fontSize": 16, "editor.mouseWheelZoom": true, "window.menuBarVisibility": "default", "workbench.sideBar.location": "left", "workbench.activityBar.visible": true, "editor.renderWhitespace": "none", "editor.renderControlCharacters": false, "window.zoomLevel": 0, "workbench.colorTheme": "Material Theme High Contrast", "files.autoSave": "onFocusChange", "workbench.startupEditor": "newUntitledFile", "workbench.statusBar.feedback.visible": false, "files.defaultLanguage": "html", "workbench.iconTheme": "material-icon-theme", "git.autofetch": true, "liveSassCompile.settings.formats": [ { "format": "compressed", "extensionName": ".css", "savePath": "/css" } ], "explorer.confirmDelete": false }

@ITDoctor 5 лет назад

спасибо, возможно кому-то будет полезно.

@ITDoctor 5 лет назад

вот страница с документацией: github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

@nonicknameee Год назад

А как цвет самого текста менять? Вот например хочу я чтобы определённое слово было у меня таким то цветов, можно ли так?

@ITDoctor Год назад

вы имеете ввиду в подсветка от редактора?

@nonicknameee Год назад

@@ITDoctor я не знаю подсветка от редактора это или нет. Я имею ввиду что хочу например чтобы слово class было например зелёным а его значение красным

@ITDoctor Год назад

@@nonicknameee это от темы зависит. Разные попробуйте. Можно и свою сделать, поэтому поводу можно найти информацию в интернете

@user-zp7qg5le7p 4 года назад

бьютифай работает нажатием - ctrl+s

@weltonn 4 года назад

7:30 что делать если нету кнопки open with live server

@ITDoctor 4 года назад

На файл html правой кнопкой и там в меню запустить лайв сервер можно

@daniilukraine3611 4 года назад

HELLLPPPPP !!! такая ситуация перебил винду сбился vs code с плагинами , ищу расширение оно выравнивало мне столбцы в коде как Beautify , но выравнивало автоматически , как но назается !!!!

@Ramb33 4 года назад

Prettier - автоформатирование кода, авто выравнивание отступов в HTML, CSS, JS

@finzdrav8646 4 года назад

Danik Danik Prettier Cod formater

@kandreyk9159 5 лет назад

Да, редактор бесподобный, майкрософт умеет удивить иногда

@user-vx1fx1nz7z 5 лет назад

Что это за тема?

@ITDoctor 5 лет назад

я видео для кого записывал, и описание писал?

@zanusssidokazano1854 3 года назад

@@ITDoctor не тема а цвета самого кода как ты выставил такие именно

@ITDoctor 3 года назад

@@zanusssidokazano1854 цвет кода зависит от темы. про тему я рассказывал в этом видео на 8:47 .е сли такую тему скачать и установить то будут и у вас такие цвета. или я не понял суть вашего вопроса?

@zanusssidokazano1854 3 года назад

@@ITDoctor да все так , я просто всякой херни наставил и когда поставил твою тему то у меня не поменялись цвета кода, этиже цвета стояли у меня на Сублайме, только посочнее ,насыщенее Dark soda+ Neon(Colorcoded)= ух красотище! Вот хочу такое же сделать на VS, может подскажешь?

@ITDoctor 3 года назад

@@zanusssidokazano1854 после установки темы ее нужно выбрать в меню file/preferences/color theme и все. Все просто