Как в vs code сделать шаблон html

Настройка vs code

Заходим на официальный сайт программы код вс и скачиваем установщик.

Программа работает под windows, mac os и linux.

После загрузки нас перекинет на страницу с документацией.

Вернёмся к программе vs code и запустим её.

Плагины для vs code

Поменять язык в vs code Система вс кода сама определит, что на компьютере установлен русский язык и предложит установить языковой пакет.

Вручную установить можно из панели управления выбрать пункт меню расширения.

В поле ввода пишем слово russian.

Найдутся плагины для языка, устанавливаем языковой пакет.

All autocomplete плагин помогает сразу писать класс в css, не вспоминая как он был в html.

All autocomplete плагин

Autoprefixer помогает расставлять префиксы в css.

Beautify. Если код поехал, стал не упорядочен, то мы запускаем плагин Beautify и он расставляет всё по правилам.

Bootstrap v4 snippets. Готовые участки кода от четвертой версии Bootstrap.

Помогает быстро вставить кнопку, форму или прогресс бар через поиск сниппета.

Eslint. Позволяет проверять правильно ли написан javascript код.

8 GitHub.

Live Sass compiler. Компилирует внутри программы вс код файлы стилей.

Twig расширение даёт подсветку кода при работе с шаблонами open cart.

12 GistExtension. Эта функция позволяет использовать свои Gist.

Заходим или регистрируемся на сайт GistGithub.

Внутри мы создаём свои кусочки кодов, которые могут понадобиться.

В вс коде зажимаем клавишу F1 выбираем gist open block, и мы увидим все наши кусочки кода, которые можем добавить в наш проект.

Не терять время их искать.

Также когда мы написали новый код, который может быть, понадобиться в будущем, то сохраняем его в интернет через create new block.

Проверяем, появился ли он на сайте GitHub.

Настройка параметров vs code

Слева редактора будет панель ActivityBar, она даёт доступ к отладке и к установке расширений.

Эту панель можно убрать, учится вызывать всё горячими клавишам.

  • Ctrl b открыть панель, повторное нажатие закрыть.
  • Клавишей ctrf+shift+f вызываем панель поиска.

Для настройки редактора перейдём в файл settings и видим выпадающее меню параметров, нажимаем на этот пункт.

Поменяем несколько параметров, которые улучшают работу в редакторе вс код.

В верхней части в поле поиска пишем:

  1. StatusBar параметр, который отвечает за отображение нижней полоски редактора. Отключаем его visible в положение false.
  2. MenuBar отображает строку меню. Делаем этот параметр выпадающим toogle при нажатии горячей клавишей alt.
  3. ActivityBar параметр убирает боковое меню. Отключили все меню.
  4. Minimap отображает в редакторе кода маленькую копию странички с кодом. Помогает быстрее искать нужные строки, если длинный код.
  5. DefaultLanguage параметр, который задаёт тип новому документу при создании ctrl+n. В поле этого параметра напишем значение html.
  6. FontSize размер шрифта, как в html, выставим 16.
  7. TabeSize выставим два, по умолчанию 4.
  8. DetectIndentation полоски отображения расстояний между Tabs в коде. Мы используем препроцессор sass, поэтому для понимания, на каком уровне находится стиль блока используем их.
  9. InsertSpaces отвечает за жёсткую или мягкую табуляцию. Делаем, чтобы вместо пробелов вставлялись tab. Отключаем параметр и проверяем, что пропали пробелы внутри одного Tab.
  10. Folding отключает сворачивание и разворачивание кода.
  11. GlyfMargin отображает поля глифа в редакторе вс кода. Это поле используется для debug отладки javascript, python, c и других языков программирования. Можно это поле отключить.
  12. SmoothScrolling делает плавное перемещение курсора мыши в редакторе кода vs code.

Emme для вс кода

Emmet встроенный плагин работает вначале как подсказка структуры, которая будет. Как можно быстро верстать плагином emmet читать тут.

Клавишей Tab разворачивается код.

Терминал в вс коде

Консоль кода очень удобна.

Вызываем её через меню терминал, создать Terminal.

Пишем команду gulp и изнутри запускается окно с нашим проектом. Нет лишнего действия, когда нужно переходить в консоль.

Терминал в вс коде

В параметре пользователя Terminal.integrated можно поменять консоль на другую.

Тему для цветовой схемы также можно менять в настройках.

По умолчанию, стоит лучшая тема с цветами.

Как проверить встроенный live reloader? В нижней части экрана есть кнопка Go live нажимаем её и сразу открывается окно браузера.

9 полезных плагинов VS Code для вёрстки

Роман Ивойлов

Visual Studio Code — один из самых популярных редакторов кода. Многие разработчики предпочитают его, так как он удобен в использовании и содержит множество полезных расширений, с помощью которых легко оптимизировать работу.

Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.

Сделали подборку популярных и полезных плагинов VS Code.

Emmet

Помогает ускорить вёрстку. С помощью ! и tab можно создать базовую структуру кода за 1 секунду, либо быстро создать вложенные теги.

Много разных фишек, с которыми можно разобраться и ускорить процесс работы. Поддержка emmet встроена прямо в редактор, устанавливать не нужно.

Material Theme

Приятная тема для редактора с разными акцентными цветами.

Расширение Material Theme в Visual Studio Code

Live Server

Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.

Расширение Live Server в Visual Studio Code

Это очень удобно, так как любые изменения будут отображаться без обновления страницы. Не забывайте отключать плагин с помощью «Stop Live Server»

CSS Peek

Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.

Расширение CSS Peek в Visual Studio Code

Bracket pair colorizer

Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет быстрее разобраться в коде.

Prettier — code formatter

Приводит любой код в нормальный вид за считанные секунды. Комбинация Ctrl+Shift+P отформатирует документ и задаст структуру коду.

Auto rename tag

Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.

Path autocomplete

Показывает возможный путь к файлу в кавычках. Не нужно искать папку вручную, путь будет предложен автоматически.

HTML CSS Support

Если вы используете много классов и тегов, могут возникнуть ошибки при их написании. Плагин автоматически дополняет название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link.

Используйте эти плагины на курсе по вёрстке сайтов

Запишитесь на ближайший поток курса «HTML и CSS. Профессиональная вёрстка сайтов», чтобы попробовать всё на практике.

Используем VS Code для Веб-разработки

VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке, либо указав update.channel как «insiders» в настройках VS Code.

React и JSX

В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного пот помучаться и установить два расширения:

Последний, впрочем, может быть заменен на XO.

Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

CSS, LESS, SCSS и Stylus

В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве «бекенда» он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

Другие полезные плагины в зависимости от языков, с которыми вы работаете

    — популярный в среде AngularJS язык программирования — плагин для flowtype, статического тайп-чекера от facebook для JavaScript’а. Полезен, если хочется добавить в проект типизацию, но не хочется по каким-либо причинам использовать TypeScript. — поддержка шаблонов handlebars — будет полезен опять же для AngularJS разработчиков и верстальщиков (по понятным причинам бесполезен при работе с JSX), демо можно посмотреть здесь htmlhint.com — старый добрый шаблонизатор для PHP —еще один плагин для Stylus, если по какой-то причине не понравился stylelint —шаблонизатор для javascript, используется, например, в проекте Mean.JS — поддержка одного из самых популярных шаблонизаторов PHP. Часто используется в Symfony проектах. —полезный для XML/XSLT разработчиков набор плагинов

Сниппеты

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

Полезные расширения

Align

Beautify

Интерфейс к jsbeautifier.org. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Интеграция с Dash

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

Поддержка формата .editorconfig

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

Темы оформления

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Бинды (сочетания клавиш)

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

Нет нужного расширения?

Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

Заключение

Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

Готовим редактор VS Code для работы с Angular

Чуть более года назад, я написал пост Мой новый любимый редактор — Atom, в котором рассказал о смене старого-доброго Саблайма на Атом. Но время шло, и по мере моего все большего увлечения JavaScript и, в частности TypeScript и Angular, как средствами написания правильного модульного кода, мне пришлось снова сменить редактор. И вот уже порядка 5-6 месяцев я пишу код, используя VS Code. Почему так сложилось, потому, что изначально VS Code заточен под работу с TypeScript, не мудрено ведь и редактор и «язык» детища Microsoft, а там постарались, чтобы они как нельзя подходили друг другу. По моему сугубо личному мнению — это вообще два наиболее удачных продукта компании. Но сейчас не об этом, сейчас а том, как дополнить VS Code, чтобы писать приложения на Angular 4 на нем было максимально удобно.

Итак, не для кого не секрет, что Google делает акцент на использовании Angular 4 именно совместно с TypeScript — это еще один плюс к тому, чтобы использовать VS Code для удобной работы. Поскольку VS Code заточен под TypeScript, то в этом посте я расскажу именно о наборе плагинов, которые улучшат возможности написания кода Angular 4. В итоге мы получим отличный инструмент.

Расширения VS Code для Angular 4

Angular v4 TypeScript Snippets

Собственно, название говорит само за себя. Плагин содержит очень большую коллекцию сниппетов, для того чтобы ускорить процесс написания кода. Вы сможете как генерировать стандартные стартовые сниппеты для компонентов, сервисов, модулей так и использовать сниппеты шаблонов для генерации циклов ngFor или разворачивания ngModel.

Angular 4 and TypeScript/HTML VS Code Snippets

Это расширение похоже на предыдущее. Данный плагин содержит 16 сниппетов для скриптов и 12 бля шаблонов. Вы можете попробовать оба и решить какое подходит именно вам. Если судить по количеству скачиваний, то первое далеко впереди текущего. Но какое именно использовать решать вам. Но иметь под рукой набор сниппетов буде полезным.

Angular Files

Это расширение фактически выполняет те же функции, которые берет на себя Angular CLI. Кликнув правой кнопкой на директории проекта вы сможете выбрать для создания готовый набор файлов компонента, директивы, модуля, сервиса или пайпа. Все файлі генерируются согласно официального Angular Style Guide. Если вы используете CLI, то возможно оно вам не понадобиться, но знать, что оно есть не помешает.

Angular Language Service

Этот плагин расширяет возможности редактирования шаблонов Angular, как встроенных, так и внешних, включая:

  • списки автоподстановки;
  • диагностические сообщения;
  • быструю информацию;
  • переход к определению.

angular2-inline

Этот пакет является языковым расширением для Visual Studio Code. Он расширяет языки JavaScript и TypeScript, чтобы добавить специфические особенности Angular2 для встроенных шаблонов и таблиц стилей.

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

Функции, предоставляемые этим расширением:

  • подсветка синтаксиса встроенных html и css;
  • завершение кода, подсветка и информации для встроенного html при наведении.

angular2-switcher

Плагин позволяет быстро переключаться между файлами текущего компонента. Скажем, что вы находитесь в файле accordion.ts: с помощью простого ярлыка вы теперь можете переключиться на accordion.css или accordion.html. Весьма удобно, не правда ли?

Если вы используете Bootstrap и ng-bootstrap, когда пишите ваше приложение, то это расширение будет вам определенно полезно. Оно содержит более 20 сниппетов, чтобы в один момент развернуть самые популярные компоненты ng-bootstrap. Просто начните вводить ngb и смотрите, что получиться

Вспомогательные расширение

А здесь я хотел бы добавить несколько расширений, которое непосредственно не относятся к Angular, но будут полезны при написании качественное кода.

Если вы еще не линтите ваш код — начните сейчас.

Если ві все-таки єто делаете, то видеть ошибки рядом с кодом намного удобнее, чем искать их в терминале. Это как раз то, что делает TSLint.

Он будет выделять код в том месте, где у вас есть проблема, и отображать список предупреждений и ошибок при зависании. Вы также можете просмотреть список всех обнаруженных проблем на панели «Проблемы».

TypeScript Hero

Замечательный плагин, который автоматически добавляет и организует импорты, по мере того как вы пишите ваш код. Собственно, больше сказать нечего, но и этим все сказано. Похожим функционалом также обладает плагин Auto Import. Можете попробовать оба и выбрать свой.

Path Intellisense

Это один из must-have плагинов. Он позволять автоматичиски дополнять именно файлов по мере ввода строки. Очень полезен при импортах, да и в целом. Возможно, вскоре этот функционал будет интегрирован в редактор, но пока плагин очень помогает.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *