VS code, настройка внешнего вида, рабочие плагины для верстки
Vložit
- čas přidán 13. 09. 2021
- Друзья, в видео рас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
Дождались!
Спасибо за то что ты это делаешь)
Большое Вам спасибо, сэр Вадос, за Ваш видос. Кое-что "стянул" для себя, кое в чем - подразобрался. Успехов!
Спасибо большое за видео) Ваши видео - всегда в радость и помощь)
Ееееееее респект Вадим! Наконец дождались :)
Автор, спасибо за видео! Весьма прикольная подача материала!
спасибули тебе большие за качественный контент, ты единственный из немногих кто делает качественный контент по программированию
Вадим дякую за твою працю! Я лише на початку свого шляху самурая, але твої марафони та відео це просто супер ! Гумор в тебе на 5+ !
згідна)
Тыж мой молодец, рад тебя снова видеть :)
Комментарий для продвижения!
"давайте один параграф наксцуй отсюда пойдёт" - принцип моей вёрстки
вообще топовый принцип, у тебя великое будущее в айтишке
@@vadymprokopchuk спасибо, учитель
Скриншот: Win + Shift + S
Скрины удобно делать с помощью встроенного инструмента Windows 10 (11). Достаточно нажать Win + Shift + S. Скрин попадает в буфер обмена (Win + V или просто вставить с Ctrl + V). Можно даже выбрать тип выделенной области (окно, прямоугольник, произвольная, весь экран). Также можно нажать на всплывшее уведомление и перейти к редактированию скрина.
Многие скорее всего знают, но на всякий случай )
Лично мой самый часто используемый плагин для вёрстки - это канал от 0 до 1))
топовый )
На npm 50 000 установок за все время.
Блин, чувак... Ты прям притягиваешь своим юмором и позитивом ) " У меня по жизни 16, а остальным рассказываю, что 20-ть" - вообще убило наповал! )
Мне нужен был этот видос, чтоб найти где json лежит. Нашел в первые секунды.Спасибо!
Говоря о динозаврах и саблаймах даже ни слова не сказал про Less 🤣а я на нём писал ))
Спасибо за полезную информацию! Очень годный контент! Канал - ТОП! Успехов в дальнейших трудах
Спасибо большое за информацию!!!
Большое спасибо за огромный труд! Учусь верстать на Ваших видео❤
Великолепное видео, смотрел с улыбкой и познавательно и приятно
Мне стыдно но я посреди ночи заражал с размера шрифта 16 ... но всем говорю что 20.
Спасибо, ясное дело что у всех свой путь самурая и свои настройки но было любопытно подсмотреть у вас.
Ну наконец-то показал настройки)) я думал у тебя там что-то страшное творится, а тут вечеринка наксцуй)))))
Вадим давай беку начинай нас обучать! Потому, что после твоих видосов я не кого смотреть не могу, материал вообще не заходит))) А у тебя очень классно получается доносить инфу.
Он фронт а не бек
@@sid9449 знаю!))))
@@romansokurenko4357 Попроси лучше хирурга научить тебя играть на виолончели.
спасибо за полезное видео!
за настройки спасибо)) много проблем решила)))
как всегда - топ
А вот и зеленая лампочка в деле)
Круто! Спасибо огромное!!!
забыл как пользоваться vs code, решил посмотреть хорошее видео, знаю что тут все будет хорошо рассказано, спасибо Автору
Супер
Спасибо за видео
Классное видео, жду марафон
Отличная вечеринка получилась.
харооош!
на данный момент, это самый смешной твой видос, что я смотрел.
жжошь
Шутка про 16 шрифт хорошая))
Прям с языка снял я в ахере
Спасибо! Было б чуть лучше сделать список под катом или сверткой
Поздравляю с вчерашним днем, желаю меньше багов.
спасибо)
Подскажите плагин для подсветки ошибочной транслитерации в словах. Из коробки ничего не подсвечивает...
good!
Респектище автору! Не скажу, что совсем новичок, лет 10 ваял простенькие сайты, сейчас, на досуге, дабы восстановить всякое в памяти, пробежался по марафону и могу сказать, что видосы очень зачётные.
Вадим, подскажите, для разных движков сайта вёрстка как-то отличается? и если да, было бы здорово, если бы вы сделали пример для движка bitrix, как самого популярного движка под коммерческие проекты. А если этот момент уже обсуждался, подскажите, в каком видео, пожалуйста.
привет, иногда отличаеться иногда нет, в целом скажам не отличаеться, просто есть особенности, c bitrix не работал, так что не в курсах
скажите, какое есть расширение vscode для автоопределения кодировки?
или есть команда?
а то устал менять кодировку с utf-8 на кириллицу 1251 в одних файлах и наоборот в других
Такой вопрос, пишу
Хрен знает почему, но тебя приятно слушать)))
если эммет не отображает подсказки ctrl + пробел принудительно запустит
Первый шаг на пути IT-специалиста - это перевод гаджетов , программ и компьютера на английский язык. Без знания английского в IT ой как сложно. Frontend, backend, full stack,
web development, programming - всё всё всё на английском. Вся свежая, актуальная и полная информация на английском, поэтому, особенно на стадии обучения, необходимо погрузиться в терминологию IT-English.
немного не соглашусь, если новичек сядет за английскую версию и попробует что-то накодить (в любой программе) через пару дней у него случится либо упадок и уныние от осознания собственной никчемности, либо злость на всё вокруг. в любом случае начать с русской версии поприятнее))) англ. версия это хардкор. как вы и сказали хватает и кода с документацией для изучения англ.языка)))
посмотрела, позвонила в колокола, буду ждать новый выуск
Как ты сделал себе возможность открывать верхнее меню VS Code на клавишу Alt?
Вадос все ништяк но плагин auto rename tag есть уже с капота давно)
Как всегда все на высшем уровне! Очень классная и крутая подача материала, много полезного узнал.
Есть вопрос: что прописать в settings.json чтобы когда я писал " img.logo " мне выводилось " " вместо " "
Другими словами, чтобы атрибут "class" шел сразу после тега
В файле settings.json укажите:
"emmet.preferences": {
"output.reverseAttributes": true
}
@@datoshcode спасибо, тоже была нужна настройка, теперь работает!
я, когда открыл файл json, глаза наверное округлились, там всего шесть строчек. Решил добавить вашу наскальную надпись "editor.hover.enabled": false, но только true O! Мне понравилось это "первобытное существование". Написал для себя три программульки на python, но всегда проходил мимо этих нюансов в настройке редактора. Спасибо, товарищ. В районе 10:45 - нет автоматического сохранения в json, тут вы что-то путаете, у меня всего шесть строк.. Изменения появляются только тогда, когда вы что-то меняли сами. Нетронутые настройки не отображаются в json
Где ролики. Мне очень нравиться твой контент. Но его мало!!!!! Ответь пожалуйста. Если много другой работы пойму!!
пожалуйста, подскажите мне, что делать с файлом settings.json под видео? скопируйте его и вставьте себе или как?
😘
Привет 👋 спасибо !
Как в VS CODE настроить подсветку синтаксиса Google Apps Script, такой же, как в вебе у Гугла?
Спасибо, конечно но, друг, когда наконец сделаешь видос по натяжке многостраничника на вордпресс? Обещал ведь.
сделаю, как будет время
Помогите решить проблему.
Установил VSC и дополнительное расширение Code Runner.
При запуске любого скрипта, даже самого простого по типу console.log('Hello') или 1 + 1, в OUTPUT
выскакивает следующее сообщение:
[Running] node "c:\путь до скрипта\имя скрипта.js"
"node" ?? ????? ????? и ещё куча знаков вопроса в квадратиках и ромбиках.
[Done] exited with code=1 in 0.102 seconds
Сам скрипт, соответственно, не выполняется. Как это исправить?
LIVE SERVER PREVIEW плагин полезный
Здарова, отец
привет сынуля)
чем больше играешь со шрифтом - тем хуже зрение))
Что за кресло у тебя?
Почему у меня совсем нет никакой информации и текста в html и json?
здравствуйте! подскажите пожалуйста, я скачала ВС на анг языке, но когда в нем пишу русскими буквами текст то у меня в гуглу выходят иероглифы , почему? нада перезагрузить на русском языке ВС? спасибо
как сделать чтобы при вводе тэга a класс был прописан сначала потом href
ахиренно расказал/ сейчас я вам все расскажу/ через минуту/ ну я вам не буду все рассказывать потому шо будет длинное видео
Привет! Как называется плагин для отображения миниатюрных иконок в коде?
Image preview
у меня проблема плагин SASS неправильно работает. Можете помочь?
А как сделать чтобы class прописывался перед href а не после него? При ввводе .logo и нажатие кл TAB
Ви дізнались як?
@@ob7349 нет
@@Alexander-zh8cu а треба зараз?
@@ob7349 так.
На счет темы посоветую ayu
Попробовал, хорошая, но для меня всё равно «One Dark Pro Darker» - One Love!
Благодарочка тебе. Теперь только "Ayu Dark Bordered" пользуюсь. До того была "Dracula At Night"
Никак не могу найти как заставить vscode подсвечивать неустановленные пакеты в package.json
раньше был класссный плагин для саблайма (JavaScript Enhancements) интеллектуальное автодополнение c ипользованием flow в контексте классов и методов итд Но автор видимо перестал его поддерживать и он перестал раьотать -пришлось перейти на VSCode(
Кстати как относишься к webstorm?
норм, хороший он, я иногда работаю через phpstorm это по сути одно и тоже
Он больше для JS и его фреймворков, чем для вёрстки, imho.
👋
как убрать панель, котороая сразу над рабочим окном? index.html > html > body > header
а как настроить так,чтоб сперва шел класс а потом остальное?
например вот так по умолчанию:
а хочу чтоб было вот так :
нужно прописать вот такую штуку в сетинс джейсон
"emmet.preferences": {
"output.reverseAttributes": true
},
"emmet.syntaxProfiles": {
"html": {
"inline_break": 1
}
},
@@vadymprokopchuk спасибо большое)
(17:36) Хех, меня тоже эта бага бесит, но я методом тыка обнаружил, что если нажать Esc, то оно сразу отдупляется. Видимо дело в том, что иногда почему-то срабатывает авто-выделение, т. е. печатаем с выделением того, что печатаем и тогда никакое дополнение ни путей, ни список уже написанных классов, например, не работает. Если кто-то знает как отключить это авто-выделение буду очень благодарен и наверное не только я! ;-)
лайк, конечно, но мне на работе сказали vs code удалить((( и использовать только php storm ...
и они правы, но vs code хорошо подходит для быстрого запуска кода, когда надо глянуть файлик с подсветкой кода или типа того. не удаляй)
у меня на работе вообще не слышали даже про vs code.хотя работаю сантехником в сети ресторанов бургеркинг.
Хоу-хоу-хоу! Время обучения! Отлично! Делай красиво - будет красиво! =)
только самые душные типы пишут такую лабуду
Привет Вадим , решил начать с нуля по твоим видео, и вот не могу скачать макет с первого 7-часового урока,так как он сто с лишним мегабайт, подскажи как быть ?
Люди может кто знает подскажите
Ооочень нужно
я же тебе ответил, как я тебе помогу?) интернет протяну или какие варианты?)
@@vadymprokopchuk Вадим , извиняюсь конечно за такие может быть не серьезные вопросы , но пойми правильно , желание есть с нуля по твоим урокам. Дело в том что я качаю твои макеты и тут и в телеграмме но фигма не открывает , да и на рабочем столе после загрузки макета,макет не могу никак открыть
@@vadymprokopchuk и качать проблем нету вообще , память и интернет позволяют
@@asasov6766 это же psd макет, нужен фотошоп
17:00
Мальчик, тебе годиков скоко? (Старикам)
Народ у меня лайв сервер неработает просит ферифокс как можно изменить на гугл хром
Удали этот live server и установи новый live preview от Microsoft.
@@DreamingDolphing спасибо!крутая штуковина.
Вадим, я хоть и уже взрослый и женатый мужик-гетеросексуал, но ей Богу готов прыгнуть к тебе на руки и расцеловать в обе щеки за это видео, как школьница!!! Дело в том, что у меня в VSC был один ужасно замедляющий работу прикол, с которым я собственно уже смирился после года кодинга - если скажем написать "тег"."какой-то класс" и из вывалившегося окна авто-заполнения класса выбрать один, то он вставляется вот так: «a.class», а не « » Tab нажимать тоже не помогало и приходилось удалять с помощью backspace последнюю букву и печатать её снова, чтобы потом нажать Tab... И так 100500 раз за месяц... А после того, как добавил код твоих настроек Tab заработал и не надо ничего удалять и дописывать! Спасибо огромное и вообще за весь твой космически полезный контент!!
супер!
с не давних пор русский с коробки есть
о как все быстро меняется
Руссификация - зло. Нужно учить английский
Вадя!! красава!
CTRL+C-------CTRL+V😍🤣