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

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

1625 ratings | 61887 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 (143)
WebDesign Master (7 months ago)
Надоедливые всплывающие подсказки можно отключить незадокументированным параметром: "editor.hover": false, После перезагрузки редактора, всплывающие окна при наведении пропадут.
чё-то не работает этот параметр,поменяли его, теперь нужно "editor.hover.enabled": false
Хотелось бы инфы по поводы настройки и прочего за Live server extension, весьма годное расширение
Chernobilsky_ Fox (26 days ago)
Моя проблема не относится к фронтэнду, но может кто поможет. При написании проги на с++ не хочет подеключать iostream. Я пролезла уже все форумы и теряюсь в догадках о том, как это можно "починить"...
Yuliya (27 days ago)
Подскажите, пожалуйста, а можно как-то поменять цвет отображения пробелов с серого на более заметный?
SERGEY G (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 (1 month ago)
Как выключить фичу которая после того как поставишь курсор на слово выдеяет его и подсвечивает все совпадения ? Это происходит без нажатия хоткеев, просто когда курсор находится в слове.
Black Stalker (1 month ago)
Как скомпилировать .cpp файл?
Victor Nelasy (1 month ago)
Спасибо за видео! Eсть ли VS Code возможность быстро редактировать стили как в Brackets по ctr-E?
Nikita Sokolov (2 months ago)
ctrl + space окрывает подсказки (в том числи и emmet), по аналогии с Microsoft Visual Studio
ребят , как настроить уведомления которые выскакивают в правом нижнем углу?
Vlad Sambor (2 months ago)
Бесят блоки на скобках. Как их убрать?
Автор, подскажите пожалуйста как сделать так, чтобы при написании кода он не вылазил за границы окна по ширине, а переносился на следующую строку
WebDesign Master (2 months ago)
Alt+Z
Всё перечёркивает отсутствие интерактива из коробки и расширения типа live server не помогают :(
ckreta games (3 months ago)
я установил, а как поставить русский язык
main (2 months ago)
левый вертикальный бар - самая нижняя вкладка - в строке поиска russian language pack
ripsavage1977 (3 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 (3 months ago)
При добавлении lorem, тест пишется в одну строку. Как настроить перенос строки, или что бы не появлялось колесо горизонтальной прокрутки?
Круче Атома получается?
X-moto.zp.ua (4 months ago)
Спасибо, хороший обзор. Можете подробней рассказать в очередном видео про отладку.Спасибо.
lolomap (4 months ago)
Стоит ли перейти на данный редактор из vs 2017 для разработки на с++? Вопрос о функционале
Спс, редактор клевый! Это не тот случайно редактор в котором еще лет 15-20 назад на С программеры писали? Майкрософт Вижуал Студио вроде назывался? Скажите, а есть возможность сделать вместо терминала. чтоб окно браузера было? чтоб сразу смотреть че там наверстал?
TheReverOcelot (4 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 (5 months ago)
Я удивлен интересуюсь Visual Studio Code. Буду попробовать. Заранее спасибо. Спрошу. Как тебе нравится Sublime Text или Visual Studio Code? Удобно и быстрее. И еще нужно расширения...
Здравствуйте! Может кто-то сталкивался - при использовании sass не автодополняет классы прописанные в html. Может есть решение?
Max Kaluakin (5 months ago)
Ребята, помогите новичку. Я поставил себе VSC. Все отлично - кроме одного момента. Когда я пытаюсь форматировать код сасс - он у меня преобразовывает стили в одну строку. Не могу понять - как это изменить. Ставил и плагины Бьютифай и тд. Но не спасает.
Gleb Gulin (6 months ago)
день добрый. а как выбрать node вместо powershell для vuejs? другими словами как настроить данную ИДЕ под Vuejs?
IFEXE (6 months ago)
Помогите, в файле .sass при нажатии на Tab выдает такую ошибку "Running the contributed command:'emmet.expandAbbreviation' failed."
Max Freestyler (6 months ago)
подскажите, пожалуйста, хоткей на удаление всей строки
Хороший редактор, хорошее видео. Однако у меня не получилось научить его индексировать подключаемые классы и чужой код. Пока пишу свой класс, он отлично помнит и знает о методах, свойствах, предлагает их на выбор при написании кода. Но заставить его проиндексировать папку ну скажем с MODX я не смог. Никакого аналога external libraries как у PHPStorm не увидел, пробовал просто добавлять папку в проект, но и после этого VisualCode отказывался что-либо знать о подключенном коде. Может кто-то решил эту проблему?
Nick Green (6 months ago)
Спасибо за урок, очень информативно. В принципе, всё как всегда ;)
disco_dinosaur (6 months ago)
Такой вопрос: каким образом можно настроить автоматическое изменения закрывающегося тега? К примеру - я вместо <p>Текст</p> хочу <div>Текст</div>, изменив первый p на div, автоматически менялся второй p на div
плагин - Auto Rename Tag
Автоматически не знаю как, но можно вот так. https://code.visualstudio.com/docs/editor/emmet - во второй гифке рассказывается: 1. Установить курсор в начальный изменяемый тег 2. Вызвать View\Commnd Pallete - Ctrl+Shift+P 3. Выбрать из списка "Emmet: Update Tag" (достаточно ввести em up). 4. Ввести нужный тег. 5. Enter
Спасибо большое за уроки! А как вы относитесь к WebStorm? Нет в планах сделать обзор или урок по шторму?
Pavel _2988 (6 months ago)
Спасибо, очень помогло! Непонятным осталось одно: как скомпилировать файл или проект? Кодю на С++
WebDesign Master (6 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 (7 months ago)
Я включаю режим дзен (ctrl+k + z) вместо скрытия меню, активити и т.д.
Zerk (7 months ago)
Чтобы пофиксить "фичу" с Emmet добавь в настройки "emmet.triggerExpansionOnTab": true "emmet.showAbbreviationSuggestions": false
И Холмов (7 months ago)
если добавить настройку - terminal.integrated.shell.windows на bash, то после перезапуска редактора powerShell из терминала пропадает. Есть у кого вариант решения проблемы?
Спасибо огромное!
Подскажите, как отключить всплывающую ПОДСКАЗКУ(определение) которая появляется при наведении на любой элемент кода!????????????Уже всё перепробывал
WebDesign Master (7 months ago)
На странице урока есть решение.
Макс Дзюбак (7 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 ?
Макс Дзюбак (7 months ago)
Благодарю, Алексей!
WebDesign Master (7 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 (7 months ago)
WebDesign Master_ Не работает Emmet, в чем проблема? Пресет настроек Visual Studio Code:предложенных тобой забил все равно Emmet не желает включаться!!!!!
Vadim Sysoev (7 months ago)
Не используешь автосохранение файлов? files.autoSave
WebDesign Master (7 months ago)
Нет.
CRAZY_ MAX_RU (7 months ago)
Ребят, как настроить корректную вставку скопированного контента в файл? Такая ерунда в Visual Code. Вставляешь с Авакода стили, но строку, куда вставляешь откидывает назад, в самое начало. В ST3 при помощи cmd+shift+v вставлялось все шикарно, но здесь не работает. Где эта канитель настраивается?
Maksim Kazachenka (7 months ago)
CSS Peek(типо Go To Css Declaration на саблайме) очень полезная фича
К сожалению не совсем так, в ST3 при поиске нужного класса, редактор ищет классы в открытых файлах и показывает его там где нашел тоесть в самих файлах, для меня это архиудобно, так как таким образом искал нужные классы и уже после найденного класса продолжал писать код, который относится к тому или иному контейнеру(блоку), в VC - найденный класс редактор отображает код во всплывающем окне и/или открывает документ повторно. А это уже неудобно.
M (7 months ago)
Классный какой редактор, спасибо Алексей!
Сможет заменить php-shtorm? Хочется настроить бесплатный инструмент.
пытался перейти на vs code, но не нашел как настроить Интерактивнаю аббревиатуру(ctrl+alt+enter sublime) и подсказки ввода классов html-sass в обе стороны(в html получилось получать имена классов, а sass файлах нет). Поэтому не срослось с vs code для чего-то серьезного. Буду благодарен, если кто-то подскажет как настроить эти две фичи, а то к хорошему быстро привыкаешь
Aleksandr Pletnyov (7 months ago)
разобрался с проблемой? если да, подскажи пожалуйста
thnx
Благодарю за видео! Долго искал замену Атому и благодаря вам нашел.
Jay Les (7 months ago)
Кто знает как убрать подсказки с документацией, которые показываются, например, при наведении на div, ul, li..?
WebDesign Master (7 months ago)
Надоедливые всплывающие подсказки можно отключить незадокументированным параметром: "editor.hover": false, После перезагрузки редактора, всплывающие окна при наведении пропадут.
Sulaimon Qurbonov (7 months ago)
У меня есть вопрос??? Как запустить на браузере напечатанные коды инструкцию напишите пожалуйста на хром ????????????
Астрологи объявили неделю VS Code. Количество пользователей данной системы увеличено вдвое!
Рома Дворак (1 month ago)
Кто-то в героев переиграл!!!
Supro (2 months ago)
Будущее за vs code. Тот классический vs много весит, много жрет ресурсов, к тому же кроссплатформенный. Есть копия на Linux, который тоже не менее стремительно развивается.
Рома Дворак (2 months ago)
аххахаахахахаахаххаа!!!
Град (4 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 (7 months ago)
Всё, что запланировано и анонсировано выйдет своевременно.
Если при работе пашет нода и тебе нужно установить пакет, то пакет требует перезагрузку. Сейчас при перезагрузке терминал вырубается, после чего нужно заново запускать вотчи. Но еще некоторое время назад при перезагрузке, терминал якобы вырубался, а нода все равно в задачах висела. Веду к тому, что часто обновления кидают, что есть хорошо.
Alexey Pavlov (8 months ago)
emmet autocomplite ctrl+space
Quaden Channel (8 months ago)
Кто знает можно ли перенести установленные расширения в vscode на другой комп?
Макс Дзюбак (7 months ago)
Переустанавливал винду с 7 на 10. Все расширения скопировал. Вставил просто в папку extension. Все установилось на ура.
alexmicr (8 months ago)
Поставил под Windows 10. В окне редактора черное окно. Видно только верхнее меню. Кто знает, что делать. Изменить палитру ч.з меню нельзя, его не видно
alexmicr (7 months ago)
Огромное спасибо. Все заработало.
Алекс Чаб (7 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, видео пригодится 👍🏼
Вячеслав (2 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 (7 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 (7 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 (7 months ago)
"editor.snippetSuggestions": "top" ??
Макс Виноров (7 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.