VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучение
ฝัง
- เผยแพร่เมื่อ 15 มิ.ย. 2024
- 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
🤟 Живи, а работай в свободное время! ©
![CAMPปลิ้น | EP.76[2/2] เดินมาสิบกว่าป่า วันนี้รู้แล้วว่าโจโฉกลัวอะไร!](http://i.ytimg.com/vi/R7Yor-t2Au0/mqdefault.jpg)
Ребята, ну я старался! Жду ваши комментарии!
🤟 Содержание:
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.
Евгений, как всегда на высоте!
Вот умеешь ты сложное делать простым и понятным. Талант👏
Плагины подробнее:
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
Вы супер, Спасибо!!!!!!!!!
Ну вот как ты так можешь, как ты так умеешь довести до зрителя материал, ведь кучу роликов посмотрел, твой лучший. Жека, лайк тебе даже не раздумывая !!!
Спасибо большое!
отличный гайд по vs code! я бы даже сказал, что это лучший гайд, который я видел и интернете: прекрасно структуированный и очень понятный!
человек, делающий такие вещи и выкладывающий их в свободный доступ, достоин огромного уважения!
Евгений, спасибо большое!
100%
Женя буду благодарить тебя бесконечно! как же ты интереснол рассказываешь о таких нужных вещах, столько нового открываешь! спасибо тебе , добрый Человек!
Титаническая работа, спасибо! Сам пользуюсь VC Code много нового для себя открыл! Видос по GIT очень буду ждать и конечно JS!
Спасибо! Все будет
Самый топовый канал, обучение на колоссальном уровне. А навыки преподавания с каждым видео все лучше и лучше. СПАСИБО))
Спасибо! Стараюсь
Большое уважение к вам и вашему каналу, объём ваших трудов невероятен !
Качество материала и мотивация - на высоте! Так держать, молодец!
Использую VS Code - привык и мне нравится, плагинов много, с Git проще работать и вообще крутяк. ;-)
Единственный канал, где ставлю лайк не глядя! Женя, огромное спасибо, ты большой молодец!
Спасибо! Стараюсь)
Ещё у Исламова канал, тоже оч. крутой. 2 конкурента на ютуб с новым уровнем качества подачи материала. Ещё Дударь, но тот блин тараторка ещё та :-)
бляяяя... тупо жиза, захожу на видоськ смотрю поставил ли лайк если не поставил ставлю и начинаю смотреть 🥰
Аналогично, на этом канале ставлю лайк не глядя.
я тоже
Очень внятно и понятно!
Как для новичка.
Как раз, шастал по Инету в поисках красивого и удобного интерпретатора языка Python ...
Отдельное спасибо, за понятную и безпонтовую подачу материала 🤔👍
Женя!
Спасибо за информативное изложение материала.
Респект и максимальный репост
Спасибо большое!
Огромная благодарность!
Евгений, ваши видео просто клад для разработчиков.
Досконально и понятно для любого уровня.
Отличная подача!
Жаль тут не было про плагины FTP/SFTP.
В последнее время Ваш канал мой самый любимый! Он такой позитивный и полезный! Обожаю))))
Спасибо!
Спасибо, Евгений! Без твоего ролика я ещё долго не открыл бы для себя этот крутой редактор. Лень было разбираться в настройках, а тут сразу всё готовое!
Пожалуйста!
Спасибо огромное! Пересмотрела несколько видео по настройке VS code и плагинам... Ты - лучший! Удобно, понятно и всё по делу! и красиво! :))
Спасибо!! Твой контент- лучший источник обучающих материалов. Прошел два платных говнокурса по верстке, а потом случайно нашел твой канал на ютубе. Что стало для меня настоящим открытием
Ты лучший!)) Вчера сделал домашку из последнего урока по флексам! Спасибо тебе за твой большой труд, Женя!!!!!
Супер! Я рад!
Опа, а вот и годнота подъехала. Всем бегом смотреть!)
Спасибо!
Невероятно информативно, ёмко, без воды) буду изучать все видео! Спасибо за ваши труды. За тайминги отдельная благодарность))
Я рад!
Вау! Из-за предрассудков не использовал VS Code, считая его ресурсоемким и "деревянным", как большинство продуктов Microsoft. Но ваше видео показало, насколько я ошибался. Теперь это мой любимый редактор кода)
Спасибо, что продолжаете удивлять и создавать вау-эффект!
Как всегда на высоте! Это очень круто! Не ожидал что на столько удобно будет в VS)
За настройку нижайший поклон!
Спасибо! Рад что полезно!
Отдельное спасибо за то, что научил синхронизировать git в VS code и на сайте!
Пожалуйста!
Однозначно лайк 👍 всё доходчиво, понятно и самое главное, нет пробелов... Алгоритм действий последователен! Подписываюсь на канал! )))
Только начал программировать и все это для меня в новинку но не нужно быть гением чтобы понять как ты старался, большое спасибо и уверен это не последняя благодарность.
Большое спасибо, есть очень много полезных плагинов и все в одном видео, полноценный гайд по VS Code!
Спасибо!
Вы - настоящий молодец! Все очень хорошо! Ура!
Спасибо! Старался)
Супер! За переводчик вообще отдельное спасибо! Да и настройки за секунду при переустановке - это хит!
Смотрю данный ролик в свободное время), чтобы восполнить пробелы по настройке VSC.
Спасибо Жека!
Я бегал по интернету и не нашел лучше , чем у вас. Я только начинаю заниматься программированием . Спасибо вам за то что даете знания , здоровья и счастья вашей семье.
Скок тебе лет?
Мне 12 🤓
Я тоже хочу быть программистом
@@user-nm5gx9uh7w 50
Лайк не глядя за труды! Вечерком будем смотреть)
За тайм-коды отдельное спасибо!
Спасибо!
Спасибо за лучший туториал из всех, что я прежде видел.
Подписываюсь авансом.
решил заняться фрилансем и нашел этот канал, такой мотивации у меня еще не было, спасибо!
Мужик большой тебе респект. У тебя талант преподавать. Это первый канал где все объясняют до мелочей. Тебе нет цены!!!
Спасибо!
Отличный гайд!
Когда необходимы настройки, периодически ищу в видео нужные описания...!!!!!!!Спасибо, Жека!!!!!
Пожалуйста!
Супер! Очень полезное видео. Особенно для тех кто недавно в теме. Канал замечательный! Оооочень много полезного и бесплатного. Друзья всем советую смотрите, учитесь, а главное "ЖИВИТЕ а работайте в свободное время!"
Очень здорово! Все установил, появилось ощущение праздника! Благодарю!!!
Часовая информация была поглощена взахлеб. Спасибо!
Я рад!
Я очень люблю редактор VS Code и это самый лучший его обзор и знакомство с программой!
Большое Вам спасибо! Ваши выпуски просто идеальные!
Спасибо большое!
@@FreelancerLifeStyle вопрос любителям и знатокам вскоде. я его уже во многих местах задавал, но так и не получил ответа. может тут знают и дадут ответ. я долго пользовался блокнот++. все в нем устраивало. но решил перейти на современные рельсы и использовать вскод. но мне в нем очень не хватает такой функции, как нажав правой кнопкой мыши, прокручивать колесиком к предыдущему или следующему недавно использовавшемуся файлу. возможно ли тут так или как-то подобно? поскольку бывает необходимо открыть не ту вкладку, которая рядом, а которая очень далеко и через стандартное средство просмотра открытых файлов долго открывать. а в блокнот++ это занимало пару движений, которые я описал. спасибо.
@@romanown1361 ctrl + tab (якщо я вірно зрозумів проблему)
Большое спасибо. Как часто Ваши видео спасают меня! Самые лучшие!
Очень полезно, как всегда! Спасибо, Женя!
Спасибо большое за видео. Всё очень хорошо разъяснено) Успехов Вам, Евгений!)
Пожалуйста!
Спасибо, Жень, за твои труды! Теперь я на твой канал за мудростью хожу)))
Супер! Я рад)
Спасибо!!!До твоего видео я просто не использовал огромную часть очень полезных фишек,огромное спасибо!!!
Парень, ты крут ! Я б даже сказал что ты БОГ в этом ! Смотрю довольно часто, подписан, пробую себя в этом деле. Начал курс , понемногу продвигаюсь!
Бачу нове відео- зразу ставлю лайк!Обзор програми просто супер!
Дякую!
отличный гайд. регулярно к нему возвращаюсь!
Женя ты как был, так и остаешься лучшим!
спасибо тебе огромное!!!
как успехи в программировании?
@@kanekiken6635 программирую потихоньку)
Супер!!! Спасибо!!! Как всегда всё профессионально, доступно, понятно и просто.
Давно смотрю канал, но только сейчас посмотрел этот ролик ) Очень полезно ) Спасибо!
Отличный туториал! Спасибо большое, сэкономил кучу времени )))
Пожалуйста!
Просто очень круто! Спасибо за твой труд)
Пожалуйста!
Крепкого здоровья! И мотивации делать больше таких полезных видосов!
Благодарность за проделанную работу! Очень полезное видео, классная подача. Вы крутой)
Поддерживаю и полностью согласна со всеми положительными комментариями и с тем,что Ваши видео всегда настолько полезные и информативные,что при выходе нового можно, еще его не посмотрев,быть уверенным в отличном качестве и полезности, в правильной подаче информации и в том,что даже я все пойму!!Спасибо огромное за такую работу!
Вы - сокровище, а Ваши цели очень благородны!Благодарю Вас за это)
Спасибо большое!
Большое спасибо! Лучший канал на TH-cam по теме!
Спасибо!
спасибо миллион раз. очень круто, понятно, подробно, интересно. я новичок прям нульцевый. но благодаря вам самостоятельно пишу простые коды уже
Женя, благодарю тебя! ты бесподобный! уникальный ! спасибо тебе за твои труды!
И ещё дополнение (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 чи знайшли рішення цієї проблеми?
Спасибо, как всегда на высоте !!! очень полезный урок !!!
Спасибо!
Ваши ролики просто супер. Интересно и смотреть, и слушать.
Очень понятно и доходчиво. Супер полезный ролик. Лайк поставил после пяти минут просмотра.
Спасибо, до этого ещё был настроен VS Code, но в настройках много поменял)
Я рад что было полезно
@@FreelancerLifeStyle , я тоже)
Женя от души смотрю твои видео, просто кайфую как ты заряжаешь позитивом.Учусь на твоих уроках продвижение чувствуется.Продолжай в том же духе. Жалко что больше не будет уроков на русском языке
Это лучшее руководство по VS Code!
Спасибо!
я думаю для отримання базових знань, це один з найкращих менторів, подача та професійність відчувається, дякую за Вашу роботу !
Отлично Женя!!!!! Ты лучший среди русско говорящих учителей!!!!! Очень важно СОДЕРЖАНИЕ -ВРЕМЯ!!!!
Спасибо!
Огромное тебе спасибо за весь твой труд на этом канале, жаль что так мало подписчиков
Большое спасибо за материал. Многое уже было установлено, но некоторая часть выгодно дополнила мой VSCode
давно сижу на vs code отличный редактор, некоторые дополнения для меня стали полным откровениям в общем спасибо за видео )
Пожалуйста!
@@FreelancerLifeStyle привет, а скоро будет видео про деббагинг в джс?
23:10 в параметрах для css и html можно так же убрать документацию тега при наведении, при этом удобное меню выбора цвета в css останется. Жека, большой профессионал, у тебя все классно получается. Скажи, у тебя часто случаются казусы при верстке, когда что то отваливается и не работает или все отлажено и рабоатет без нареканий?
поздравляю с 200 000 подписчиков!
Спасибо тебе за такие видео!!! Очень познавательно! Удачи тебе и крепкого здоровья!
велике Вам дякую !!!!! Ваша подача інформації бесцінна !
Зашла поставить лайк...позже буду смотреть и разбираться))) Женя, спасибо!
Спасибо большое!
Молодец, ты обещал этот урок и ты сделал, респект. Ну а теперь мы ждём мини уроки по фреймворкам : React, Vue, Laravel, Django :))))
Хех, прям все сразу нужно? Может хоть что-то одно знать +- нормально? :)
@@FreelancerLifeStyle тогда точно по react!
дай Бог тебе здоровья! огромное спасибо за твой труд и помощь)
Дякую! Це одне з найкрутіших відео, що я бачив за останні два роки. Довго воно висіло у мене в закладках, а їх у мене було відкритих близько сотні)) і нарешті залишилось вже меньше 5-ти. Ще раз дякую за надхнення та сподіваюсь скоро побачимось на одному з ваших навчань.
Самый лучший канал. Ещё слова " живи. Работай в свободное время" очень мотивирует)
0:27 - в голос :D Видос как всегда топ! Спасибо, развиваемся дальше!
Спасибо!
Отличный урок, все очень доходчиво как всегда. Спасибо. Едем дальше!
Пожалуйста!
Спасибо большое за Ваши видео 🙏 Вы как всегда вдохновляете !
Сниппеты 00:32:18 - Большое спасибо за разъяснение!!!
Пожалуйста!
Спасибо!Сделай видео про заготовки css элементов.
body
font-size : ... px
margin : ... рх
и так далее. Видео будет максимально полезно!)
Ооо,хорошая идея!!
Ну, я как бы говорил про снипеты. Стоит внимательнее смотреть)
Внимательно 31:55 👍
@@FreelancerLifeStyle мне кажется он имел ввиду показать какие заготовки есть у тебя, на блюдичке так сказать)
У Вас очень крутые видео и очень хорошая подача информации. Спасибо за годный контент!
Перешла с Sublime на VS Code. Твои обзоры прекрасны
css Navigation это бомба ) спасибо за полезное видео
Пожалуйста!
@@FreelancerLifeStyle а можно как-то настроить, чтобы классы показывались не в css, а в sass?
СПАСИБО!!! СПАСИБО!!! СПАСИБО!!! САМЫЙ ЛУЧШИЙ КАНАЛ!!!
Пожалуйста!
Женя, ты Мужик! Спасибо тебе за труд! Я ценю это!
Да, чуть не забыл, - большое спасибо за Ваш труд и очень хорошую работу.
Кто знает как поставить два лайка??????? Спасибо большое, с удовольствием смотрю твои уроки. Начал с полного нуля, очень доступно и интересно
На 38:30, когда вставляешь 2 строки настроек для Live Sass Compiler, появляется 2 Проблемы в панеле:
№1 - "Property autoprefix is not allowed."
№2 - "String does not match the pattern of \"^[\\~|/|\\\\]\"."
Чуть доработал твои настройки, чтобы не было ошибок:
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
"last 5 versions"
],
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
}
],
Ну, ок. Как видно в видео у меня никаких ошибок нет...
@@FreelancerLifeStyle Я про панель, в которой есть вкладки ВЫВОД, ТЕРМИНАЛ, КОНСОЛЬ ОТЛАДКИ, ПРОБЛЕМЫ. В последней вкладке высветилось количество ошибок - 2. На видео это есть, но похоже на работу это не влияет.
Предупреждения "горят" в панеле с 38:30, а с 45:38 они пропадают :)
А, это предупреждения..да, не влияет. Но раз можно лучше то спасибо!
спасибо!
спасибо!
Супер! Все, що мені треба було для налаштування мого VS code, знайшла в цьому відео. Дякую!
Спасибо Жека за всё! Гайд отличный и канал самый лучший!
Старания налицо и на лице! Лайк и спасибо!!!
Пожалуйста!