VS Code - настройка, установка, плагины ✅ Подробный гайд за 30 минут про VS Code

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

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

50% 1

🔥 Интенсив «Первый заработок на создании сайтов»
Участие бесплатное, но необходимо зарегистрироваться:
frontendblok.com/intensives/start
Таймкоды:
00:00 Вступление
00:51 Установка
01:19 Русификация
02:45 Обзор интерфейса
04:47 Вкладка Explorer
06:33 Работа с WorkSpace
08:03 Вкладка Search
09:41 Работа с Git и Github
12:09 Вкладка Run
13:01 Вкладка для установки плагинов
13:30 Поле для разработки кода
18:21 Список плагинов для установки
26:51 Смена темы VS Code
VS Code - code.visualstudio.com/
Статистика использований - stackshare.io/visual-studio-c...
#ityoutubersru #vscode #visualstudiocode
✅ Поддержать канал - / @annblok_webdev
✅ Instagram - / annblok
✅ TikTok - / annblok_webdev
✅ Сайт - tpverstak.ru
✅ ВК - tpverstak
✅ Telegram - t.me/tpverstak
✅ Чат Telegram - t.me/tpverstakchat
Обучение Frontend-разработке - frontendblok.com/
Frontend Book PDF - tpverstak.ru/frontendbook
Задать вопрос про фронтенд или верстку - frontendhelp.me/ru

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

23 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Всегда рада вашим новым роликам.Смотреть очень интересно и познавательно!

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

очень все доступно и главное полезно. Все четко, без лишней информации, по полочкам. Супер, полуил истинное наслаждение просматривая. КАк новичок , смотрел согромным упоением и безгранично благодарен автору ( девушке ) за материал.

@severs6572 2 года назад

подписался, лайкнул, комментирую). Видео стоящее, спасибо. Всё четко, без эканья и всяких кривляний. Грамотно и по делу. Спасибо. Буду настраивать и работать.

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

Класный видеоролик, теперь шарю в настройках. Спасибо большое)

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

Жаль, что "дошел" до твоего канала так поздно. Крутая подача информации. Умница!

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

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

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

Рада, что вы нашли что-то новое для себя 🤗

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

Инфо по плагинам вообще огонь. Спасибо!

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

отличный гайд по настройке VSCODE как раз то что искал!

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

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

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

После Toggle Word Wrap открылось второе дыхание. Спасибо

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

Было интересно смотреть спасибо за толковый обзор автору канала лайк и респект!

@user-rl6eo4bt6t Год назад

Наконец то нашел видос с грамотным и понятным объяснением!)

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

Видео обзор супер! Каналу большой респект!

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

Большое спасибо за обзор и инструкцию!

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

Очень годный и полезный обзор! Узнал много нового, хотя до этого думал, что отлично знаю и применяю необходимый функционал VS Code. Благодарствую, Ань! Лайк поставил, подписан давно и колокольчик активен постоянно.

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

Спасибо 🤗

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

@@annblok_webdev по-моему, данный твой обзор - лучший из всех, что есть на данное время. Всё по сути, без "воды" и именно тот функционал, который действительно нужен и делает пользование VS Code очень удобным. Благодарю за труд, Ань! Буду теперь пользоваться именно твоими советами в настройке и использовании программы.

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

Рада слышать ☺️

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

огромное спасибо за видео. Достойный контент))) Особенно плагины топчик.

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

Спасибо за видео, всё супер! Увидел Ваш ролик случайно и не пожалел, что посмотрел. Всё понятно, компактно и по делу. Спасибо.

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

Спасибо за отзыв 😊

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

Спасибо за видео. Как и многие пользуюсь давно VScode но про некоторые моменты узнал только из видео. Анна спасибо за ваш труд!

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

ждал такой обзор, по VS Code больше чем свою зарплату))) ООчень полезно, спасибо

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

🤗🤗🤗

@oksana-ua75 3 года назад

Спасибо, все очень подробно.

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

Какой чудесный у вас носик.

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

Благодарствую! Очень полезно

@----4402 3 года назад

Спасибо за рекомендации и подробное объяснение. Пригодится.

@TamaraNikolaevna 8 месяцев назад

Анна, спасибо за видео и отдельное спасибо за тему Night Owl!

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

Спасибо большое! Узнал много полезного, хотя сам работаю в vs code уже немало времени

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

Рада, что нашли что-то полезное для себя 🤗

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

Вполне с вами согласен, очень интересное, информативное видео.

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

Спасибо вам за видео ролик, было полезно.

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

🔝👍🏻 великолепно ,спасибо Анна !)

@billgates8626 Год назад

Самый крутой обзор VS Code, который доводилось видеть. Предельно конкретно с акцентами на правильных местах. Просто снимаю шляпу и ... подписываюсь (хоть я и не фронтендер)

@Zero_Espada 2 года назад

Большое вам спасибо за то что вы делаете, вы мне прям Америку отрыли если честно. С каждой информацией которую вы даёте мое лицо становилось все светлее и светлее))) правдой некоторые моменты меня а азодачили, в связи с эти большая просьба не могли бы вы сделать отдельное видео по тому как работают плагины как их настраивать, ну так сказать всю подноготную показать для чайников особенно. К примеру я так и не понял как работает Polacod, и как скомпилировать live Sass Compiler с CSS. И ещё почему-то у меня не вышел раздел Clone repository. Извините что комментарий вышел такой длинный))) ещё раз спасибо за все ваши видео, смотрю их и пересматриваю

@yurinedvedski6767 Год назад

Приятно отметить, что мой лайк 3000. Удачи в продвижении канала :)

@annblok_webdev Год назад

Спасибо ❤

@user-mo9wf1dl5u 3 месяца назад

@@annblok_webdev подскажите пожалуйста, почему при запуске кода через code runner во входные данные выводятся вопросики, как это испарвить? только это пайтон

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

Канал отличный, много видео с практикой. А подписчиков не так много, жаль. Спасибо Аня и больше Вам подписчиков!

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

Зовите друзей 😄

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

Все сказала, что я хотел написать. Большое спасибо

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

I think Anna should try to make a channel in English? Why not, maybe yes? Анна может ещё на английском языке сделать канал про JS ?Спасибо

@user-bt2qk6tv3l Год назад

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

@user-ii7qn2ur7l 7 месяцев назад

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

@olgam535 Год назад

Очень толково! спасибо!!

@AZ993k Год назад

Спасибо, полезно очень. Много фишек почерпнул

@MikhailRasha Год назад

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

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

I watched an interesting interview with pleasure. Thank you. I liked the like channel. I look forward to new releases

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

Большое вам спасибо, за то что сняли столь полезный ролик по настройке VS Code.

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

Аня спасибо за материал! Подписался, поставил лайк. Буду просматривать канал!

@annblok_webdev 2 года назад

❤️

@user-te7ml7rv8j 6 месяцев назад

Действительно полезный гайд. Начал изучение фронтенда (перед этим закончив изучение бэкэнда) и колеблюсь с выбором среды. Вебшторм от ДжетБрэинс - пробно всего 30 дней, браузерные среды - неудобны и ограниченны, пайчарм после бэкэнда - не совсем подходит. А ВСД кажется более привлекательным. Особенно после Вашего видео. Спасибо за обзор. Полезно :)

@andreasshev5748 Год назад

Аня, большое спасибо вам!

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

С VS кодом я уже года 2 работаю, если не больше. Использую плагин С/C++ и компилятор MinGW для компиляции программ, так как работаю программистом С++. Front-end изучаю для себя, можно сказать как хобби) За видео и плагины спасибо, лайк!

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

Спасибо за дополнение 😊👍🏻

@depishdev6942 11 месяцев назад

К чему такие извращения с MinGW ?

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

Спасибо огромное) Помогли!

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

Я рада 🤗🤗🤗

@user-cl9dm8vq1n 2 месяца назад

Спасибо. Было очень полезно

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

Умница да красавица, просто нету слов.

@ramyora9531 2 года назад

молодец! подробно! доходчиво!

@annblok_webdev 2 года назад

🤗

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

Спасибо за обучение, очень мало сейчас такого крутого контента на ютуб

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

Сам пользуюсь PHP Storm, но за видео спасибо))

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

Про продукты JetBrains в скором времени тоже будут видео 😊

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

Лучший совет за год, Переставить везде язык на английский. Спасибо, так и поступлю!

@slava04111982 2 года назад

Отличный обзор 👍

@annblok_webdev 2 года назад

Спасибо 🔥

@slava04111982 2 года назад

@@annblok_webdev спасибо Вам большое за то что вы делаете для нас.

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

спасибо!

@grimoldman8985 2 года назад

Всё просто и понятно. Спасибо Аня. Ты супер. Лёгкая подача материала, всё по пунктам без лишнего мусора. Удачи тебе в развитии контента.

@princessmary5556 2 года назад

классный ролик!

@papadenteam Год назад

Спасибо!

@denisnikachev5742 Год назад

Спасибо:)

@polinazelenskaya866 Год назад

спасибо!))

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

Спасибо за prettier))

@grom_plays Год назад

Смотрю, учусь, запоминаю. Ничего не предвещало беды. Крошки 15:48 порадовали больше всего))

@annblok_webdev Год назад

Хлебные крошки - термин из веб-дизайна

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

Спасибо за обзор! Реально подробно и за 30 минут. А в каком сезоне и серии кремниевой долины был этот кадр?

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

Спасибо! Сезон 5, серия 8

@IZHGTUmekhanik Год назад

Спасибо за видео гайд! Вопрос от новичка какой плагин установить что бы облегчить навигацию по коду ? вижу есть сбоку панель структура - она только показывает список объектов/функций но мне надо в коде создавать метку и подписывать участок кода и что бы она отображалась в оглавлении - какой плагин так может?

@akhmad_goytinski Год назад

Огромное!!! Спасибо за обучение!!! Вот вопрос - какой то плагин создаёт dist папку с файлами. Как отключить создание dist папку с файлами? С уважением к Вам Ахмад

@evgenykochura7147 2 года назад

Анна молодец!

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

Ой, я согласна, что если имеешь дело с каким-то языком программирования, то обязательно надо использовать intellisense.

@user-lq6sn5pe7t Год назад

круто😄😄😄😀😀

@kerusdc8322 2 года назад

скажите, какое есть расширение vscode для автоопределения кодировки? или есть команда? а то устал менять кодировку с utf-8 на кириллицу 1251 в одних файлах и наоборот в других

@sargisavetisyan8485 2 года назад

Ты классная😘

@euler_project 11 месяцев назад

Расцеловал бы Вас)) очень помогли

@kzntv1801 2 года назад

Здравствуйте! Подписался, лайкнул, колокольчик )

@annblok_webdev 2 года назад

Спасибо! 🔥

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

Предпочитаю с git работать через терминал. Если научиться нажимать готовые кнопки в VSCode, то когда будет надобность работать в другой IDE, можно растеряться. А через терминал git везде одинаково работатет.

@SIPIKEXE Год назад

подписался👍

@alexmcgregor8072 2 года назад

Анна, какую версию проги вы используете. В моей 1.63.2 при вызывании окна Add Folder Workspace открывается папка с содержимым моего компа и вызвать папку online-test не удается . Я новичок, может чего-то не понял?

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

Доброго! Как у Вас решен вопрос с синтаксисом ES6, который этот глючный VS Code не хочет воспринимать?? Я не смог решить эту проблему, а клонировать и комиттить можно хоть из cmd. ЗЫ Anna Kubov, Анна Блок who is the else?

@alexanderbrown7758 2 года назад

10 из 10

@annblok_webdev 2 года назад

😍

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

Так; спасибо Анна но вот вопрос создал новую вкладку для того что бы клонировать репозиторий но кнопка не нажимается а вот в первой вкладке написано инициализировать репозиторий и предлагают в в тексте изучить документацию, установить Git поискать расширение в Marketplace! Подскажите что надо сделать пока эту установку я пропустил! Спс

@val8gris434 Год назад

Жаль, конечно, что не было "экскурсии" на русском варианте VC Code ... Для меня это важно, поскольку я не знаком с английским языком (в школе изучал никому не нужный испанский) ... и потому, русский вариант VC Code был бы очень кстати, для начала :))) Потом, конечно перешёл бы на английский вариант, но .... это было бы потом! А сейчас, для начального понимания и для "затравки" интереса к Питону, было бы полезным для начинающего программера без знания англицкой мовы или просто Тестировщика начать изучать Питон через русскоязычный интерпретатор VC Code. 🙃👍 А за ознакомительный видос - пасибки! Лайк и Подписка! А ваще, Анна есть надежда, что Вы сделаете ещё один ознакомительный видос, но с РУССКОЯЗЫЧНЫМ интерпретатором VS Code? Я ведь не один такой, отсталый от жизни ... 🧐 При Советском Союзе, когда я учился в школе, нас, не знающих буржуйского английского было сотни тысяч если не миллионы человек 🤔

@VIJana79 Год назад

а как вы собираетесь учить программирование без "буржуйского" английского? там все переменные, все методы на английском идут.

@eugenesmith9940 Год назад

Я так понимаю жизненная необходимость плагина Live server заключается в продлении жизни клавишам ctrl, s и f5? :)

@thedimasss 2 года назад

Красивая девочка. Хоть давно на вскоде сижу, но было что подчерпнуть, спасибо)

@Allan_Kozak 2 года назад

thanks

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

Спасибо за ролик! Подскажите, пожалуйста, как сделать чтобы новый создаваемый файл всегда был html по умолчанию? Он txt по умолчанию.

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

Открыть Settings, вписать в поиск files.defaultLanguage и там в поле прописать html. Или второй вариант - в файл setting.json добавить строку "files.defaultLanguage": "html"

@OlibanumElectum 2 месяца назад

Здравствуйте Анна, скажите пожалуйста название цветовой темы VSC

@denial3874 2 года назад

Анна Блок скажите пожалуйста, а как быстро закомментировать кусок кода ?

@user-vr3vv2nc6g Год назад

Здравствуйте! подскажите пожалуйсто, что нужно сделать чтобы перед кнопкой file появилась кнопка code?спасибо.

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

Добрый день, Анна. Спасибо за подробное и столь полезное видео, но у меня вопрос, сейчас работаю в команде над проектом верстка лендинга в vs code, у напарника написанный код можно посмотреть в live server и у него красивая верстка этот же файл(html scss) у меня поломанный, уже установила кучу расширений, проблема сохраняется. Что это может быть?

@annblok_webdev 2 года назад

Наверно у вас / впереди пути указан

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

Анна, подскажите, у меня после установки расширения SFTP появляется сообщение: SFTP expects to work at a folder.

@samolevich 2 года назад

Можно ли импортировать/экспортировать настройки? Было бы очень удобно

@cathello2900 2 года назад

Я подписался! Благодарю за ролики! Красивая! Замужем? 😅

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

посмотрел и понял ты молодец а то блин методом тыка настраивал

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

Хорошее видео для новичков, спасибо. Один важный нюанс - лучше не давать разработчикам использовать локальные преобразования SASS, Autoprefixer и т.п., потому что у всех могут быть свои разные настройки в разных IDE, что будет приводить к частым git-конфликтам. Сталкивался с этим в компаниях и проектах с десятками разрабов, было неприятно. Такими делами надо управлять через автоматизаторы вроде Gulp или Webpack, храня когфиги в гите, чтоб они у всех были одинаковые.

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

Да, этот вариант, конечно, лучше для командной работы 👍

@andrewchili2108 2 года назад

спасибо! а можно ли как-то сохранить настройки редактора, плагины для переноса?

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

Если имеешь дело с каким-то языком программирования, то обязательно надо использовать intellisense.

@ashishkinru 2 года назад

Воу!

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

Поздравляю тебя с 8 Марта! Желаю тебе сногсшибательной красоты, искренней доброты, несказанного богатства, неземной любви и огромнейшего женского счастья!

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

Спасибо :)

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

Список плагинов: 1. Live server 2. Live server preview 3. File icons 4. Live sass compiler 5. Esstractor for vs code 6. Autoprefixer 7. Image preview 8. Css peek 9. Pretier 10. Auto rename tag 11. Google translate 12. Path intellesense 13. Polacode 14. Git merger 15. Git graph 16. Git lens

@user-oj7zo7ku6p Год назад

Подача хорошая, но скоростная. Я так и не поняла куда вы нажимаете и как подключаете правое окно"live server preview"?

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

А чего у тебя кстати нет ничего о ресет/нормалайз css? Ты же работала вроде верстальщицей и никогда не сбрасывала стили?? Или свой файлик составляла?

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

Как вопрос связан с этим видео?

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

@@annblok_webdev Сорянидзе! Нашел у тебя про сброс мельком.

@morionswizzle 2 года назад

Cкажите пожалуйста, как сохранить файл. Вот вы написали например Hello World, и вам нужно его сохранить, чтобы он отображался в браузере, как это сделать?

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

можно видео про отлатчик кода для Js плз

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

18:01 это помогает только для текущей сессии, после перезаргузки редактора эта настойка не сохраняется, нужно редактировать файл с настройками редактора, что бы сохранить эту настройку после перезагрузки

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

Да