HomeОбразованиеRelated VideosMore From: WebDesign Master

Visual Studio Code - Обзор редактора, возможности, настройка и сниппеты

1734 ratings | 67802 views
Полезно? Подпишись на канал: https://goo.gl/o1TVqF Создание интернет-магазина от А до Я: https://goo.gl/7mDqYD Создание новостного сайта от А до Я: https://goo.gl/ankxq9 Фриланс для начинающих: https://goo.gl/xOPRQ0 Страница урока: http://webdesign-master.ru/blog/tools/2018-03-18-visual-studio-code.html Всем привет, дорогие друзья! Компания Microsoft за все свое долгое время существования выпустили немало различных сред и инструментов разработки. Весной 2015 года компания порадовала многих разработчиков и представила новый продукт под названием Visual Studio Code. О нем мы сегодня и поговорим :) Группа Вконтакте: http://vk.com/agragregra Реклама на канале: https://goo.gl/ROl4q3
Html code for embedding videos on your blog
Text Comments (145)
WebDesign Master (8 months ago)
Надоедливые всплывающие подсказки можно отключить незадокументированным параметром: "editor.hover": false, После перезагрузки редактора, всплывающие окна при наведении пропадут.
чё-то не работает этот параметр,поменяли его, сейчас необходимо "editor.hover.enabled": false
Всем привет! Подскажите в чём может быть дело, потом пуска vs code проходит возле 30сек - 1 минут и программка подвисает секунд на 5, потом разлагивается и перестаёт трудиться emmet. Переустанавливал уже прогу, ничего не посодействовало. И будто можно схватить опции из папки .vscode. А то переустановил и всё слетело
А какие плагины ввести в первую очередность ?
Хотелось бы инфы по поводы опции и остального за Live server extension, очень пригодное расширение
Chernobilsky_ Fox (1 month ago)
Моя неувязка не относится к фронтэнду, однако может кто поможет. При написании проги на с++ не желает подеключать iostream. Я пролезла уже все форумы и теряюсь в гипотезах о том, будто это можно "починить"...
Yuliya (1 month ago)
Подскажите, изволь, а можно будто-то поменять краска отображения пробелов с сероватого на более приметный?
Dev Loop (1 month ago)
Для установки российского языка в VSCode откройте расширения и в поиске введите Russian Language Для подсветки синтаксиса Sass введите в том же поиске расширений Sass и установите плагин от Robin Bentley
Отличный обозрение. Спасибо. Но на 28:40 - "editor.detectIndentation": true, - // Параметры "editor.tabSize" и "editor.insertSpaces" будут определяться автоматом, на базе содержимого открываемого для редактирования файла. Не понятно отчего у создателя видео это сработало, однако для отбражения направляющих отступа предназначен иной параметр: // Controls whether the editor should render indent guides. "editor.renderIndentGuides": true,
FeranDAq (2 months ago)
Как выключить фичу которая потом того будто поставишь курсор на слово выдеяет его и подсвечивает все совпадения ? Это происходит без нажатия хоткеев, попросту когда курсор находится в слове.
Black Stalker (2 months ago)
Как скомпилировать .cpp файл?
Victor Nelasy (2 months ago)
Спасибо за видео! Eсть ли VS Code возможность стремительно редактировать стили будто в Brackets по ctr-E?
Nikita Sokolov (2 months ago)
ctrl + space окрывает подсказки (в том числи и emmet), по аналогии с Microsoft Visual Studio
ребят , будто настроить извещения которые выскакивают в правом нижнем углу?
Vlad Sambor (3 months ago)
Бесят блоки на скобках. Как их прибрать?
Автор, подскажите изволь будто сделать этак, чтоб при написании кода он не вылазил за границы окна по ширине, а переносился на последующую строчку
WebDesign Master (3 months ago)
Alt+Z
Всё перечёркивает неимение интерактива из коробки и расширения типа live server не помогают :(
ckreta games (4 months ago)
я установил, а будто поставить российский стиль
main (3 months ago)
левый вертикальный бар - самая нижняя вкладка - в строке поиска russian language pack
ripsavage1977 (4 months ago)
Ввел не правильно имя юзера в расширении gist. Теперь получаю ошибку повсевременно: GIST ERROR: request to https://api.github.com/gists?per_page=9999 failed, reason: self signed certificate in certificate chain [github] Пробовал переставлять никчемно, будто разрешить делему?
Funkstrought (4 months ago)
При добавлении lorem, тест пишется в одну строчку. Как настроить перенос строчки, либо что бы не возникало колесо горизонтальной прокрутки?
Круче Атома выходит?
X-moto.zp.ua (4 months ago)
Спасибо, неплохой обозрение. Можете подробней поведать в следующем видео про отладку.Спасибо.
lolomap (5 months ago)
Стоит ли перебежать на этот редактор из vs 2017 для разработки на с++? Вопрос о функционале
Спс, редактор клевый! Это не тот случаем редактор в котором еще лет 15-20 вспять на С программеры писали? Майкрософт Вижуал Студио вроде именовался? Скажите, а кушать возможность сделать заместо терминала. чтобы окно браузера было? чтобы сходу глядеть че там нагнал?
TheReverOcelot (5 months ago)
Очень неплохой гайд по настройке редактора, мне стремительно посодействовал соориентироваться, благодарю, друг)
Был бы признателен если бы сняли видео будто настроить live preview без сохранения файла и перезагрузки странички. А-ля будто в брекетесе. Так же не могу отыскать плагин какой позволяет в css поменять пиксели колесом мышки либо перетягиванием.
Отличный обозрение
CLAY (5 months ago)
Как поменять стиль
Lendrapendr Arslan (1 month ago)
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ru
1. Скачай подходящий Language Pack for Visual Studio Code в разширениях 2. Перейди по команде F1 в >display language 3. Замени "locale": "en" на локацию подходящего языка
Alex Kikot (6 months ago)
Я удивлен интересуюсь Visual Studio Code. Буду испытать. Заранее благодарю. Спрошу. Как для тебя нравится Sublime Text либо Visual Studio Code? Удобно и резвее. И еще необходимо расширения...
Здравствуйте! Может кто-то сталкивался - при использовании sass не автодополняет классы прописанные в html. Может кушать решение?
Max Kaluakin (6 months ago)
Ребята, помогите новенькому. Я поставил для себя VSC. Все пять - не считая 1-го момента. Когда я пробую форматировать код сасс - он у меня преобразовывает стили в одну строчку. Не могу осознать - будто это поменять. Ставил и плагины Бьютифай и тд. Но не выручает.
Gleb Gulin (7 months ago)
денек хороший. а будто избрать node заместо powershell для vuejs? другими словами будто настроить данную ИДЕ под Vuejs?
IFEXE (7 months ago)
Помогите, в файле .sass при нажатии на Tab выдает такую ошибку "Running the contributed command:'emmet.expandAbbreviation' failed."
Max Freestyler (7 months ago)
подскажите, изволь, хоткей на удаление всей строчки
Хороший редактор, не плохое видео. Однако у меня не вышло обучить его регистрировать подключаемые классы и посторонний код. Пока пишу собственный класс, он пять помнит и знает о способах, свойствах, предлагает их на выбор при написании кода. Но вынудить его проиндексировать папку ну-ка скажем с MODX я не сумел. Никакого аналога external libraries будто у PHPStorm не увидел, пробовал попросту прибавлять папку в проект, однако и потом этого VisualCode отрешался что-или знать о присоединенном коде. Может кто-то решил эту делему?
Nick Green (7 months ago)
Спасибо за задание, весьма информативно. В принципе, всё будто вечно ;)
disco_dinosaur (7 months ago)
Такой проблема: каким образом можно настроить автоматическое конфигурации закрывающегося тега? К примеру - я заместо <p>Текст</p> желаю <div>Текст</div>, изменив 1-ый p на div, автоматом изменялся 2-ой p на div
плагин - Auto Rename Tag
Автоматически не знаю будто, однако можно вот этак. https://code.visualstudio.com/docs/editor/emmet - во 2-ой гифке рассказывается: 1. Установить курсор в исходный изменяемый тег 2. Вызвать View\Commnd Pallete - Ctrl+Shift+P 3. Выбрать из перечня "Emmet: Update Tag" (довольно завести em up). 4. Ввести подходящий тег. 5. Enter
Спасибо огромное за уроки! А будто вы относитесь к WebStorm? Нет в планах сделать обозрение либо задание по шторму?
Pavel _2988 (7 months ago)
Спасибо, весьма посодействовало! Непонятным осталось одно: будто скомпилировать файл либо проект? Кодю на С++
WebDesign Master (7 months ago)
Давно кодите? Если конечно, тогда вам надлежит быть знакомо слово Документация ))
У меня может дурной проблема, однако всё же, будто сделать что бы в CSS, потом выбора подсказки, редактор ставил точку с запятой? Обычно это у всех по дефолту, здесь не ставит(
Ничего лучше чем netbeans и phpstorm не встречал покамест, хоть они и тяжеловесные. Пробовал и sublime, и notepad++, и этот vsc. Эти все легкие редакторы классные, однако у всех одинешенек всеобщий недочет - неинтелектуальный автокомплит. Знаю кушать плагины, однако это совершенно не то. Использую редакторы кода лишь для открытия огромных файлов.
Жирный Боров (7 months ago)
А swift можно строчить ?
Aleksandr Pletnyov (7 months ago)
Что бы появлялась подсказка автокомплита, необходимо нажимать сочетание кнопок ctrl+пробел, попросту таким же образом вызывается intalisance в среде разработки visual studio, вот они и сделали в собственном стиле). Поставил на деньках vs code, и будто один кушать неувязка, этот самый автокомплит (однако я называю его все-таки инталисенсом), не лицезреет мои классы из присоединенного css файла, хотя к примеру бутстраповские лицезреет. Опечаток вроде дудки, в чем неувязка не понятно
Igor Bond (8 months ago)
Я включаю порядок дзен (ctrl+k + z) заместо скрытия меню, активити и т.д.
Zerk (8 months ago)
Чтобы пофиксить "фичу" с Emmet добавь в опции "emmet.triggerExpansionOnTab": true "emmet.showAbbreviationSuggestions": false
И Холмов (8 months ago)
если добавить настройку - terminal.integrated.shell.windows на bash, то потом перезапуска редактора powerShell из терминала теряется. Есть у кого вариант решения трудности?
Спасибо большущее!
Подскажите, будто отключить всплывающую ПОДСКАЗКУ(дефиниция) которая возникает при наведении на хоть какой элемент кода!????????????Уже всё перепробывал
WebDesign Master (8 months ago)
На страничке урока кушать решение.
Макс Дзюбак (8 months ago)
Установил bash в vs code, захожу в проект и там пишу ncu — ответ ncu: command not found. Я этак понимаю nodejs дудки. Написал node -v — ответ: The program 'node' is currently not installed. You can install it by typing: sudo apt install nodejs-legacy. Устанавливал и что-то ничего не выходило. Подскажите изволь что необходимо ввести что бы воспользоваться bash ?
Макс Дзюбак (8 months ago)
Благодарю, Алексей!
WebDesign Master (8 months ago)
Одной командой: sudo apt update; sudo apt -y install curl; curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -; sudo apt -y install nodejs; sudo npm i -g gulp rimraf npm-check-updates; sudo chown -R $USER:$(id -gn $USER) /home/$USER/.config
takcyr (8 months ago)
WebDesign Master_ Не работает Emmet, в чем неувязка? Пресет опций Visual Studio Code:предложенных тобой забил все равно Emmet не вожделеет врубаться!!!!!
Vadim Sysoev (8 months ago)
Не используешь автосохранение файлов? files.autoSave
WebDesign Master (8 months ago)
Нет.
CRAZY_ MAX_RU (8 months ago)
Ребят, будто настроить корректную вставку скопированного контента в файл? Такая нелепость в Visual Code. Вставляешь с Авакода стили, однако строчку, куда вставляешь откидывает вспять, в самое начин. В ST3 при помощи cmd+shift+v вставлялось все роскошно, однако тут не работает. Где эта волынка настраивается?
Maksim Kazachenka (8 months ago)
CSS Peek(типо Go To Css Declaration на саблайме) весьма нужная фича
К огорчению не совершенно этак, в ST3 при поиске подходящего класса, редактор отыскивает классы в открытых файлах и указывает его там где отыскал тоесть в самих файлах, для меня это архиудобно, этак будто таким образом находил нужные классы и уже потом отысканного класса продолжал строчить код, какой относится к тому либо иному контейнеру(блоку), в VC - отысканный класс редактор показывает код во всплывающем окне и/либо открывает документ повторно. А это уже неловко.
M (8 months ago)
Классный какой редактор, благодарю Алексей!
Сможет поменять php-shtorm? Хочется настроить даровой прибор.
пробовал перебежать на vs code, однако не отыскал будто настроить Интерактивнаю аббревиатуру(ctrl+alt+enter sublime) и подсказки ввода классов html-sass в обе стороны(в html вышло получать имена классов, а sass файлах дудки). Поэтому не срослось с vs code для чего-то сурового. Буду признателен, если кто-то даст подсказку будто настроить эти две фичи, а то к отличному стремительно привыкаешь
Aleksandr Pletnyov (7 months ago)
разобрался с неувязкой? если конечно, подскажи изволь
thnx
Благодарю за видео! Долго находил подмену Атому и благодаря вам отыскал.
Jay Les (8 months ago)
Кто знает будто прибрать подсказки с документацией, которые показываются, к примеру, при наведении на div, ul, li..?
WebDesign Master (8 months ago)
Надоедливые всплывающие подсказки можно отключить незадокументированным параметром: "editor.hover": false, После перезагрузки редактора, всплывающие окна при наведении пропадут.
Sulaimon Qurbonov (8 months ago)
У меня кушать проблема??? Как запустить на браузере написанные коды аннотацию напишите изволь на хром ????????????
Астрологи объявили неделю VS Code. Количество юзеров данной системы увеличено в два раза!
Рома Дворак (2 months ago)
Кто-то в героев переиграл!!!
Supro (3 months ago)
Будущее за vs code. Тот традиционный vs немало весит, немало жрет ресурсов, к тому же кроссплатформенный. Есть снимок на Linux, какой тоже не наименее быстро развивается.
Рома Дворак (3 months ago)
аххахаахахахаахаххаа!!!
Град (5 months ago)
Дмитрий Чеканников герои клинка и магии ахах красава
Settings Sync оболденная предмет, позволяет синхронизировать опции vs code меж устройствами
благодарю огромное!)Жду с нетерпением последующего Джедая!
web sunsey (8 months ago)
А может быть ли в Visual Studio Code воткнуть либо добавить какое-то добавление, чтоб было будто в PHPStorm либо WebStorm - всплывающие варианты открытия HTML-странички в различных браузерах (в правом верхнем углу)? Или это лишь в IDE может быть?
За обозрение благодарю. Не подсвечивается краска в sass файлах с помощью ColorHightligther кушать решение? может кто сталкивался
Вадим (6 months ago)
Алексей Сухов плагин Colorize решает делему
Камо Абрамян (8 months ago)
Вообще круто я тоже от sublime text тоже утомился !! этак и поразмыслил что быстро у вас будет задание по Visual Studio ) благодарю вам за новоиспеченный задание
Александр Hkr (8 months ago)
Visual Studio Code — русскоговорящее общество в телеграм: https://t.me/vscode_ru
Kempriol (8 months ago)
Не люблю редакторы, которые длительно вызываются по F4 в тоталкомандере
muzaboz (8 months ago)
Вы планировали серию уроков сотворения веб-сайта под упровлением Jekyll, либо уже не будет данного урока?
WebDesign Master (8 months ago)
Всё, что запланировано и анонсировано выйдет вовремя.
Если при работе пашет нода и для тебя необходимо ввести пакет, то пакет просит перезагрузку. Сейчас при перезагрузке терминал вырубается, потом чего необходимо поновой запускать вотчи. Но еще некое пора вспять при перезагрузке, терминал типо вырубался, а нода все равно в задачках висела. Веду к тому, что нередко обновления кидают, что кушать отлично.
Alexey Pavlov (8 months ago)
emmet autocomplite ctrl+space
Quaden Channel (8 months ago)
Кто знает можно ли перетащить установленные расширения в vscode на иной компьютер?
Макс Дзюбак (8 months ago)
Переустанавливал винду с 7 на 10. Все расширения скопировал. Вставил попросту в папку extension. Все установилось на ура.
alexmicr (8 months ago)
Поставил под Windows 10. В окне редактора темное окно. Видно лишь верхнее меню. Кто знает, что мастерить. Изменить гамму ч.з меню невозможно, его не видать
alexmicr (8 months ago)
Огромное благодарю. Все заработало.
Алекс Чаб (8 months ago)
Такая же неувязка, посодействовало пуск чрез консоль командой code --disable-gpu. Если понравится этот редактор, то можно сделать bat-файл для пуска, чтоб не впрыскивать любой один в консоль.
Полезный плагин: в Sublime был супер плагин для копирования имен Css классов тегов из HTML - TAG Get Css Classes. Аналог для VC - Class Extractor
Dastin Forest (8 months ago)
Спасибо! какраз ожидал!
Andrei K. (8 months ago)
Здравствуйте, хотелось бы добавить, что в случае выявления ошибок, недостатков, случаев неправильной работы, можно адресоваться к разработчикам на Github (в текущей версии сделать воззвание можно в меню). Был случай: одно из css параметров отражалось будто неверное (не имеющееся), не критично, однако мешало, сказал - ответили, попросили подробней обрисовать деяния вызывающие "ошибку" , поблагодарили и поправили в последующей версии. Спасибо Вам за уроки!.
Nick (8 months ago)
Чтоб не устранять и строчить поновой последнюю буковку в emmet можно попросту надавить ctrl+enter и для тебя снова покажет подсказку autocomplete
followthewhiterabbit (3 months ago)
Есть ещё параметр "emmet.triggerExpansionOnTab": true. С ним даже ctrl+space жать не неадо.
Nick (8 months ago)
а может и пробел, я на 100% не помню :)
Андрей Пашко (8 months ago)
Лайк не смотря.
В Прошлом видео просил обозрение на vc, и вот обозрение готов) Спасибо! Любители БЭМ поменяйте что добавили в последней версии vc
Martino71 (8 months ago)
Пользовался поначалу Brackets, однако будто лишь проект начал вырастать, редактор стал тормозить конечно и вообщем кушать противные маленькие баги с переносами строк и тд, позже известный разработчик порекомендовал мне атом и заодно расшарил свои опции, однако у него там было возле 40+ плагинов, половину из которых я даже не знал что делают, в итоге он раскрывался минут 5, что весьма длительно. Вернулся к Брекетс, однако желаю испытать VSC, видео понадобится 👍🏼
Вячеслав (3 months ago)
У меня Alt+Shift+F
Denis Ipatov (8 months ago)
Тоже на Брекетсе посиживал, весьма нравился, однако при долгой работе начинал страшно тормозить. Перешел на VSC. На нем не нравился тот глюк с эмметом, какой в ролике описан, однако вроде будто в комментах дали подсказку будто поправить. А этак VSC неплох. В Брекетсе автоформатирование (beautify) нравилось, в VSC не отыскал будто сделать, лишь чрез меню правой кнопкой -> форматировать (выговор про html и css).
Александр Л (8 months ago)
задумывался, джедай вышел Алексей, весьма ждем джедая! когда порадуете?
Uni Fom (8 months ago)
Чтобы всплывала подсказка в emmet Ctrl+Пробел
наилучший редактор для фронта. ушел на него с саблайма
Nate River (8 months ago)
Алексей, а Вы не пробовали для написания html'я воспользоваться Pug'ом?
WebDesign Master (8 months ago)
В общем хорошо, если верстка - ваш последний итог. Но я осуществляю посадку на фреймфорки и CMS, потому не весьма комфортно администрировать позже все это хозяйство.
WebDesign Master (8 months ago)
Пробовал, когда он именовался Jade.
DizArt Studio (8 months ago)
Спасибо за ваши старания!) А будут ли уроки по созданию шаблона либо плагина на Wordpress?
Zhandos Mukataev (8 months ago)
Пипец :) Только днем думаю - нужно бы поставить VS Code и здесь же выходит видеоурок у вас))
Plastic Taste (8 months ago)
Как же воремя вышел видос!
Валерий С (8 months ago)
Тоже установил для себя. Спасибо за обозрение. Интересно а будто он работает с Wordpress ? Вроде бы на канале покамест дудки видео с этим редактором на Wordpress///
Очень нравится редактор, достойно изготовлен
MEC Production (8 months ago)
А что насчет emmet,на сколько я знаю он не поддерживается в visual code
Ne Chelovek (8 months ago)
Он встроен в редактор -_-
den4ik (8 months ago)
Кто-нибудь сталкивался с неувязкой, что время от времени VS Code ошибочно автоматом определяет шифровку, т.е. употребляется кириллица, а шифровка определяется будто windows-1252 либо ISO-..., из-за чего кириллические знаки преобразуются в вопросы либо совсем в козябры?
den4ik (8 months ago)
В Brackets до версии 1.10 можно было использовать расширение, которое решало эту делему, а с версии 1.10 с этим расширением редактор вообщем не стартовал у меня, а неувязка с шифровкой этак и осталась.
По поводу этого момента https://youtu.be/8CTJUo8_Dak?t=23m37s кушать решение, меня по началу тоже это дико бесило. Подсказки остались, лишь на "Tab" сейчас забинден лишь Emmet. 1. Изменить в настройках "emmet.triggerExpansionOnTab": true 2. Забиндить другое сочетание кнопок на acceptSelectedSuggestion в настройках Keyboard Shortcuts
А на маке?
Vadim Sysoev (8 months ago)
"editor.snippetSuggestions": "top" ??
Макс Виноров (8 months ago)
во всех редакторах что я перепробовал подсказки показывались с помощью "ctrl + пробел" это вечно работает
Вадим (8 months ago)
В добавление к настройке "emmet.triggerExpansionOnTab": true, также можно добавить "emmet.showSuggestionsAsSnippets": true, и "editor.snippetSuggestions": "top", После этих настроей автокомплит от эммета будет в приоритете и также если в предложении надавить голубую кнопку Info, то будет высвечиваться предложение во что будет разворачиваться набранный код.
Oleg Shevchuk (8 months ago)
что бы узреть перечень для автокомплита можно надавить ctrl+space
Игорь Клевый (8 months ago)
будто скопить проект GO? Поставил Visual Studio Code , не запускает проект, пишет ошибки.
Archik505 (8 months ago)
Игорь Князь Слева, самое нижнее меню «расширения». Вбейте в розыск «Go”(lukehoban) и установите расширение;)
от ои (8 months ago)
А каковы отличия от phpstorm, что лучше для разработки с php+jquery+sass+gulp+git?
Dastin Forest (8 months ago)
Он платный, тяжкий, комфортно им воспользоваться пользуйтесь, здесь холивар больше. Если лишь верстаь, то он не нужен, дело удобстава
Dmitry Korenko (8 months ago)
дудки смысла ассоциировать ide с обычным редактором
Nice Fellow (8 months ago)
Только вчера установил, а сейчас на самом наилучшем канале задание выходит. Благодарю от души! Ты реально самый крутой искусник в YouTube. 👍
Не гласите, этак же третьеводни на тест поставил. Вполне пригодный. Не ждал от Майкрософта.
gfreemankz (8 months ago)
Первый😂

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.