VS code, настройка внешнего вида, рабочие плагины для верстки

Друзья, в видео расcкажу про ту настройку VS code, которая для меня самая актуальная, и покажу все плагины, которыми часто пользуюсь в верстке проектов.
файл settings.json
{
"git.ignoreMissingGitWarning": true,
"workbench.startupEditor": "newUntitledFile",
"workbench.statusBar.visible": true,
"files.defaultLanguage": "html",
"workbench.editor.tabSizing": "shrink",
"editor.detectIndentation": false,
"editor.glyphMargin": false,
"editor.smoothScrolling": true,
"emmet.triggerExpansionOnTab": true,
"editor.suggestOnTriggerCharacters": false,
"terminal.integrated.fontSize": 15,
"window.zoomLevel": 1,
"editor.wordWrap": "on",
"editor.multiCursorModifier": "ctrlCmd",
"editor.minimap.enabled": true,
"editor.fontSize": 20,
"editor.tabSize": 2,
"editor.hover.enabled": false,
"window.menuBarVisibility": "toggle",
"editor.formatOnPaste": true,
"editor.snippetSuggestions": "top",
"liveServer.settings.donotShowInfoMsg": true,
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
],
"workbench.preferredDarkColorTheme": "Material Theme",
"files.autoSave": "onFocusChange",
"workbench.colorTheme": "Material Theme Darker High Contrast",
"ecsstractor_port.bem_nesting": true,
"ecsstractor_port.add_comment": false,
"ecsstractor_port.empty_line_before_nested_selector": false,
"ecsstractor_port.brackets_newline_after": false,
"ecsstractor_port.indentation": " ",
}
Ссылка на телеграм канал:
t.me/from0to1ru​
Ссылка на телеграм канал с впн:
teleg.one/from0to1ru​​
Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.
Вк канала:
bit.ly/vk-from-0-to-1​
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@bingo3209]

"давайте один параграф наксцуй отсюда пойдёт" - принцип моей вёрстки

[@vadymprokopchuk]

вообще топовый принцип, у тебя великое будущее в айтишке

[@bingo3209]

@@vadymprokopchuk спасибо, учитель

[@valehsalimov]

Скриншот: Win + Shift + S Скрины удобно делать с помощью встроенного инструмента Windows 10 (11). Достаточно нажать Win + Shift + S. Скрин попадает в буфер обмена (Win + V или просто вставить с Ctrl + V). Можно даже выбрать тип выделенной области (окно, прямоугольник, произвольная, весь экран). Также можно нажать на всплывшее уведомление и перейти к редактированию скрина. Многие скорее всего знают, но на всякий случай )

[@cruelty8200]

Лично мой самый часто используемый плагин для вёрстки - это канал от 0 до 1))

[@vadymprokopchuk]

топовый )

[@agilitypower3356]

На npm 50 000 установок за все время.

[@user-fs1pm5oe5s]

Дождались! Спасибо за то что ты это делаешь)

[@enterkvas]

Большое Вам спасибо, сэр Вадос, за Ваш видос. Кое-что "стянул" для себя, кое в чем - подразобрался. Успехов!

[@nmxfun]

Спасибо большое за видео) Ваши видео - всегда в радость и помощь)

[@mrTrojer]

Ееееееее респект Вадим! Наконец дождались :)

[@carlweiss830]

Блин, чувак... Ты прям притягиваешь своим юмором и позитивом ) " У меня по жизни 16, а остальным рассказываю, что 20-ть" - вообще убило наповал! )

[@xImmoortalx]

Вадим дякую за твою працю! Я лише на початку свого шляху самурая, але твої марафони та відео це просто супер ! Гумор в тебе на 5+ !

[@lanam1182]

згідна)

[@folomba]

Автор, спасибо за видео! Весьма прикольная подача материала!

[@scc-6]

Мне нужен был этот видос, чтоб найти где json лежит. Нашел в первые секунды.Спасибо!

[@UCnBUnAmcvCs8FePEtmn]

Тыж мой молодец, рад тебя снова видеть :) Комментарий для продвижения!

[@russyy00]

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

[@romansokurenko4357]

Вадим давай беку начинай нас обучать! Потому, что после твоих видосов я не кого смотреть не могу, материал вообще не заходит))) А у тебя очень классно получается доносить инфу.

[@sid9449]

Он фронт а не бек

[@romansokurenko4357]

@@sid9449 знаю!))))

[@alexey2258]

@@romansokurenko4357 Попроси лучше хирурга научить тебя играть на виолончели.

[@unkled]

Спасибо большое за информацию!!!

[@DALEXsumy]

Мне стыдно но я посреди ночи заражал с размера шрифта 16 ... но всем говорю что 20. Спасибо, ясное дело что у всех свой путь самурая и свои настройки но было любопытно подсмотреть у вас.

[@FATALGIG]

Говоря о динозаврах и саблаймах даже ни слова не сказал про Less 🤣а я на нём писал )) Спасибо за полезную информацию! Очень годный контент! Канал - ТОП! Успехов в дальнейших трудах

[@vasya8441]

забыл как пользоваться vs code, решил посмотреть хорошее видео, знаю что тут все будет хорошо рассказано, спасибо Автору

[@irinaaranzh]

Большое спасибо за огромный труд! Учусь верстать на Ваших видео❤

[@vasya8441]

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

[@lemonjuice938]

Ну наконец-то показал настройки)) я думал у тебя там что-то страшное творится, а тут вечеринка наксцуй)))))

[@user-jz9id8im1o]

Респектище автору! Не скажу, что совсем новичок, лет 10 ваял простенькие сайты, сейчас, на досуге, дабы восстановить всякое в памяти, пробежался по марафону и могу сказать, что видосы очень зачётные. Вадим, подскажите, для разных движков сайта вёрстка как-то отличается? и если да, было бы здорово, если бы вы сделали пример для движка bitrix, как самого популярного движка под коммерческие проекты. А если этот момент уже обсуждался, подскажите, в каком видео, пожалуйста.

[@vadymprokopchuk]

привет, иногда отличаеться иногда нет, в целом скажам не отличаеться, просто есть особенности, c bitrix не работал, так что не в курсах

[@user-or1hy4xz8u]

Подскажите плагин для подсветки ошибочной транслитерации в словах. Из коробки ничего не подсвечивает...

[@kerusdc8322]

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

[@AndAlexei]

Первый шаг на пути IT-специалиста - это перевод гаджетов , программ и компьютера на английский язык. Без знания английского в IT ой как сложно. Frontend, backend, full stack, web development, programming - всё всё всё на английском. Вся свежая, актуальная и полная информация на английском, поэтому, особенно на стадии обучения, необходимо погрузиться в терминологию IT-English.

[@user-cn7ri9cp7b]

немного не соглашусь, если новичек сядет за английскую версию и попробует что-то накодить (в любой программе) через пару дней у него случится либо упадок и уныние от осознания собственной никчемности, либо злость на всё вокруг. в любом случае начать с русской версии поприятнее))) англ. версия это хардкор. как вы и сказали хватает и кода с документацией для изучения англ.языка)))

[@crogot]

Такой вопрос, пишу

[@user-qc1nf7zd3l]

Как всегда все на высшем уровне! Очень классная и крутая подача материала, много полезного узнал. Есть вопрос: что прописать в settings.json чтобы когда я писал " img.logo " мне выводилось " " вместо " " Другими словами, чтобы атрибут "class" шел сразу после тега

[@datoshcode]

В файле settings.json укажите: "emmet.preferences": { "output.reverseAttributes": true }

[@user-ky3eo8wm3k]

@@datoshcode спасибо, тоже была нужна настройка, теперь работает!

[@Maryfeb1]

А вот и зеленая лампочка в деле)

[@bog-1]

как всегда - топ

[@bohdan3125]

Поздравляю с вчерашним днем, желаю меньше багов.

[@vadymprokopchuk]

спасибо)

[@pavelaleks4493]

если эммет не отображает подсказки ctrl + пробел принудительно запустит

[@user-qe2oh6os8q]

спасибо за полезное видео!

[@andrewsam224]

Круто! Спасибо огромное!!!

[@rostyslavkinash5232]

Спасибо за видео

[@user-cn7ri9cp7b]

за настройки спасибо)) много проблем решила)))

[@total5074]

Классное видео, жду марафон

[@warhouse634]

Как ты сделал себе возможность открывать верхнее меню VS Code на клавишу Alt?

[@user-tb9wf8vp2o]

я, когда открыл файл json, глаза наверное округлились, там всего шесть строчек. Решил добавить вашу наскальную надпись "editor.hover.enabled": false, но только true O! Мне понравилось это "первобытное существование". Написал для себя три программульки на python, но всегда проходил мимо этих нюансов в настройке редактора. Спасибо, товарищ. В районе 10:45 - нет автоматического сохранения в json, тут вы что-то путаете, у меня всего шесть строк.. Изменения появляются только тогда, когда вы что-то меняли сами. Нетронутые настройки не отображаются в json

[@sergejchap62]

Спасибо! Было б чуть лучше сделать список под катом или сверткой

[@user-yr5vd5ru4j]

Супер

[@user-hh6xg6nx6o]

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

[@dmitriyk.2462]

Шутка про 16 шрифт хорошая))

[@yellowketchup9562]

Прям с языка снял я в ахере

[@Vladislav1449]

харооош!

[@Alexander-zh8cu]

А как сделать чтобы class прописывался перед href а не после него? При ввводе .logo и нажатие кл TAB

[@ob7349]

Ви дізнались як?

[@Alexander-zh8cu]

@@ob7349 нет

[@ob7349]

@@Alexander-zh8cu а треба зараз?

[@agilitypower3356]

@@ob7349 так.

[@user-cj9nw8kc5h]

Где ролики. Мне очень нравиться твой контент. Но его мало!!!!! Ответь пожалуйста. Если много другой работы пойму!!

[@ask9014]

на данный момент, это самый смешной твой видос, что я смотрел. жжошь

[@AleksTrifonov]

Как в VS CODE настроить подсветку синтаксиса Google Apps Script, такой же, как в вебе у Гугла?

[@user-wr1vy5vb9e]

Помогите решить проблему. Установил VSC и дополнительное расширение Code Runner. При запуске любого скрипта, даже самого простого по типу console.log('Hello') или 1 + 1, в OUTPUT выскакивает следующее сообщение: [Running] node "c:\путь до скрипта\имя скрипта.js" "node" ?? ????? ????? и ещё куча знаков вопроса в квадратиках и ромбиках. [Done] exited with code=1 in 0.102 seconds Сам скрипт, соответственно, не выполняется. Как это исправить?

[@PyCTaM3]

Отличная вечеринка получилась.

[@luxarmiger5729]

Спасибо, конечно но, друг, когда наконец сделаешь видос по натяжке многостраничника на вордпресс? Обещал ведь.

[@vadymprokopchuk]

сделаю, как будет время

[@AleksTrifonov]

Что за кресло у тебя?

[@ajsluprochazkova4587]

здравствуйте! подскажите пожалуйста, я скачала ВС на анг языке, но когда в нем пишу русскими буквами текст то у меня в гуглу выходят иероглифы , почему? нада перезагрузить на русском языке ВС? спасибо

[@romans5741]

good!

[@lanam1182]

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

[@user-kq3ht3zt7o]

Почему у меня совсем нет никакой информации и текста в html и json?

[@666Vladyka911]

Привет! Как называется плагин для отображения миниатюрных иконок в коде?

[@vladismeow]

Image preview

[@vladislav2023]

Вадос все ништяк но плагин auto rename tag есть уже с капота давно)

[@abbosvaliev6498]

как сделать чтобы при вводе тэга a класс был прописан сначала потом href

[@user-ls9gw4do1z]

😘

[@asifabbasov3801]

у меня проблема плагин SASS неправильно работает. Можете помочь?

[@ukra777]

Хрен знает почему, но тебя приятно слушать)))

[@talivel118]

Кстати как относишься к webstorm?

[@vadymprokopchuk]

норм, хороший он, я иногда работаю через phpstorm это по сути одно и тоже

[@alexey2258]

Он больше для JS и его фреймворков, чем для вёрстки, imho.

[@nuya2591]

Здарова, отец

[@vadymprokopchuk]

привет сынуля)

[@XOMYTOB]

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

[@IMTevinJ]

Никак не могу найти как заставить vscode подсвечивать неустановленные пакеты в package.json

[@user-qq3hy7gx9h]

LIVE SERVER PREVIEW плагин полезный

[@michaelmichael2897]

а как настроить так,чтоб сперва шел класс а потом остальное? например вот так по умолчанию: а хочу чтоб было вот так :

[@vadymprokopchuk]

нужно прописать вот такую штуку в сетинс джейсон "emmet.preferences": { "output.reverseAttributes": true }, "emmet.syntaxProfiles": { "html": { "inline_break": 1 } },

[@michaelmichael2897]

@@vadymprokopchuk спасибо большое)

[@user-gk8pf9mv9g]

На счет темы посоветую ayu

[@alexey2258]

Попробовал, хорошая, но для меня всё равно «One Dark Pro Darker» - One Love!

[@signalua]

Благодарочка тебе. Теперь только "Ayu Dark Bordered" пользуюсь. До того была "Dracula At Night"

[@prsion1925]

раньше был класссный плагин для саблайма (JavaScript Enhancements) интеллектуальное автодополнение c ипользованием flow в контексте классов и методов итд Но автор видимо перестал его поддерживать и он перестал раьотать -пришлось перейти на VSCode(

[@alexlisouski4069]

как убрать панель, котороая сразу над рабочим окном? index.html > html > body > header

[@user-sr8dp4yq4g]

чем больше играешь со шрифтом - тем хуже зрение))

[@user-xd4mv4mk4c]

лайк, конечно, но мне на работе сказали vs code удалить((( и использовать только php storm ...

[@FlashViolet]

и они правы, но vs code хорошо подходит для быстрого запуска кода, когда надо глянуть файлик с подсветкой кода или типа того. не удаляй)

[@user-wz9qr6ki9v]

у меня на работе вообще не слышали даже про vs code.хотя работаю сантехником в сети ресторанов бургеркинг.

[@asasov6766]

Привет Вадим , решил начать с нуля по твоим видео, и вот не могу скачать макет с первого 7-часового урока,так как он сто с лишним мегабайт, подскажи как быть ? Люди может кто знает подскажите

[@asasov6766]

Ооочень нужно

[@vadymprokopchuk]

я же тебе ответил, как я тебе помогу?) интернет протяну или какие варианты?)

[@asasov6766]

@@vadymprokopchuk Вадим , извиняюсь конечно за такие может быть не серьезные вопросы , но пойми правильно , желание есть с нуля по твоим урокам. Дело в том что я качаю твои макеты и тут и в телеграмме но фигма не открывает , да и на рабочем столе после загрузки макета,макет не могу никак открыть

[@asasov6766]

@@vadymprokopchuk и качать проблем нету вообще , память и интернет позволяют

[@vadymprokopchuk]

@@asasov6766 это же psd макет, нужен фотошоп

[@hanna1046o]

Привет 👋 спасибо !

[@alexey2258]

(17:36) Хех, меня тоже эта бага бесит, но я методом тыка обнаружил, что если нажать Esc, то оно сразу отдупляется. Видимо дело в том, что иногда почему-то срабатывает авто-выделение, т. е. печатаем с выделением того, что печатаем и тогда никакое дополнение ни путей, ни список уже написанных классов, например, не работает. Если кто-то знает как отключить это авто-выделение буду очень благодарен и наверное не только я! ;-)

[@user-pm9vf4uy9q]

Народ у меня лайв сервер неработает просит ферифокс как можно изменить на гугл хром

[@DreamingDolphing]

Удали этот live server и установи новый live preview от Microsoft.

[@user-wz9qr6ki9v]

@@DreamingDolphing спасибо!крутая штуковина.

[@sodz5144]

Мальчик, тебе годиков скоко? (Старикам)

[@kegora9]

👋

[@caligulaas]

17:00

[@igr3943]

Хоу-хоу-хоу! Время обучения! Отлично! Делай красиво - будет красиво! =)

[@gubatenkov]

только самые душные типы пишут такую лабуду

[@dzhmbaggins4407]

с не давних пор русский с коробки есть

[@vadymprokopchuk]

о как все быстро меняется

[@alexey2258]

Вадим, я хоть и уже взрослый и женатый мужик-гетеросексуал, но ей Богу готов прыгнуть к тебе на руки и расцеловать в обе щеки за это видео, как школьница!!! Дело в том, что у меня в VSC был один ужасно замедляющий работу прикол, с которым я собственно уже смирился после года кодинга - если скажем написать "тег"."какой-то класс" и из вывалившегося окна авто-заполнения класса выбрать один, то он вставляется вот так: «a.class», а не « » Tab нажимать тоже не помогало и приходилось удалять с помощью backspace последнюю букву и печатать её снова, чтобы потом нажать Tab... И так 100500 раз за месяц... А после того, как добавил код твоих настроек Tab заработал и не надо ничего удалять и дописывать! Спасибо огромное и вообще за весь твой космически полезный контент!!

[@vadymprokopchuk]

супер!

[@nmephchik]

Руссификация - зло. Нужно учить английский

[@vladimirzvyagincev8193]

Вадя!! красава!

[@masteryoda1842]

CTRL+C-------CTRL+V😍🤣