VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучение
VS Code - это бесплатный, мощный, популярный, c кучей дополнений редактор кода. Да что там говорить, сам Facebook выбрал его в качестве основного редактора! Речь сегодня пойдет о редакторе кода Visual Studio Code или просто VS Code. Подробный гайд по настройке программы и расширений. Мы с тобой его установим, настроим, а также применим плагины существенно помогающие в работе! Ну что от слов к делу!
🔴 Внимание! Что бы работала система контроля версий (появился плюсик), нужно установить сам Git (git-scm.com/downloads) или другую систему контроля версий.
Ссылки:
👉 Сайт VS Code - code.visualstudio.com/
👉 Цветовые темы - vscodethemes.com/, marketplace.visualstudio.com/...
👉 Урок SASS/SCSS - • Препроцессор SASS/SCSS...
👉 Урок по методологии БЭМ - • Методология БЭМ за 17 ...
👉 Emmet - emmet.io/
👉 GIT - git-scm.com/downloads
👉 Флаг: --disable-gpu
🤟 Содержание:
00:00:00 - Вступление
00:00:27 - Полное удаление
00:01:00 - Установка
00:01:55 - Запуск на слабом ПК
00:02:29 - Русификация
00:03:07 - Знакомство с интерфейсом
00:22:12 - Установка цветовой темы и пакета иконок
00:23:54 - Параметры и настройки программы
00:30:53 - Установка и настройка плагинов. Часть №1
00:32:18 - Настройка сниппетов
00:36:03 - Установка и настройка плагинов. Часть №2
00:58:49 - Связь проекта с GitHub (Бонус)
01:01:10 - Установка и настройка плагинов. Часть №3
01:04:10 - Важное напутствие!
💪 Список полезных плагинов:
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, ftp-simple, SVG
SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart
no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens - Git supercharged,
Settings Sync
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Ребята, ну я старался! Жду ваши комментарии! 🤟 Содержание: 00:00:00 - Вступление 00:00:27 - Полное удаление 00:01:00 - Установка 00:01:55 - Запуск на слабом ПК 00:02:29 - Русификация 00:03:07 - Знакомство с интерфейсом 00:22:12 - Установка цветовой темы и пакета иконок 00:23:54 - Параметры и настройки программы 00:30:53 - Установка и настройка плагинов. Часть №1 00:32:18 - Настройка сниппетов 00:36:03 - Установка и настройка плагинов. Часть №2 00:58:49 - Связь проекта с GitHub (Бонус) 01:01:10 - Установка и настройка плагинов. Часть №3 01:04:10 - Важное напутствие! Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/
Женя, дополни пожалуйста в описании, что для того, чтобы работал раздел "Контроль версий" слева, обязательно нужно, чтобы был установлен Git (git-scm.com/download) или другая система контроля версий. Иначе там просто прописано, что поставщики не зарегистрированы и никаких плюсиков там не появляется. Не мог понять, почему у меня не так как в видосе. Просто он у тебя уже был установлен и вопрос не возник.
Есть ли смысл изучать С++ в 2020 ? Я честно говоря сам не знаю какой язык изучать....страх что потеряю время так и не добившись результата, не понимаю как правильно найти подход к обучению, языков множество а конкуренция ещё больше....дай совет, напутствие, маленькую подсказку чтобы найти дорогу...
@@user-tu6ok5ts2f я вот думал что надписи на экране будет достаточно)) prntscr.com/ree2wd В описание добавил
Спасибо, с удовольствием смотрю Ваши уроки, на 39 минуте неточность, возможно изменение в настройках livesass, сейчас надо так: "liveSassCompile.settings.autoprefix": [ "> 1%", "last 5 versions" ],
Здравстуите Евгений! Хочу предложить вам идею для видео. Искал я на просторах интернета как подключить шрифтовые иконки font-awesome scss к своему проекту, но у меня ничего не получилось, и вот по гуглил я и так ничего толкового не нашел в русско язычном сегменте да и в зарубежном тоже. Подскажите как это сделать? или может кто то из подписчиков знает отпишитесь.
Я скачал столько плагинов, что сtrl+2 alt , делает мне кофе
Ахах)
☕😆скоро и верстку сам ВСКоде будет делать, мы только на педаль газа будем нажимать, и рулить на поворотах там немного паддинг с лева, чучуть марджин-топ))
alt + f4 делает миньет
У меня еще больше плагинов, при нажатии комбинации ctrl+shift+1 создаётся лендинг :D
Ха, я сделал так чтобы на ctrl + 1 + shift у меня читаются мысли и по ним создаётся сайт, который полностью работает.
Видос по уставке программы начинается с удаления программы)) Это гениально, такого подхода я и представить не мог))) "Забудьте все чему вас учили ранее, сейчас дядя Женя покажет как надо!" Класс Жека!
Спасибо!
Реально круто, я так и сделал
@@MrAznaurov 😂😂😂😂😂
Это оказался очень правильный подход, я вскод 5 раз уже удалила)))
Тебе сколько лет?
Ты добрый и хорший человек, я тебя уважаю․
Спасибо!
первое видео в плейлисте до сих пор, поскольку когда я открываю плейлист, сразу слышу "БЕСПЛАТНЫЙ". радует.
Идеальное обучение по программе, устанавливая плагины тебе сразу же объясняют что они делают, это я называю великолепным уровнем подачи материала. Спасибо за гайд, перенастроил программу под приятное использование.
"Живи! Работай в свободное время" - как на канал с мотивацией попал! Подписался. Незанудная подача материала - так держать.
Спасибо!
Женя буду благодарить тебя бесконечно! как же ты интереснол рассказываешь о таких нужных вещах, столько нового открываешь! спасибо тебе , добрый Человек!
я думаю для отримання базових знань, це один з найкращих менторів, подача та професійність відчувається, дякую за Вашу роботу !
VS Code мой любимый редактор, учусь на нем уже год, пересмотрел кучу аналогичных видео - обзоры, плагины. Посмотрев твой гайд - огорчился... Оказалось что я не знал его и на 10%))) Спасибо от души, реально отличная работа.
Супер! Я рад!
Ага,точно.У меня та же история была с Sublime.
У него есть ролики по Sublime а Vs code а что лучше для начинающего ?
@@ABC-dw6ux что тебе больше нравится. Могу например сказать что некоторые ребята из епам используют vs code.
Евгений, как всегда на высоте! Вот умеешь ты сложное делать простым и понятным. Талант👏
Спасибо!! Твой контент- лучший источник обучающих материалов. Прошел два платных говнокурса по верстке, а потом случайно нашел твой канал на ютубе. Что стало для меня настоящим открытием
Большое уважение к вам и вашему каналу, объём ваших трудов невероятен !
Ну вот как ты так можешь, как ты так умеешь довести до зрителя материал, ведь кучу роликов посмотрел, твой лучший. Жека, лайк тебе даже не раздумывая !!!
Спасибо большое!
Самый топовый канал, обучение на колоссальном уровне. А навыки преподавания с каждым видео все лучше и лучше. СПАСИБО))
Спасибо! Стараюсь
Очень внятно и понятно! Как для новичка. Как раз, шастал по Инету в поисках красивого и удобного интерпретатора языка Python ... Отдельное спасибо, за понятную и безпонтовую подачу материала 🤔👍
отличный гайд по vs code! я бы даже сказал, что это лучший гайд, который я видел и интернете: прекрасно структуированный и очень понятный! человек, делающий такие вещи и выкладывающий их в свободный доступ, достоин огромного уважения! Евгений, спасибо большое!
100%
Титаническая работа, спасибо! Сам пользуюсь VC Code много нового для себя открыл! Видос по GIT очень буду ждать и конечно JS!
Спасибо! Все будет
В последнее время Ваш канал мой самый любимый! Он такой позитивный и полезный! Обожаю))))
Спасибо!
Вау! Из-за предрассудков не использовал VS Code, считая его ресурсоемким и "деревянным", как большинство продуктов Microsoft. Но ваше видео показало, насколько я ошибался. Теперь это мой любимый редактор кода) Спасибо, что продолжаете удивлять и создавать вау-эффект!
Огромная благодарность! Евгений, ваши видео просто клад для разработчиков. Досконально и понятно для любого уровня. Отличная подача! Жаль тут не было про плагины FTP/SFTP.
Спасибо, Евгений! Без твоего ролика я ещё долго не открыл бы для себя этот крутой редактор. Лень было разбираться в настройках, а тут сразу всё готовое!
Пожалуйста!
Мужик большой тебе респект. У тебя талант преподавать. Это первый канал где все объясняют до мелочей. Тебе нет цены!!!
Спасибо!
решил заняться фрилансем и нашел этот канал, такой мотивации у меня еще не было, спасибо!
Женя! Спасибо за информативное изложение материала. Респект и максимальный репост
Спасибо большое!
Единственный канал, где ставлю лайк не глядя! Женя, огромное спасибо, ты большой молодец!
Спасибо! Стараюсь)
Ещё у Исламова канал, тоже оч. крутой. 2 конкурента на ютуб с новым уровнем качества подачи материала. Ещё Дударь, но тот блин тараторка ещё та :-)
бляяяя... тупо жиза, захожу на видоськ смотрю поставил ли лайк если не поставил ставлю и начинаю смотреть 🥰
Аналогично, на этом канале ставлю лайк не глядя.
я тоже
Ты лучший!)) Вчера сделал домашку из последнего урока по флексам! Спасибо тебе за твой большой труд, Женя!!!!!
Супер! Я рад!
Только начал программировать и все это для меня в новинку но не нужно быть гением чтобы понять как ты старался, большое спасибо и уверен это не последняя благодарность.
Супер! Очень полезное видео. Особенно для тех кто недавно в теме. Канал замечательный! Оооочень много полезного и бесплатного. Друзья всем советую смотрите, учитесь, а главное "ЖИВИТЕ а работайте в свободное время!"
Отдельное спасибо за то, что научил синхронизировать git в VS code и на сайте!
Пожалуйста!
Невероятно информативно, ёмко, без воды) буду изучать все видео! Спасибо за ваши труды. За тайминги отдельная благодарность))
Я рад!
Качество материала и мотивация - на высоте! Так держать, молодец! Использую VS Code - привык и мне нравится, плагинов много, с Git проще работать и вообще крутяк. ;-)
Смотрю данный ролик в свободное время), чтобы восполнить пробелы по настройке VSC. Спасибо Жека!
Лайк не глядя за труды! Вечерком будем смотреть) За тайм-коды отдельное спасибо!
Спасибо!
Как всегда на высоте! Это очень круто! Не ожидал что на столько удобно будет в VS) За настройку нижайший поклон!
Спасибо! Рад что полезно!
Спасибо огромное! Пересмотрела несколько видео по настройке VS code и плагинам... Ты - лучший! Удобно, понятно и всё по делу! и красиво! :))
Парень, ты крут ! Я б даже сказал что ты БОГ в этом ! Смотрю довольно часто, подписан, пробую себя в этом деле. Начал курс , понемногу продвигаюсь!
Я очень люблю редактор VS Code и это самый лучший его обзор и знакомство с программой! Большое Вам спасибо! Ваши выпуски просто идеальные!
Спасибо большое!
@@FreelancerLifeStyle вопрос любителям и знатокам вскоде. я его уже во многих местах задавал, но так и не получил ответа. может тут знают и дадут ответ. я долго пользовался блокнот++. все в нем устраивало. но решил перейти на современные рельсы и использовать вскод. но мне в нем очень не хватает такой функции, как нажав правой кнопкой мыши, прокручивать колесиком к предыдущему или следующему недавно использовавшемуся файлу. возможно ли тут так или как-то подобно? поскольку бывает необходимо открыть не ту вкладку, которая рядом, а которая очень далеко и через стандартное средство просмотра открытых файлов долго открывать. а в блокнот++ это занимало пару движений, которые я описал. спасибо.
@@romanown1361 ctrl + tab (якщо я вірно зрозумів проблему)
Опа, а вот и годнота подъехала. Всем бегом смотреть!)
Спасибо!
спасибо миллион раз. очень круто, понятно, подробно, интересно. я новичок прям нульцевый. но благодаря вам самостоятельно пишу простые коды уже
Супер! За переводчик вообще отдельное спасибо! Да и настройки за секунду при переустановке - это хит!
Большое спасибо, есть очень много полезных плагинов и все в одном видео, полноценный гайд по VS Code!
Спасибо!
Я бегал по интернету и не нашел лучше , чем у вас. Я только начинаю заниматься программированием . Спасибо вам за то что даете знания , здоровья и счастья вашей семье.
Скок тебе лет?
Мне 12 🤓
Я тоже хочу быть программистом
@@user-nm5gx9uh7w 50
Однозначно лайк 👍 всё доходчиво, понятно и самое главное, нет пробелов... Алгоритм действий последователен! Подписываюсь на канал! )))
Женя, благодарю тебя! ты бесподобный! уникальный ! спасибо тебе за твои труды!
Часовая информация была поглощена взахлеб. Спасибо!
Я рад!
Отличный гайд! Когда необходимы настройки, периодически ищу в видео нужные описания...!!!!!!!Спасибо, Жека!!!!!
Пожалуйста!
Спасибо за лучший туториал из всех, что я прежде видел. Подписываюсь авансом.
Большое спасибо. Как часто Ваши видео спасают меня! Самые лучшие!
отличный гайд. регулярно к нему возвращаюсь! Женя ты как был, так и остаешься лучшим! спасибо тебе огромное!!!
как успехи в программировании?
@@kanekiken6635 программирую потихоньку)
Вы - настоящий молодец! Все очень хорошо! Ура!
Спасибо! Старался)
Я заметил то что,этот канал самый лучший по теме верстки ну серьезно,объясняет всё!
Очень здорово! Все установил, появилось ощущение праздника! Благодарю!!!
Поддерживаю и полностью согласна со всеми положительными комментариями и с тем,что Ваши видео всегда настолько полезные и информативные,что при выходе нового можно, еще его не посмотрев,быть уверенным в отличном качестве и полезности, в правильной подаче информации и в том,что даже я все пойму!!Спасибо огромное за такую работу! Вы - сокровище, а Ваши цели очень благородны!Благодарю Вас за это)
Спасибо большое!
Спасибо большое за видео. Всё очень хорошо разъяснено) Успехов Вам, Евгений!)
Пожалуйста!
Крепкого здоровья! И мотивации делать больше таких полезных видосов!
Спасибо!!!До твоего видео я просто не использовал огромную часть очень полезных фишек,огромное спасибо!!!
Сниппеты 00:32:18 - Большое спасибо за разъяснение!!!
Пожалуйста!
Большое спасибо! Лучший канал на KZhead по теме!
Спасибо!
Перешла с Sublime на VS Code. Твои обзоры прекрасны
Это лучшее руководство по VS Code! Спасибо!
Отлично Женя!!!!! Ты лучший среди русско говорящих учителей!!!!! Очень важно СОДЕРЖАНИЕ -ВРЕМЯ!!!!
Спасибо!
Отличный туториал! Спасибо большое, сэкономил кучу времени )))
Пожалуйста!
Ваши ролики просто супер. Интересно и смотреть, и слушать.
Супер!!! Спасибо!!! Как всегда всё профессионально, доступно, понятно и просто.
Спасибо, Жень, за твои труды! Теперь я на твой канал за мудростью хожу)))
Супер! Я рад)
И ещё дополнение (38:25), дополните (замените) настроечный файл следующей строкой: "liveSassCompile.settings.autoprefix": [ "> 1%", "last 5 versions" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/css" } ], Итог: 2 проблемы будут решены и не будут отображаться.
а можно узнать о каких проблемах идет речь) я новичек, просто хочется понимать
@@freedomdg Если использовать настройки live sass compiler как на видео, консоль может показывать 2 проблемы: Property autoprefix is not allowed String does not match the pattern of "^[\~|/|\\]" Это связано с обновлением расширения, после выхода видео
у меня при обычной настройке папка css создается где то далеко от корня проекта, по этому я добавил "savePath": "~/css" , и папка css создается в папке scss
@@typoproger4545 Может подскажите, а как сделать так, чтобы именно в созданной мной папке css (как на видео у Жени) создавался файл style.css, а не где попало или в папке scss?
@@Vaiperyga чи знайшли рішення цієї проблеми?
Очень полезно, как всегда! Спасибо, Женя!
Дякую! Це одне з найкрутіших відео, що я бачив за останні два роки. Довго воно висіло у мене в закладках, а їх у мене було відкритих близько сотні)) і нарешті залишилось вже меньше 5-ти. Ще раз дякую за надхнення та сподіваюсь скоро побачимось на одному з ваших навчань.
Просто очень круто! Спасибо за твой труд)
Пожалуйста!
Спасибо, как всегда на высоте !!! очень полезный урок !!!
Спасибо!
Дай бог тебе здоровья, внучок! )
Очень круто! Спасиииибо! Благодаря этому видео влюбилась в VScode
Женя от души смотрю твои видео, просто кайфую как ты заряжаешь позитивом.Учусь на твоих уроках продвижение чувствуется.Продолжай в том же духе. Жалко что больше не будет уроков на русском языке
Бачу нове відео- зразу ставлю лайк!Обзор програми просто супер!
Дякую!
Шчыра ўдзячны! Яўген, ты лепшы!!! Мая жонка таксама лічыць)))! Пры тым, што яна нічога не разумее ў IT. Але ваш задор дзеля яе зразумелы! Будуць грошы -- буду купляць вашыя курсы). А пакуль, буду вучыцца самастойна! Да ПЕРАМОГІ!
Самый лучший канал. Ещё слова " живи. Работай в свободное время" очень мотивирует)
Спасибо, до этого ещё был настроен VS Code, но в настройках много поменял)
Я рад что было полезно
@@FreelancerLifeStyle , я тоже)
велике Вам дякую !!!!! Ваша подача інформації бесцінна !
VSCode установлен уже 6 месяце и только сейчвс поняла, на что он способен)) Как всегда огромное спасибо!!!
Кто знает как поставить два лайка??????? Спасибо большое, с удовольствием смотрю твои уроки. Начал с полного нуля, очень доступно и интересно
Зашла поставить лайк...позже буду смотреть и разбираться))) Женя, спасибо!
Спасибо большое!
Давно смотрю канал, но только сейчас посмотрел этот ролик ) Очень полезно ) Спасибо!
Очень понятно и доходчиво. Супер полезный ролик. Лайк поставил после пяти минут просмотра.
Огромное тебе спасибо за весь твой труд на этом канале, жаль что так мало подписчиков
Плагины подробнее: 00:30:53 - Установка и настройка плагинов. Часть №1 Emmet 00:32:18 - Настройка сниппетов (snippets) 00:36:03 - Установка и настройка плагинов. Часть №2 36:10 - Live Sass Compiler + 41:50 - Live Server 43:55 - SCSS IntelliSence 44:20 - SCSS Formatter 44:50 - Auto Comlete Tag ( Auto Close Tag, Auto Rename Tag ) 45:40 - Bracket Pair Colorizer 46:20 - Indent-Rainbow 46:40 - Better Comments 47:55 - примочки для работы с цветом 48:28 - BEM Helper 49:55 - изменение сочетаний клавиш 50:40 - eCSStractor 52:40 - CSS Navigation 54:32 - Image Preview 55:28 - Debugger for Chrome 56:15 - Vscode Google Translate 57:58 - Project Manager 00:58:49 - Связь проекта с GitHub (Бонус) 01:01:10 - Установка и настройка плагинов. Часть №3 GitLens 01:01:40 - Settings Sync
вы так стимулируете программировать!! спасибо !!!!!
Большое спасибо за материал. Многое уже было установлено, но некоторая часть выгодно дополнила мой VSCode
СПАСИБО!!! СПАСИБО!!! СПАСИБО!!! САМЫЙ ЛУЧШИЙ КАНАЛ!!!
Пожалуйста!
давно сижу на vs code отличный редактор, некоторые дополнения для меня стали полным откровениям в общем спасибо за видео )
Пожалуйста!
@@FreelancerLifeStyle привет, а скоро будет видео про деббагинг в джс?
Женя, ты Мужик! Спасибо тебе за труд! Я ценю это!
Спасибо за труд. Искал как копировать классы а нашёл гораздо больше.
Молодец, ты обещал этот урок и ты сделал, респект. Ну а теперь мы ждём мини уроки по фреймворкам : React, Vue, Laravel, Django :))))
Хех, прям все сразу нужно? Может хоть что-то одно знать +- нормально? :)
@@FreelancerLifeStyle тогда точно по react!
0:27 - в голос :D Видос как всегда топ! Спасибо, развиваемся дальше!
Спасибо!
дай Бог тебе здоровья! огромное спасибо за твой труд и помощь)
Спасибо тебе за такие видео!!! Очень познавательно! Удачи тебе и крепкого здоровья!
css Navigation это бомба ) спасибо за полезное видео
Пожалуйста!
@@FreelancerLifeStyle а можно как-то настроить, чтобы классы показывались не в css, а в sass?
23:10 в параметрах для css и html можно так же убрать документацию тега при наведении, при этом удобное меню выбора цвета в css останется. Жека, большой профессионал, у тебя все классно получается. Скажи, у тебя часто случаются казусы при верстке, когда что то отваливается и не работает или все отлажено и рабоатет без нареканий? поздравляю с 200 000 подписчиков!
Благодарность за проделанную работу! Очень полезное видео, классная подача. Вы крутой)
лучший гайд по vs code! спасибо Жень!