#1 Visual Studio Code обзор редактора, Функции и плагины в VS Code
Vložit
- čas přidán 29. 08. 2024
- В этом видео я сделаю полный обзор на редактор кода Visual Studio Code и покажу вам его функции и возможности. Этот подробный обзор на редактор VS Code нацелен на то чтобы продемонстрировать вам на реальном примере всё на что способен редактор VS Code. Так же я покажу свой набор плагинов для Visual Studio Code и вкратце расскажу про эти плагины.
Плагин Emmet в редакторе VS Code встроен по умолчанию!
✔Мои плагины:
Beautify
Bootstrap v4 Snippets
Live Sass Compiler
Live Server
Russian Language Pack for Visual Studio Code
Sass
✔Советую посмотреть:
Расширения и Темы в редакторе VS Code: • #2 Расширения (плагины...
Обзор редактора Brackets: • Самый подробный обзор ...
Видео уроки по Sublime Text 3: • #1 Установка и запуск ...
Подробный обзор плагина Emmet: • #8 Лучшие сокращения E...
Курс "Frontend разработчик на HTML, CSS и JavaScript": stepik.org/z/1...
Курс "Тренажер по вёрстке, плагин Emmet": stepik.org/113654
Все про редактор Visual Studio Code: • Visual Studio Code, на...
⚡️ Эксклюзив на Boosty - boosty.to/itdo...
💡 Telegram канал - t.me/itdoctor_...
🎥 Курсы на Stepik - stepik.org/use...
💰 Донаты на ЮMoney - sobe.ru/na/itd...
ВКонтакте - itdocto...
Яндекс Дзен - zen.yandex.ru/...
Rutube - rutube.ru/chan...
#vscode #visualstudiocode #visualcode #itdoctor
Бесплатный курс по прокачке своей скорости вёрстки - "Тренажер по вёрстке, плагин Emmet": stepik.org/113654
Курс Frontend разработчик на HTML, CSS и JavaScript: stepik.org/z/113402
Удивительно полезные пояснения. В других видел сложно объясняют и много непонятного.
Огромное Вам спасибо за этот обзор настроек.
Великолепный рассказ!!!! Грамотно, системно, доходчиво.
Спасибо! Очень познавательно. Автор хорошо говорит, приятно слушать.
Огромное спасибо! Очень лаконично и понятно.
Круто! Спасибо!
Жду продолжения))
автор молодец. по самому нужному прошелся.
Спасибо за обзор !
Ну просто супер :-) Такого хорошего описания VS Code я нигде больше не встречал. Пока изучаю Less, SASS может вообще не пригодиться :-) Ну и Будстрап и всякие заморочки я до них пока не дошёл. С меня лайк. На канал я уже подписался :-)
Большое спасибо
Спасибо большое за работу! Хотелось бы аналогичное видео про NetBeans...
Нет лучше/хуже.
Есть каждому своё!!!
Очень здорово! Спасибо!!
👍👍Полезное
спасибо за помощь
пожалуйста
Спасибо огромное. Всё предельно понятно, по полкам. Как же долго я искал такой канал))
И вам спасибо
Спасибо большое!
Вообще уважуха, спасибо, подписался
вам спасибо
хороший обзор, подписался
Спасибо!
спс я понимаю что видео уже прошлых годов но все же половина плагенов у меня стояло! А другая половина наверное уже наших годов но все же видос зашел)!
Придется изменить комментарий, так и нашла как исправить проблемы на англоязычном канале, но тем не менее переход с brackets на VSC, кажется болезненным, Live Server хоть и заработал, но то что оно открывает основной браузер кажется не очень удобным, интерфейс так же кажется перегруженным, возможно и перейду - если появится более подробный видеокурс... но если у brackets continuous останется поддержка сообществом то может и не стоит переходить. Очень нравится редактор.
Хорогший обзор сделал. Спасибо.
я так же сказал "пусть он будет HTML" - но поле выбора типа у меня не появилось :)
День добрый !
Классное видео, мне понравилось. Даже помогло с некоторыми вопросами по этому редактору.
но у меня возник вот какой вопрос: у меня стоят 3 поисковика, для разнообразия, google/firefox/microsoft edge.
когда в терминале выбираешь команду "запустить активный файл" (я его чуть настроил на сочетание клавиш) автоматически срабатывает GOOGLE/
Подскажите пожалуйста, а как настроить дополнительно на срабатывание firefox-a или любого другого поисковика?
Ведь в разных браузерах , иногда по разному отображается.
С уважением, и надеждой на понимание.
Спасибо за видео. Вы меня убедили :) Перешел на этот редактор с sublime text 3. У меня вопрос. Поставил плагин Live Sass Compiler. Он у меня включен, но снизу не отображается значок Watch Sass. У кого-нибудь было такое? И как это решить? Например проблем с плагином Live Server не было. Значок отображается внизу и прекрасно работает. ЗЫ: Канал полезный. С меня подписка ;)
Бывает иногда такой баг, не понятно с чем связано, у меня и с Live Server такое иногда бывает. Можно нажать F1 написать live sass и выбрать Without Watch Mode. Так можно вызывать любые настройки и плагины.
Прописал эту команду. Справа внизу вышло сообщение об ошибке: command 'liveSass.command.oneTimeCompileSass' not found
Live Server установили? он нужен для работы Live Sass. Проверьте расширение файла оно должно быть .sass или .scss если не поможет удалите эти два плагина и установите заново
Всё спасибо. Я понял, в чём моя ошибка была. Я думал этот плагин Live Sass Compiler будет всегда включен внизу. А у меня в текущем проекте не было файлов с scss расширением. Запустил проект, в котором использовал препроцессор sass и значок этого плагина появился. А я уж 2 раза переставлял его и проверял настройки😆
Подтверждаю) Есть такое иногда
Классно! Про Git когда планируете рассказать?
Уже рассказываю тут: czcams.com/play/PLuY6eeDuleIOMB2R_Kky05ZfiAx2_pbAH.html будет еще несколько уроков в этой серии.
Хороший редактор. Надо было только еще список плагинов под видео оставить
добавил
В нем не плагины, а расширения.
@@zordq *Рука лицо*
Spoki Mo что?
@@zordq Что плагины, что расширения расширяют одну и ту же программу новыми возможностями, по факту это одно и тоже хоть и есть определенная типизация.
Спасибо, очень полезно. Скажите, как Вы настроили верхнюю панель окна VS так, что над панелью опций (Файл - Правка - Выделение) отображается еще одна строка, в которой прописывается открытый в данный момент файл или выполняемая операция? У меня они расположены в одну строку, что не очень удобно.
сейчас редактор просто обновили и сделали немного по другому
Нихера не понял про таинственные пассы с появлением строки для ввода формата файла и работе эммет в точке хронометража 3:37.
И правда хотя бы объяснял что нажимает, а то как будто сам себе рассказывает. И я такое у него уже не первый раз замечаю.
я нашел ответ на этот вопрос в гугле меньше, чем за минуту.
Редактор сказочный! MS просто снимаю шляпу!!!
Добрый день. Спасибо за очень интересное видео. Но я не могу найти как можно подключиться к хосту своему, чтобы было удобно работать в данном редакторе как например в Storm? Есть ли у вас такое видео записанное? Прикрепите пожалуйста ссылку
не совсем понял ваш вопрос
Не ясно, как был развёрнут html-шаблон нового файла(вначале 3:20). Как был установлен тип .html ?
там внизу был надпись обычный текст я туда нажал и потом написал html
когда я пишу
шлях к картинки непоказивает, я немогу вибрать из папки изображения нужно вручну вписувати
Не пойму почему при печати стилей не появляется выпадающий список с доступными свойствами.
При печати пути к картинке не появляется список с доступными картинками в папке.
При вводе первой буквы хтмл тега не появляется список тегов на эту букву.
Кажись я понял, нужно нажимать Ctrl+Пробел и тогда появляется список. А почему при печати без нажатия не появляется?
Установлен плагин All Autocomplete, но что то автоматом при вводе не выдает список. Нужно нажимать Ctrl+Пробел.
Нашел причину. Настраивал по видео другого автора, и он сказал в настройки вписать
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
},
и по этому не работало.
Привет!
Я только как месяц начал учить html и css...И решил по твоему видео перейти в этот редактор
Вопрос:
1.В Брекетс например когда я выделял текст я мог его обгорнуть в тег,по моему по команде Alt-Schift-A...как здесь дефолтно???ну не могу найти...
2.В Брекетс если например забыл добавить закрывающий тег..светились красным что ошибка!
Здесь не показует и не выдаёт ошибку внизу...((может расширение какое нужно??
Приходится копировать и перепроверять через Брекетс не забыл я что ,не пропустил...
Подскажешь???
1. marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
2. эту проблему не знаю как решить, обычно тег закрывающий создается сам и этого хватает, дальше просто пишется код внутри между открытым и закрытым
@@ITDoctor спасибо!)
Вам бы создать плейлист и оставить сслку на него)))
Что бы люди не путались а р-р-раз и все они в плелисте))))
Плейлист по vs code есть давно. Раздел плейлисты и там сразу видно.
@@ITDoctor ой извиниет😅
Я имел в виду под видео если что
😅
@@the_evil_dreams ок
Круто! Спасибо! а PHP как работает?
Подскажите кто-ниб. Где найти Go live (переход в браузер)?
в нижней части редактора, работает только если выбран файл .html в данный момент. Иногда бывает баг что нет этой кнопки, тогда жмете правой кнопкой на html файл слева в древе файлов и выбираете Go live
Дружище, никак не могу разобраться, как выводить свой код в браузер для изменения и корректировки. Про плагин Live server с командой Go Live всё понятно и у меня даже получилось вывести скопированный код рандомной странички и изменить, но сайт вывелся не весь, а только текст без графического оформления. Что я сделал не так?
Будь ласка підкажіть коли я воджу npm install в термінал виводить таке повідомлення( "npm" не является внутренней или внешней командой, исполняемой программой или пакетным файлом ) що робити
У змінну середовища ОС PATH додай шлях до npm. Наприклад, C:\Program Files
odejs
так же сказал "пример очень быстрой вёрстки" - контейнер, строка и столбец не появились :)
Подскажите как в этом редакторе сделать горячие клавиши как в sublime text. Чтобы например мог обернуть что-то в тег или же выбрать содержимое между тегами?
именно насчет этих функция не знаю, но я почти уверен что есть в VS Code такие возможности надо просто зайти в настройки горячих клавиш и поискать (может просто не заданы клавиши для этой фичи), а так же можно нажать F1 и поискать в наборе готовых инструментов по тематическим словам. например вот так. prntscr.com/luuv80
@@ITDoctor Если вас сильно не затруднит, не могли бы посмотреть такие горячие клавиши.Я не смог найти среди русских. А в английских я ничего не пойму(
@@ilya9930 Вообщем нет таких функций в VS, вот плагины в помощь, htmltagwrap - обертка в теги (alt+w) и expand-region
- выделение текста в тегах (ctrl+w)
Обворачивание есть. Точно не помню, в поиске набери wrap и/или что то аббревейшн на английском. Потом надо назначить свои горячие клавиши
у меня внизу панели инструментов не отображается Go live и Wath sass может знаете в чем причина?
Бывает иногда такой баг. Приходится вручную вызывать через меню ctrl+shift+p
у меня почему то html не ссылается на файл css в коде Visual Studio? В чем причина подключил правильно в сублемейт 3 работает
На винд7 уже не устанавливается этот редактор.
Привет у меня почему то не открывает одновременно браузер и редактор пытался открыть свой проект, но почему то открылся файл css в браузере, а не мой сайт, который я делал
Пожалуйста помогите найти ваше описание как воспользоваться файлом JSON для настройки VSCode
в новой версии редактора вот так prnt.sc/pb5y37 (в принципе изменился только значок) Сначала в меню нужно открыть Файл/Параметры/Параметры
А как просматривать результат кода в самом vs Code?
Так привык к саблайму, трудно перейти на что-то другое
А есть ли плагин для сохранения своих сниппетов кода ?
Видео про сниппеты: czcams.com/video/PU3FUNoNXKw/video.html
Подскажите, есть ли VS Code возможность быстро редактировать стили как в Brackets по ctr-E? Может расширение какое-нибудь есть?
нет это особенность Brackets. Тае есть палитра цветов вшитая она вызывается не по ctrl+e, а просто наведением на код цвета в CSS
@@ITDoctor при наведении на цвет не показывает выбор цвета как у вас в видео, как ее добавить?
Alt+Shift+F выравнивает если код html в html "лежит" , а если html в PHP лежит, то как выравнивать?
плагин Beautify если установлен то жмете F1 -> Beautify -> HTML
спасб, всё выравнивает )
А можно ли настроить цвет тегов в теме Dark+?
Bootstrap omg... Как можно использовать этот мега избыточный фрейм?
Подскажите пожалуйста, как настроить перенос на новую строку закрывающей фигурной скобки }, в файле css, при компиляции sass, и перенос на новую строку следующего правила.
вы можете в файле css нажать alt+shift+f и весь документ отформатируется со всеми переносами. Я никогда это не настраивал для sass, потому что не вижу смысла.
точно же!!!! я затупил, спасибо. я все настройки проштудировал.....))))
пожалуйста
У кого здесь в комментарий есть ссылка, просмотри. В настройках можно задать:
Format can be expanded, compact, compressed or nested. Default isexpanded.
Вот github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
Здравствуйте! Скажите пожалуйста. Как сделать как у Вас в редакторе справа быструю прокрутку по файлу?
нужно включить миникарту в настройках. так же можно в файле setting.json вот такой строкой prntscr.com/mci0mp
Вообщем то крутой редактор. Но пока не разобрался как работать с сайтом по ftp
Ознакомьтесь с вот этим расширением. marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync
Я сам с ним не работал, потому что привык по старинке, Total Commander или FileZilla
sftp использую, удобное расширение
Как выбрать браузер для запуска после нажатия GoLive?
Снимаю вопрос, разобрался. В настройках плагина можно выбрать браузер.
Вопрос: 1 как поменять язык? гуглю не выходит.2 emmet работает с интернетом или нет. Сделал как вы на sublime text выключил интернет не работает.
Плагин russian language pack для руссификации (полный список плагинов в описании). Интернет не нужен для emmet первый раз такое слышу.
Подскажите пожалуйста, как в плагине *LIVE SASS COMPILER* изменить путь куда будут компилироваться файлы.
Просто когда компилируется все в одну директорию не особо удобно..
Изучите внимательно здесь (toster.ru/q/581979) должно помочь. Все настройки выполняются через json файл конфигураций
@@ITDoctor только не могу понять, а где этот json файл конфигураций расположен?
@@MrReflection540 в настройки редактора. там справа вверху есть три точки нажимаете и выбираете открыть файл setting.json, и вписываете то что по ссылке на скриншоте. все работает. сам попробовал. prntscr.com/lm4l3w
@@ITDoctor всё, понял, огромное вам спасибо
как поменять бразер с експлоера на хром когда нажимаешь Go Live ?
открывается тот браузер который в ОС установлен по умолчанию, по крайней мере у меня так. Но в настройках редактора можно поискать (конкретно настройки этого плагина) там для каждого плагина можно все настраивать в удобном интерфейсе
Emmet в Sublime Text срабатывает на "Tab", а здесь "Ctrl + пробел" ?
tab тоже работает но если курсор сбить или удалить текст то нужно ctrl+space что бы вызвать окно с командами
Tab в VS Code работает
а какие в маке горячие клавиши будут?
у меня этот редактор запускается только если ноут подключен к интернету. Без подключения к интернету не запускается. Вы не знаете в чем дело?
очень странно, впервые слышу такое
@@ITDoctor на сайте есть версия visual studio code без установки (zip файл). можно установить так. но результат такой же. у меня на этом ноуте oem версия windows. я ее переустановила. сделала так, как советует microsoft. посмотрела лицензионный ключ - он совпадает с предыдущим. а поставила на старый ноут, где у меня коробочная версия windows - там все нормально.
вопрос, а как поставить русский язык?
Я же показывал. Нужно установить Russian Language Pack в расширениях
почему-то Live Server не показывается в строке состояния ?
иногда бывает такой баг (неприятно). пробовал перезагрузку редактора, так же иногда помогает уменьшение окна редактора и обратное увеличение. так же можно запустить правой кнопкой по файлу в сайдбаре (на файл html)
На самом деле всё оказалось просто. Нужно не файл отдельно открывать, а полностью проект (папку). Чтоб она оказалась в окне проводника vscode. Тогда Live Server стартует нормально. По крайней мере у меня так.
НИКТО НИКТО НИКТО в рунете не может снять видео как подключаться к SFTP удаленным серверам, и какое расширение при этом применять, или есть что-то из коробки,..
обычно все используют что-то типа FileZilla и подключаются без проблем.
@@ITDoctor нет, что бы редактировать файлы прямо на сервере
@@xakerfsbable если честно я никогда так не делал. редактирую файлы потом их заливаю, или уже через движок всё редактирую.
@@ITDoctor Нашел, называется SSH FS
@@ITDoctor А зря, быстрые правки очень удобно делать и к базе таким же путем соединятся.
в тип файла там с++ их два какой нужен я просто только учусь
у меня там по одному для C, C++ и C#, так же есть Objective С и Objective C++ но это другие немного языки.
@@ITDoctor Какой включать я не понел я вообще не нечего пока не понел но пытаюсь
@@ITDoctor и можешь подсказать я не могу найти инфу как запустить код. Вот написал ты код и как его запустить
@@MEXAHIK--99 вы на c++ пишите? Конечно можно настроить сборку проекта и подключить компилятор. Но для начинающего будет проще поставить visual studio comunity она бесплатная и там уже всю встроено и предназначено что писать код на c, c++ и c#, а vs code он для веб разработки удобен
@@ITDoctor мне сейчас главное понять что и как и научится
Да редактор хороший, но ресурсов много ест как для редактора
ну он написан на Electron.js это не удивительно
Сколько весит этот редактор?
около 50 мб. до установки.
какие кнопки горячие нажимаешь хоть говори
обычно и говорю и на экране показываю сочетание клавиш. может пропустил просто. Что именно вас интересует?
Установил этот редактор!?
Не как не могу найти фунцию-Открыть в браузере
Я уже перепробывал ВСЕ???
В саблайне работаю Все просто
Здесь ТЕРМИНАЛ (как его настроить???.Как открывать???)
Пожаллуста сделайте урок по работе с ТЕРМИНАЛОМ
НЕПОНЯТНО НЕ ЧЕГО...Пока САБЛАЙ Н ЛУЧШЕ НА ПОРЯДОК
ЗАЕБАЛСЯ УЖЕ ГУГЛИТЬ !!!
На Ю -тубе все ОЧ.заумно
ПОМОГИТЕ !Ну не как не освою ПРОСТО В УЖАСЕ
вы видео полностью смотрели? там есть и про то как в браузере запустить (нужно плагин поставить live server) и про терминал (всё элементарно вверху в меню терминал жмём новый терминал и пользуемся)
@@ITDoctor Он СТОИТ! А вот что нажать НЕ СЛОВА!
Я ваш канал считаю лучшим И в основном в нем я
ищу новые технологии
Вот потому мне важно видио о терминале о работе с ним в этом редакторе
О плагинах в нем
в шторме можно открывать даже макеты
Вот потому прошу сделать НОВОЕ ВИДЕО !
ВЫ ОТЛИЧНЫЙ ПОПУЛИЗАТОР ! Даже лучший !!!
Вот потому лучше записывайте видио о новых технологиях
А не курсы по html(ими забит Ю туб)
Зараннее благодарен ! А как открывать в браузере ??? Я поставил этот ЧЕРТОВ ПЛАГИН Он сука без перевода???
Я сохраняю код вхожу в дерикторию И ТОЛЬКО ТОГДА ОТКРЫВАЮ
Я не новичек в ВЕБЕ! Но такой способ ПРОСМОТРА СВЕЛ ВЕСЬ РЕДАКТОР НА НЕТ
Я использую Брекетс для верстки Но для вставки на мою джумлу он довольно СЛАБ Потому и ищу ИДЕ по круче!
Очень прошу онем видос про работу с плагинами
БУДУ БЕЗУМНО РАД!СПАСИБО ЗА ОТВЕТ
@@user-hg9en1bj4d внизу кнопка "Go Live" в видео я тоже показывал, и говорил куда нажать. Не сильно внимательно видимо смотрели. С терминалом в видео курсе по git работали. для других целей не вижу его применение.
@@ITDoctor Мне 67! Да и освоить новое проблематично
Но я у вас и сам нашел!
Вам СПАСИБО !
Гитом не пользуюсь УСЕ ПО АНГЕЛЬСКИ А для верстки Брекетс за глаза...
Я даже ПСД в нем редактирую для верстки
Я вас наверное ЗАМУЧИЛ? Но я самоучка
Может подскажите ГДЕ найти плагин такой же для VS Code
В расширениях его НЕТУ
Благодарю и ОГРОМНОЕ СПАСИБО ЗА ИНФУ
ДАЙ вам БОГ ВСЕГО ЧТО ХОТИТЕ С праздником ВАС и СЕМЬЮ
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
в brackets тоже есть czcams.com/video/gWv_qN482Jg/video.html
czcams.com/video/lx8or38iOg4/video.html
Брехня полнейшая . EMMET не будет работать без предварительной настройки.
Глючный редактор. Не советую.
Спасибо за видео, буду слезать с PhpStorm и PyCharm, майрософт всех уделали, лучше редактора я еще не видел, раньше я думал jetBrains делают топы, но я ошибся.
судя по его обзорам в разных местах, именно так и выглядит все. но я с трудом смог пересилить себя, чтобы перейти с нотепад++ на этот вс код. даже в этом блокноте все гораздо удобнее для простого набора букв и работы с текстовыми файлами кода.
Спасибо за обзор.