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