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

Рет қаралды 23,722

Күн бұрын

В этом видео я расскажу про Расширения, плагины и Темы в редакторе 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

Пікірлер: 56

@ITDoctor 3 жыл бұрын

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

@green3216 5 жыл бұрын

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

@113DEVIL113 3 жыл бұрын

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

@ITDoctor 3 жыл бұрын

Пожалуйста

@user-kr1vn4gw4s 5 жыл бұрын

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

@user-mo6xq8jq7m 5 жыл бұрын

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

@voltifer5267 5 жыл бұрын

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

@user-rc6ye4jn3q 4 жыл бұрын

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

@lackwindertonstreams7000 5 жыл бұрын

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

@_meta_data_9992 3 жыл бұрын

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

@bobpps 5 жыл бұрын

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

@user-wo7vc6ow6d 4 жыл бұрын

Спасибо !!!

@martinpokrovski9212 5 жыл бұрын

спасибо

@rommand7338 5 жыл бұрын

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

@ganjackal 3 жыл бұрын

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

@maksymskachkov1098 4 жыл бұрын

Thanks!

@user-sl4km5cp7n 4 жыл бұрын

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

@KuKu_RuKu88 4 жыл бұрын

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

@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

@___KS___ Жыл бұрын

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

@Medeet 4 жыл бұрын

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

@hellishfire4710 5 жыл бұрын

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

@user-ku9my6dt9p 2 жыл бұрын

)

@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?

@elena8553 4 жыл бұрын

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

@elena8553 4 жыл бұрын

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

@WixxTeR 4 жыл бұрын

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

@ITDoctor 4 жыл бұрын

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

@user-zp7qg5le7p 4 жыл бұрын

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

@user-cx5jl8xw6d 5 жыл бұрын

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

@geroy1965 Жыл бұрын

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

@ITDoctor Жыл бұрын

давно не пользуюсь уже этим расширением. использую гит граф. с ним точно проблем нет могу лишь порекомендовать тоже делать так. или разбираться самостоятельно kzfaq.info/get/bejne/hLOYZ9hm2d-oc2g.html

@weltonn 4 жыл бұрын

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

@ITDoctor 4 жыл бұрын

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

@nonicknameee Жыл бұрын

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

@ITDoctor Жыл бұрын

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

@nonicknameee Жыл бұрын

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

@ITDoctor Жыл бұрын

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

@daniilukraine3611 5 жыл бұрын

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

@Ramb33 5 жыл бұрын

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 и все. Все просто