Vs code html: 9 полезных плагинов VS Code для вёрстки — Блог HTML Academy

Содержание

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

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

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

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

Emmet

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

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

Material Theme

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

Live Server

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

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

Как использовать Live Server в работе

CSS Peek

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

Bracket pair colorizer

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

Prettier — code formatter

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

Auto rename tag

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

Path autocomplete

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

HTML CSS Support

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

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

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

Хочу на курс

Нажатие на кнопку — согласие на обработку персональных данных

34 полезных расширения VS Code, которые упростят работу разработчика

Фронтенд-разработчик, UX/UI-дизайнер Савио Мартин опубликовал в блоге на dev.to 34 расширения Visual Studio Code (VS Code) для повышения продуктивности.

Вот они. 

1. Auto Rename Tag. Автоматически переименовывает парный тег «HTML/XML» так же, как Visual Studio IDE. 

2. Better Comments. Помогает создавать в коде более понятные комментарии. Расширение позволяет разбивать аннотации на следующие категории: 

  • Оповещения;
  • Запросы;
  • TODO-комментарии;
  • События. 

3. Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro Snippets. Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font Awesome 4, Font Awesome 5 Free и Pro Snippets. Плагин работает как в стабильной, так и в инсайдерской сборке. 

4. Bracket Pair Colorizer 2. Позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены должны соответствовать и какие цвета использовать. 

5. change-case. Позволяет быстро изменить регистр текущего выделенного текста или слова. 

6. Code Runner. Запускает фрагмент или файл кода для нескольких языков (полный список доступен здесь) и пользовательские команды. 

7. Code Spell Checker. Цель расширения — проверка распространенных ошибок и уменьшение количества ложных срабатываний. Хорошо работает со стилем написания составных слов CamelCase (верблюжий регистр). 

8. CSS Peek. Разрешает просмотр идентификаторов CSS и строк классов как определений из HTML-файлов в соответствующий CSS-файл. Позволяет просматривать и переходить к определению. 

9. Debugger for Chrome. Расширение для отладки JavaScript-кода в браузере Google Chrome или других задач, поддерживающих протокол Chrome DevTools Protocol. 

10. EJS language support. Подсветка синтаксиса для тегов EJS, JavaScript и HTML. Включает автозаполнение javascript. 

11. ES7 React/Redux/GraphQL/React-Native snippets. Расширение для React, Redux и GraphQL в JavaScript/TypeScript с синтаксисом ES7 и функциями плагина Babel для VS Code. 

12. GitHub Pull Request and Issue. Позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code. 

13. GitLens — Git supercharged. Расширяет возможности Git, встроенные в VS Code. Среди функций: 

  • Визуализация авторства кода с помощью аннотаций Git;
  • Плавное перемещение и исследование репозитория Git;
  • Получение необходимой информации с помощью команд сравнения. 

14. Google Fonts. Расширение позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код. 

15. Image Preview. Расширение для предварительного просмотр изображений при наведении курсора. 

16. GraphQL. Добавляет подсветку синтаксиса, его проверку и языковые функции, такие как: 

  • Переход к определению;
  • Просмотр информации о наведении и автозаполнение для проектов graphql;
  • Работа с запросами, помеченными тегом gql

17. vscode-styled-components. Подсветка синтаксиса и IntelliSense для стилизованных компонентов. Использует грамматику CSS, построенную на основе 

language-sass и language-css

18. Prettify JSON. Расширение Prettify JSON для Visual Studio Code. 

19. Import Cost. Позволяет отображать в редакторе размер импортированного пакета. Для этого расширение использует webpack и babili-webpack-plugin

20. IntelliSense для имен классов CSS в HTML. Обеспечивает завершение имени класса CSS для атрибута HTML class на основе определений, найденных в рабочей области или внешних файлах, на которые ссылается элемент link

21. JavaScript (ES6) code snippets. Расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS CODE. Поддерживает как JavaScript, так и TypeScript. 

22. Live Server. Запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц.

23. Live Share. Расширение для совместной разработки, редактирования и отладки в режиме реального времени. Позволяет мгновенно и безопасно делиться проектами. Разработчики, которые подключаются к сеансам, получают необходимые файлы по текущему проекту и могут начать работу без необходимости клонирования репозиториев или SDK. 

24. Markdown Preview Enhanced. Расширение для тех, кто знаком с Markdown Preview Plus или RStudio Markdown. Имеет множество полезных функций, среди которых: 

  • Автосинхронизация скролла;
  • Поддержка языка диаграмм PlantUML,
  • Экспорт PDF,
  • Создание презентация. 

25. Mongo Snippets for Node-js. Расширение для проектов Node-js. Содержит: 

  • Сниппеты для подключения к документоориентированной системе управления базами данных MongoDB и запросов;
  • Команду Palette Feature для настройки кода шаблона;
  • Предложения по доработке для моделей Mongoose Models. 

26. npm. Поддерживает выполнение npm-скриптов, определенных в файле package.json, и проверку установленных модулей на соответствие зависимостям, определенным в package.json

27. npm Intellisense. Плагин Visual Studio Code, который автоматически заполняет модули nmp в операторах импорта. 

28. Placeholder Images. Расширение позволяет создавать и вставлять так называемые изображения-заполнители в HTML-код в VS Code с помощью сторонних сервисов, таких как

Unsplash, placehold.it и LoremFlickr

29. Polacode. Позволяет делать скриншоты кода с пользовательскими шрифтами и темами. 

30. Prettier — Code formatter. Средство для форматирования кода. Нацелено на использование жестко заданных правил по оформлению программ. Обеспечивает согласованный стиль, анализируя код и повторно воспроизводя его с особыми правилами, которые принимают во внимание максимальную длину строки. 

31. Tabnine Autocomplete. Помощник на основе искусственного интеллекта (ИИ). Помогает кодировать быстрее и уменьшить количество ошибок. Изучает общедоступный код и использует алгоритмы глубокого обучения ИИ. 

32. Tailwind CSS IntelliSense. Расширяет возможности разработки Tailwind, предоставляя пользователям VS Code больше функций, например, автозаполнение, выделение синтаксиса и линтинг (процесс проверки исходного кода на программные и стилистические ошибки).

33. Luna Paint. Позволяет редактировать растровые изображения из VS Code. 

34. Quokka.js. Инструмент повышения производительности разработчика для быстрого прототипирования JavaScript/TypeScript. Значения времени выполнения обновляются и отображаются в IDE-среде рядом с кодом по мере его ввода.

Расширение webhint для Visual Studio Code — Microsoft Edge Development

  • Чтение занимает 2 мин

В этой статье

Используйте webhint, настраиваемый инструмент подкладки, чтобы повысить доступность, производительность, совместимость между браузерами, PWA совместимость и безопасность вашего сайта. Он проверяет код на наличие лучших практик и распространенных ошибок. Этот проект с открытым исходным кодом, изначально разработанный Microsoft Edge, теперь является частью OpenJS Foundation. Команда Microsoft Edge продолжает вносить свой вклад в веб-веб-сайты вместе с веб-разработчиками в сообществе.

Определите и исправьте проблемы в HTML, CSS, JavaScript, TypeScript и других, добавив расширение webhint для Visual Studio Code. Подсказки отображаются в качестве подчеркнутой линии и суммируются в области Проблем.

Расширение webhint для Visual Studio Code

Установка веб-хинта

Чтобы установить расширение webhint из Visual Studio Code, перейдите к расширению webhint для Visual Studio Code. Также можно установить расширение веб-Visual Studio Code из Visual Studio Marketplace.

Настройка веб-хинта в Visual Studio Code

Это расширение использует json-файл конфигурации по умолчанию, который активирует подсказки и разметки для HTML, CSS, систем шаблонов (JSX/TSX, Angular и так далее), JavaScript/TypeScript и т. д.

{
    "connector": "local",
    "extends": [
        "accessibility",
        "progressive-web-apps"
    ],
    "formatters": [
        "html",
        "summary"
    ],
    "hints": [
        "apple-touch-icons",
        "button-type",
        "compat-api/css",
        "compat-api/html",
        "create-element-svg",
        "css-prefix-order",
        "disown-opener",
        "highest-available-document-mode",
        "manifest-exists",
        "meta-charset-utf-8",
        "meta-viewport",
        "no-bom",
        "no-protocol-relative-urls",
        "scoped-svg-styles",
        "sri",
        "typescript-config/consistent-casing",
        "typescript-config/import-helpers",
        "typescript-config/is-valid",
        "typescript-config/no-comments",
        "typescript-config/strict",
        "typescript-config/target"
    ],
    "hintsTimeout": 10000,
    "parsers": [
        "babel-config",
        "css",
        "html",
        "javascript",
        "jsx",
        "less",
        "sass",
        "typescript",
        "typescript-config",
        "webpack-config"
    ]
}

Если необходимо больше контролировать активированные подсказки и разберегатели, создайте локальный файл для .hintrc настройки веб-хинта. Для справки по выходу из определенных подсказок перейдите в руководство пользователя webhint.

Контакт с командой веб-сайтов

Отправка отзывов путем подачи проблемы в веб-GitHub репо.

Чтобы внести свой вклад в расширение, перейдите к Способствуя при webhintio/hint репо.

См. также

Как пользоваться плагином Emmet (VS Code)

Вы здесь: Главная — Как пользоваться плагином Emmet (VS Code)

Для VS Code не нужно устанавливать отдельный плагин Emmet, разработчики данного редактора обоснованно посчитали, что без Emmet-а уже никак не обойтись разработчикам и встроили его в редактор. Однако не все новички умеют пользоваться плагином Emmet, тем самым воруют сами у себя драгоценное время и превращают процесс написания кода в скучную рутину. Эта статья будет полезна тем, кто много пишет кода, но все еще не использует Emmet в работе.

Как пользоваться Emmet верстальщику

Emmet позволяет быстро набирать код, благодаря использованию большого количества сокращений (аббревиатур). Вы не набираете ручками HTML/CSS код целиком, а прописываете их в сокращенном виде и после нажатия определенных комбинаций клавиш, код полностью разворачивается.

Emmet: HTML сокращения

Создать базовую структуру HTML документа

Если набрать в редакторе «!» и нажать Tab, то Emmet вставит скелет HTML документа.


Подключение CSS файла

Для подключения CSS файла к HTML документу, достаточно написать link и нажать Tab, чтобы Emmet вставил весь тег.

    <link rel="stylesheet" href="">
Развернуть ссылку

Меня всегда бесило прописывание в ссылке http и вот наконец-то пришел конец моим мучениям a:link.

    <a href="http://"></a>

Добавить тег

Чтобы добавить тег, нужно просто написать название тега и нажать Tab.

    <section></section>

Для добавления тега с классом, вводите только название класса и точку .box.

    <div></div>

Если нужен какой-то другой тег с классом, то соответственно пишем header.top

    <header></header>
Развернуть список

С Emmet стало проще разворачивать списки, пользуясь формулой ul>li*5.

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

Генерация текста lorem

Невероятно просто стало генерировать текст с любым количеством абзацев p*3>lorem.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae illum placeat quisquam, eaque quia vero neque, itaque ducimus cum quasi doloribus aperiam eos dignissimos, eum labore esse. Eligendi, veritatis nulla!</p> <p>Autem maxime unde iusto sunt atque deleniti perspiciatis id praesentium. Necessitatibus sequi non delectus! Maxime voluptates excepturi ducimus nesciunt at, dolor iste molestias itaque sed esse nisi perferendis sequi! Fugiat?</p> <p>Suscipit molestias odit impedit voluptatem laborum a est, iure dolorum autem? Accusamus, esse pariatur ipsam eum consequatur error, accusantium corporis magni a ipsa blanditiis neque impedit porro, alias deserunt voluptatibus?</p>

Emmet: CSS сокращения

Аббревиатуры CSS сокращений исходят из названия самих свойств, поэтому здесь все логично. Напишем стили вместе с Emmet для селектора header. Вам не нужно ничего заучивать, плагин Emmet умеет давать подсказки.


    header {
        mb30
        pr10
        bg
        c
    }

    header {
        margin-bottom: 30px;
        padding-right: 10px;
        background: #fff;
        color: #ccc;
    }

Как видите использование Emmet в разы ускоряет написание кода, при условии что вы хорошо знаете HTML теги и CSS свойства. Кроме того прописывание всего селектора (свойство: значение), малоинтересное занятие. Если вы ещё не используете Emmet, то я настоятельно рекомендую не отказываться от такой замечательной возможности.

  • Создано 13.03.2020 10:58:05
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

27 супер плагинов VS Code для JavaScript разработчика

Думаете, что уже установили на свой VS Code все, что нужно? Вы просто еще не видели эти расширения! Срочно смотрите и устанавливайте!

Visual Studio Code (известный также как VS Code) – легкий, но мощный кроссплатформенный редактор исходного кода. Великолепно подходит для веб-разработки. У него есть множество встроенных плюшек вроде поддержки TypeScript и дебаггера Chrome. А кроме того – триллионы плагинов, с которыми любая сфера программирования станет намного проще.

Представляем топ-лист расширений для JavaScript разработчика!

1. Project Snippets

Великолепный плагин Project Snippets основан на встроенной в VSCode фиче user snippets. Эта удобная возможность позволяет сохранять фрагменты кода, а затем повторно их использовать – в текущем или новом проекте.

Как опытный JavaScript разработчик вы непременно обнаруживали, что набираете один и тот же код не в первый раз. Например, что-то подобное для React-проекта на TypeScript:

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return {
    ...state,
  }
}

export default useSomeHook

Этот кусок можно просто поместить в набор пользовательских сниппетов. Тогда вместо того, чтобы в следующий раз писать его с нуля (или копировать из другого проекта и вставлять в новый), вы просто введете кастомный префикс этого фрагмента.

Пройдите по цепочке File > Preferences > User Snippets > New Global Snippets File. Редактор предложит вам ввести имя нового сниппета – typescriptreact.json. Сразу после ввода откроется новый json-файл, который вы можете использовать для React-приложений на TypeScript.

Сниппет будет выглядеть вот так:

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

Теперь воспользуемся им в деле. Создайте новый TypeScript файл с расширением .tsx, напечатайте в нем префикс, соответствующий только что созданному фрагменту – rsr. Умный редактор сразу же предложит вам сгенерировать сниппет. Для его вывода вы можете воспользоваться выпадающим меню или нажать клавишу tab.

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

Проблема в том, что этот фрагмент будет сохранен для всех ваших проектов. Иногда это очень здорово (для каких-нибудь базовых шаблонов). Но зачастую проекты по-разному сконфигурированы и для них требуются разные сниппеты.

Ваш глобальный файл настройки typescriptreact.json может выглядеть вот так:

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}

Это становится проблемой, когда необходимо различать разные варианты. Если вы работаете над проектом с другой файловой структурой, в котором компонент Link лежит по пути components/Link, созданный сниппет уже не подойдет.

Обратите внимание, что в трех шаблонах border test значения свойства обернуто в одинарные кавычки: border: '1px solid red'. В JavaScript это абсолютно правильно, но что если в своем проекте вы используете styled-components? Такой синтаксис вам не подойдет, ведь styled-components работают с обычным CSS.

Вот здесь и восходит звезда расширения project snippets для VSCode. Оно дает вам возможность создавать фрагменты не только на глобальном уровне, но и на уровне проекта/рабочей области, чтобы они не мешали друг другу.

2. Better Comments

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

Сделайте ваши комментарии заметнее и понятнее с помощью плагина Better Comments, который раскрасит их в соответствии со значением:

Теперь вы легко можете оставить своей команде предупреждение или задать вопрос с помощью символов ! и ? – они точно будут замечены.

3. Bracket Pair Colorizer

Этот плагин вам совершенно необходим! Bracket Pair Colorizer всего лишь раскрашивает разные пары скобок разными цветами – но эта мелочь потрясающе влияет на вашу продуктивность!

Программирование на JavaScript должно быть приятным, а не раздражающим.

4. VSCode Material Theme

Material Theme – легендарная тема оформления, доступная и для вашего VSCode.

Вполне возможно, что это лучшая из всех когда-либо существовавших тем – установите ее прямо сейчас!

5. @typescript-eslint/parser

Если вы активно используете TypeScript в разработке, то пора задуматься о переносе конфигураций TSLint в ESLint + TypeScript, ведь очень скоро поддержка этого инструмента будет прекращена.

Проекты постепенно готовятся к принятию @typescript-eslint/parser и связанных с ним модулей.

С новыми настройками вы по-прежнему можете использовать большинство правил ESLint. Сохраняется совместимость с Prettier.

6. Stylelint

Если вы еще не используете расширение stylelint для VSCode – какие у вас могут быть оправдания? Срочно установите, ведь оно:

  • помогает избежать ошибок в CSS;
  • контролирует соблюдение соглашений о стиле;
  • работает с Prettier;
  • понимает ванильный CSS, а также препроцессоры SCSS/Sass/Less;
  • поддерживает различные плагины, созданные сообществом.

7. Markdownlint + docsify

Многие разработчики любят делать заметки в markdown-файлах: это простой и понятный формат, его легко и писать, и читать.

Существует множество инструментов, которые делают процесс работы с markdown-разметкой еще приятнее. В их числе markdownlint, который следит за форматированием файлов.

А для генерирования документации используйте плагин docsify, который поддерживает Markdown.

8. TODO Highlight

Плагин TODO Highlight просто выделяет TODO-комментарии, которые JavaScript разработчик оставляет в коде. Теперь вы точно не забудете, что хотели исправить или улучшить.

9. Import Cost

Плагин Import Cost сообщает вам, сколько весит модуль, который вы собираетесь импортировать в проект.

Этот инструмент особенно полезен в первый период использования. Некоторое время (и много написанного кода) спустя, вы уже запоминаете размер основных пакетов. Тем не менее, попробуйте, это может оказаться хорошим опытом.

10. Highlight Matching Tag

Признавайтесь, часто теряетесь в веренице тегов? Highlight Matching Tag будет искать потерянный закрывающий дескриптор за вас.

11. vscode-spotify

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

Плагин vscode-spotify позволяет использовать Spotify прямо внутри вашего VSCode! Теперь вы можете управлять своим плеером, не покидая редактора.

12. GraphQL for VS Code

GraphQL стремительно набирает популярность, и мы всё активнее используем его в  JavaScript-проектах. Пора бы уже подумать об установке GraphQL for VSCode в ваш редактор.

Плагин умеет подсвечивать синтаксис, проверять и автоматически дополнять код.

13. Indent-Rainbow

Плагин Indent-Rainbow структурирует ваш код, выделяя отступы разными цветами. Теперь здесь намного проще ориентироваться:

14. Color Highlight

Очень удобный плагин, который находит внутри кода обозначения цветов в разном формате и соответственно подсвечивает их.

15. Color Picker

Это расширение для VS Code предлагает вам графический интерфейс для выбора нужного цвета.

16. REST Client

Возможно, плагин REST Client не покажется вам супер полезным на первый взгляд по сравнению, например, с привычным Postman. Однако, поиграв с ним немного, JavaScript разработчик уже не сможет жить по-прежнему.

Это замечательный инструмент для тестирования API. Вы можете просто создать новый файл и написать в нем:

https://google.com

Теперь чтобы отправить HTTP GET-запрос, вам нужно просто выделить эту строку, открыть палитру команд (CTRL+SHIFT+P) и выбрать в ней Rest Client: Send Request. Данные полученного ответа будут показаны в новой вкладке – очень удобно и полезно!

Вы даже можете передать GET-параметры или тело POST-запроса, добавив всего пару строк кода:

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "[email protected]", "password": 1 }

Этот фрагмент соответствует POST-запросу с параметрами {"email": "[email protected]", "пароль": 1 }.

Это лишь крошечная часть возможностей REST Client. Вы можете узнать о нем больше, если интересно.

17. Settings Sync

Терпеть не можете вручную прописывать настройки ваших плагинов? На помощь вам спешит – вот неожиданность! – еще один плагин –  Settings Sync.

Все, что нужно, это аккаунт на gist/GitHub. Каждый раз, когда вы хотите сохранить свои настройки – включая горячие клавиши, сниппеты, расширения – просто нажмите SHIFT+ALT+U, и они будут загружены в вашу учетную запись. При следующем входе в систему или переносе на другой компьютер, вы можете вновь загрузить их комбинацией SHIFT+ALT+D.

18.Todo Tree

Расширение Todo Tree для VS Code соберет по вашей команде все задачи, разбросанные по приложению, в одно дерево в левой части рабочей области редактора.

19. Toggle Quotes

Toggle Quotes – забавная утилита, позволяющая переключаться между разными типами кавычек. Это особенно удобно при использовании строковых интерполяций.

20. Better Align

Вы можете выровнять ваш код без предварительного выделения с помощью плагина  Better Align. Просто поместите курсор в нужное место, откройте палитру команд (CTRL+SHIFT+P) и вызовите команду Align.

21. Auto Close Tag

Эта небольшая полезная утилита закрывает за вами теги – ей не трудно.

22. Sort Lines

Специально для перфекционистов, которые не смогут уснуть, если массивы строк в их программе не отсортированы по алфавиту! Плагин Sort lines для VS Code сделает вашу жизнь проще.

23. VS Code Google Translate

Совершенно незаменимая вещь для программиста! Если вы не знаете, как правильно назвать переменную или работаете в проекте с поддержкой нескольких языков, обязательно установите VS Code Google Translate. Теперь вы можете переводить, не уходя из редактора.

24. Prettier

Все знают Prettier – это замечательный парикмахер для вашего JavaScript/TypeScript/и т. д. кода.

25. VS Code Material Icon Theme

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

26. IntelliSense for CSS Class Names in HTML

Плагин IntelliSense for CSS class names in HTML обеспечит умное автозавершение для CSS-классов в HTML-коде. Нам этого действительно не хватало!

27. Path Intellisense

Одно из самых полезных расширений VS Code. Path Intellisense умеет автоматически завершать имена файлов, которые вы набираете.

Еще больше плагинов для VS Code

Нашли что-то новенькое? Делитесь и тем, что мы могли упустить 😉

Настройка VS Code для разработки Vue


Visual Studio Code — один из наиболее часто используемых редакторов кода в мире прямо сейчас. У редакторов, как и у многих программных продуктов, есть цикл. Когда-то фаворитом разработчиков был TextMate, затем Sublime Text, теперь VS Code.

Самое замечательное в популярности состоит в том, что люди посвящают много времени созданию плагинов для всего, что они представляют.

Один из таких плагинов — отличный инструмент, который может помочь нам, разработчикам Vue.js.

Ветур

Это называетсяВетур, он очень популярен, его скачали более 3 миллионов раз, и вы можете найти егов Visual Studio Marketplace.

Установка Vetur

Нажатие кнопки Install вызовет панель установки в VS Code:

Вы также можете открыть расширения в VS Code и выполнить поиск по запросу «vetur»:

Что дает это расширение?

Подсветка синтаксиса

Vetur обеспечивает подсветку синтаксиса для всех файлов исходного кода Vue.

Без Vetur файл .vue будет отображаться VS Code следующим образом:

с установленным Vetur:

VS Code может распознавать тип кода, содержащегося в файле, по его расширению.

Используя однофайловый компонент, вы смешиваете разные типы кода внутри одного файла, от CSS до JavaScript и HTML.

VS Code по умолчанию не может распознать такую ситуацию, а Vetur позволяет выделять синтаксис для каждого типа кода, который вы используете.

Vetur предоставляет поддержку, среди прочего, для

Фрагменты

Как и в случае с подсветкой синтаксиса, поскольку VS Code не может определить тип кода, содержащегося в части файла .vue, он не может предоставить фрагменты, которые мы все любим: фрагменты кода, которые мы можем добавить в файл, предоставляемые специализированными плагинами.

Vetur предоставляет VS Code возможность использовать ваши любимые фрагменты в однофайловых компонентах.

IntelliSense

IntelliSense также включен, Vetur, для каждого отдельного языка с автозаполнением:

Строительные леса

Помимо включения настраиваемых сниппетов, Vetur предоставляет собственный набор сниппетов. Каждый из них создает определенный тег (шаблон, скрипт или стиль) на своем собственном языке:

  • vue
  • template with html
  • template with pug
  • script with JavaScript
  • script with TypeScript
  • style with CSS
  • style with CSS (scoped)
  • style with scss
  • style with scss (scoped)
  • style with less
  • style with less (scoped)
  • style with sass
  • style with sass (scoped)
  • style with postcss
  • style with postcss (scoped)
  • style with stylus
  • style with stylus (scoped)

Если вы напечатаетеvue, вы получите стартовый пакет для однофайлового компонента:

<template>

</template>

<script> export default {

} </script>

<style>

</style>

другие специфичны и создают единый блок кода.

Примечание: (с ограничением) означает, что он применяется только к текущему компоненту

Эммет

Эмметпо умолчанию поддерживается популярный механизм сокращений HTML / CSS. Вы можете ввести одно из сокращений Эммета и, нажавtabVS Code автоматически расширит его до эквивалента HTML:

Линтинг и проверка ошибок

Vetur интегрируется сESLint, сквозьПлагин VS Code ESLint.

Форматирование кода

Vetur обеспечивает автоматическую поддержку форматирования кода для форматирования всего файла при сохранении (в сочетании с"editor.formatOnSave"Настройка VS Code.

Вы можете отключить автоматическое форматирование для определенного языка, установив параметрvetur.format.defaultFormatter.XXXXXкnoneв настройках VS Code. Чтобы изменить одну из этих настроек, просто начните поиск строки и переопределите то, что вы хотите в пользовательских настройках (правая панель).

Большинство поддерживаемых языков используютКрасивеедля автоматического форматирования, инструмент, который становится отраслевым стандартом.

Использует вашу конфигурацию Prettier для определения ваших предпочтений.


Больше руководств по vue:


Как просмотреть мой HTML-код в браузере с помощью Visual Studio Code?

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

это поможет вам настройка локального веб-сервера, известного как lite-server С VS Code, а также поможет вам провести свой статический!—5—> файлы localhost и debug код Javascript код.

1. Установите Узел.js

если еще не установлен, сделать это здесь

он поставляется с npm (пакет менеджер по приобретению и управлению библиотеками разработки)

2. Создайте новую папку для вашего проекта

где-то на диске, создайте новую папку для вашего веб-приложения.1.3.1″ } }

4. Установите веб-сервер

в окне терминала (командная строка в Windows) откройте папку проекта, выполните следующую команду:

npm install

это установит lite-сервер (определенный в пакете.json), статический сервер, который загружает индекс.HTML в браузере по умолчанию и автоматически обновляет его при изменении файлов приложений.

5. Запустите локальный веб-сервер!

(если у вас есть индекс.HTML-файл в папке проекта).

в том же окне терминала (командная строка в Windows) запустите это команда:

npm start

Подождите секунду и индекс.html загружается и отображается в браузере по умолчанию, обслуживаемом вашим локальным веб-сервером!

lite-сервер следит за вашими файлами и обновляет страницу, как только вы вносите изменения в любые файлы html, js или css.

и если у вас есть VS-код, настроенный для автоматического сохранения (меню File / Auto Save), вы видите изменения в браузере при вводе!

Примечания:

  • не закройте окно командной строки, пока вы не закончите кодирование в своем приложение на день
  • начинается с http://localhost:10001 но вы можете изменить порт по редактирование пакета.файл json.

вот и все. Теперь перед любым сеансом кодирования просто введите npm start и вы хорошо идти!

цитата здесь на msdn блог. Кредиты идут автору:@Laurent Duveau

VS Code Extensions для HTML

Давайте рассмотрим некоторые расширения для VS Code, которые улучшают написание и редактирование HTML (и языков, которые в основном являются HTML с дополнительными возможностями). Вам могут не понравиться всех из них. Может быть, некоторые из них вам не нравятся, не решают проблему, которой у вас нет, или вам кажется, что у вас больше беспорядка, чем нужно. Это нормально. Это лишь некоторые из тех, что я пробовал, и в какой-то степени мне они понравились.

Я бы начал здесь с Эммета, даже если подумал, что технически это не расширение 1 для VS Code.Он встроен прямо в него. Вы должны знать об этом, потому что он очень полезен. Он делает такие «HTML-расширения», которые я использую почти каждый день своей жизни:

Этикетки конечных тегов HTML

Я слышал об этом от Стефана Джудиса, который недавно писал об этом в блоге и вдохновил на создание этой публикации.

Вся идея состоит в том, что вместо того, чтобы вы оставлять комментарии в своем HTML-коде, чтобы указать, какой HTML-элемент он закрывает (обычная практика или , особенно для частичных элементов, закрывающих элементы, которые могут не открываться в том же документе).

  

Это расширение показывает пользовательский интерфейс о том, какой HTML закрывается:

Автоматическое закрытие тега

Как только вы набираете > в HTML-элементе, например, в последней скобке в

, автоматически создается закрывающий тег.

Его можно настроить на автоматическое закрытие только после того, как вы наберете , чтобы указать, что вы собираетесь закрыть тег, что является значением по умолчанию в Sublime Text 3.Кстати, если вы установите Sublime Text Keymap, вы получите это автоматически, а также несколько других необычных клавишных команд.

Также есть тег Close HTML / XML, но он работает только с помощью ключевой команды. С помощью тега автоматического закрытия вы можете настроить его в любом случае, и по какой-либо причине у него гораздо больше установок.

Выделить соответствующий тег

Вот GIF из их документов:

Я собирался сделать собственное видео, но обнаружил, что даже если у меня отключено это расширение, что-то еще в моем VS Code все равно выделяет совпадающие теги.Я не совсем уверен, что это такое, что наводит меня на мысль, что теперь это может быть встроенная функция.

Что я вижу без этого расширения: граница вокруг совпадающих тегов.

Не относится к HTML, но если вам нужна такая помощь с сопоставлением вещей, вы можете попробовать Bracket Pair Colorizer 2, что может быть неплохо для CSS и JavaScript.

Тег автоматического переименования

Я считаю это весьма полезным!

Я считаю, что эта функция фактически встроена в канонический Emmet, но опять же, VS Code не использует канонический Emmet, поэтому этой функции нет, отсюда и необходимость в этом дополнительном плагине.

Я довольно часто оставляю комментарии к коду, особенно когда разрабатываю новые вещи. Мне нравится соглашение, когда к комментарию добавляется префикс (например, TODO), что он очень важен и требует внимания. Лучшие комментарии позволяют визуально отличаться от них.

Проверка орфографии кода

В коде VS нет проверки орфографии. Мне это не нравится. Для меня этот плагин просто необходим, особенно для HTML, потому что в HTML обычно есть контент, например слова, которые следует писать правильно.И так же, как линтер, этот плагин дает вам волнистые линии, когда что-то не так, и меню, чтобы попытаться исправить это.

Радуга отступа

Наслаждайтесь этой великолепной радугой, созданной углубляющимися вмятинами:

Дело в том, что он дает вам некоторые визуальные подсказки, на каком уровне вы в данный момент смотрите / работаете. В этом смысле это что-то вроде тега Highlight Matching, но, честно говоря, мне они оба нравятся. Это наиболее полезно, когда вам нужно прокрутить вверх или вниз, чтобы найти соответствующий тег.

Красивее

Prettier действительно работает с HTML, но я бы почти назвал это немного спорным. Например, он разбивает атрибуты HTML на отдельные строки, что очень похоже на JSX, но реже встречается в необработанном HTML. Но иногда возникают буквально побочные эффекты. Например, если вы специально набираете

(без пробелов), потому что вы собираетесь установить все элементы списка в строку , Prettier разбивает их на отдельные строки, вставляя пробелы и изменяя макет того, что вы намереваетесь.Вы всегда можете исправить это с помощью комментария, чтобы Prettier оставил его в покое (например, {/ * prettier-ignore * /} ), но я мог видеть, как он неправильно трогает людей. Есть даже настройки для него под HTML Whitespace Sensitivity , но он никогда не может быть идеальным.

Я на самом деле заставил Prettier for HTML работать только для этого сообщения в блоге, поэтому я думаю, что оставлю его на некоторое время и посмотрю, понравится ли он мне. Я уже знаю, что мне нравится Prettier для JSX. Я вообще за как можно больше автоформатирования.

Фрагмент

Думаю, есть много плагинов для сниппетов, но это единственный, который я пробовал, и он отлично работает. Мне нравится, как вы делаете сниппеты прямо из существующих файлов.

Табнин

Я слышал об этом от Кайла Симпсона, который, как мне кажется, проводил с ними платные консультации или что-то в этом роде. Дело в том, что он предлагает варианты автозаполнения на базе ИИ, даже в HTML. Проверьте это, угадав некоторые атрибуты:

Похоже, это довольно коммерческий продукт с функциями, которые подталкивают вас к платным планам для команд.Я действительно не хочу вдаваться в подробности; Было просто интересно увидеть, как такой инструмент работает с HTML.

ax Доступность ЛИНТЕР

Позволяет устранить проблемы с доступностью в HTML прямо в редакторе. Он проверяет набор правил.


HTML - vscode

VS Code обеспечивает базовую поддержку программирования HTML "из коробки". Установите расширение для большей функциональности.

Совет. Щелкните плитку расширения выше, чтобы прочитать описание и отзывы, чтобы решить, какое расширение лучше всего подходит для вас.Смотрите больше на торговой площадке.

IntelliSense

По мере того, как вы вводите HTML, мы предлагаем предложения через HTML IntelliSense. На изображении ниже вы можете увидеть предлагаемое закрытие HTML-элемента

, а также контекстно-зависимый список предлагаемых элементов.

Мы также предлагаем варианты элементов, тегов, некоторых значений (как определено в HTML 5), тегов Ionic и AngularJS,

Вы также можете работать со встроенными CSS и JavaScript. Однако обратите внимание, что сценарии и стили не соблюдаются, языковая поддержка смотрит только на содержимое HTML-файла.

Вы можете вызвать предложения в любое время, нажав kb (editor.action.triggerSuggest) .

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

  // Настраивает, предлагает ли встроенный язык HTML теги и свойства Angular V1.
"html.suggest.angular1": true,

// Настраивает, предлагает ли встроенный язык HTML Ionic теги, свойства и значения."html.suggest.ionic": правда,

// Настраивает, предлагает ли встроенный язык HTML теги, свойства и значения HTML5.
"html.suggest.html5": true
  

Ховер

Наведите указатель мыши на теги HTML или встроенные стили и JavaScript, чтобы получить дополнительную информацию о символе под курсором.

Проверка

Поддержка языка HTML выполняет проверку всех встроенных JavaScript и CSS.

Вы можете отключить эту проверку с помощью следующих настроек:

  // Настраивает, проверяет ли встроенная поддержка языка HTML встроенные скрипты."html.validate.scripts": true,

// Настраивает, проверяет ли встроенная поддержка языка HTML встроенные стили.
"html.validate.styles": true
  

Формат HTML

Чтобы улучшить форматирование исходного кода HTML, нажмите kb (editor.action.formatSelection) , и выбранная область будет переформатирована.

Совет: Программа форматирования не форматирует теги, перечисленные в настройках html.format.unformatted . Встроенный JavaScript форматируется, если не исключены теги «скрипт».

Совет: Настройте параметры средства форматирования HTML в настройках пользователя и рабочей области.

Эммет фрагменты

Мы поддерживаем расширение сниппета Emmet. Аббревиатуры Эммета перечислены вместе с другими предложениями и фрагментами в списке автозаполнения редактора.

Совет: Допустимые сокращения см. В разделе HTML шпаргалки Emmet.

Если вы хотите использовать сокращения HTML Emmet с другими языками, вы можете связать один из режимов Emmet (например, css , html ) с другими языками с помощью emmet .includeLanguages ​​ настройка. Параметр принимает идентификатор языка и связывает его с идентификатором языка режима, поддерживаемого Emmet.

Например, чтобы использовать аббревиатуры Emmet HTML внутри JavaScript:

  {
    "emmet.includeLanguages": {
        "javascript": "html"
     }
}
  

Мы также поддерживаем определяемые пользователем фрагменты.

Следующие шаги

Читайте дальше, чтобы узнать о:

Топ-15 лучших расширений кода Visual Studio для веб-разработки

Код Visual Studio, возможно, лучший редактор кода для использования в настоящее время.Благодаря широкому спектру расширений и поддержке со стороны Microsoft этот редактор получил широкое распространение.

Код Visual Studio построен на основе редактора Monaco с открытым исходным кодом от Microsoft. Этот проект получил около 14 тысяч звезд на Github.

Код Visual Studio предлагает широкий спектр расширений. Вот как установить расширение.

Нажмите SHIFT + COMMAND (или Windows) + X или просто щелкните значок расширения кода Visual Studio. Найдите расширение и нажмите "Установить".

Здесь я перечисляю 15 лучших расширений кода Visual Studio для веб-разработки. Выбор расширения - мое личное мнение.

1: Фрагменты кода Javascript (ES6)

Нет необходимости упоминать, что JavaScript является ядром веб-разработки. Есть множество фрагментов кода, которые мы использовали ежедневно, и это расширение помогает вам не писать этот повторяющийся код снова и снова.

Он предоставляет фрагменты кода JavaScript, TypeScript, Vue, React и HTML.Я лично считаю, что это расширение необходимо для веб-разработки.

Ссылка: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

2: CSS Peek

Как следует из названия, это расширение позволяет переходить к коду CSS, используя классы и идентификаторы.

Ссылка: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Вы можете установить его, выполнив поиск по имени в разделе расширений кода визуальной студии.

3: Тег автоматического закрытия

Это расширение автоматически добавляет закрывающий тег HTML и XML. Спасибо позже 🙂

Ссылка: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

4: REST Client

Тестирование API и интеграция с пользовательским интерфейсом - огромная часть веб-разработки. Я уверен, что вы делали это много раз.

Я часто использовал клиенты REST, такие как Postman, для тестирования своих API.Используя это расширение, мы можем тестировать API и просматривать их ответ прямо в коде Visual Studio.

через GIPHY

Ссылка: https://marketplace.visualstudio.com/items?itemName=humao.rest-client

Вы можете установить его, выполнив поиск по имени в разделе расширений кода визуальной студии.

5: ESLint

ESLint - это утилита линтинга для JavaScript. Он проверяет ваш код на наличие распространенных ошибок и сообщает об этом в самом редакторе. Это похоже на виртуальный партнер, который проверяет ваш код, пока вы его пишете.

Ссылка: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

Перед установкой ESLint в Visual Studio сначала установите его как глобальный пакет.

6: Prettier - Средство форматирования кода

Это расширение выполняет форматирование кода JavaScript, CSS и HTML.

Ссылка: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

7: Путь Intellisense

Импорт кода из других файлов - это то, что каждый делает ежедневно. Это расширение ускоряет разработку за счет автозаполнения имен файлов.

Вы вводите имя файла в операторы, и он будет искать и предлагать вам варианты.

Ссылка: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

8: GitLens

Мы используем Git почти каждый день нашей жизни. GitLens - это плагин кода Visual Studio, расширяющий возможности git.

С GitLens так легко просматривать авторство кода, проверять номер фиксации, просматривать изменения между последней фиксацией и существующими изменениями и т. Д.

Ссылка: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

9: Менеджер проекта

Вы работаете над несколькими проектами и переключаетесь туда и обратно? Я знаю, что делаю, и менеджер проектов был спасителем, управляя несколькими проектами в коде Visual Studio.

Ссылка: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Вы можете установить его, выполнив поиск по имени в разделе расширений кода визуальной студии.

10: Live Server

Расширение Live Server обеспечивает предварительный просмотр вашего веб-приложения прямо в редакторе.

Это очень удобно и полезно для разработчиков интерфейса.

Ссылка: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

11: Отладчик для Chrome

Это расширение перенесло мощный отладчик Chrome прямо в код Visual Studio.

Для интерфейсных разработчиков очень полезно выполнять тестирование и отладку.

через GIPHY

Ссылка: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Вы можете установить его, выполнив поиск по имени в разделе расширений кода визуальной студии.

12: Лучшие комментарии

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

Ссылка: https: //marketplace.visualstudio.com / items? itemName = aaron-bond.better-comments
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

13: Code time

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

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

Ссылка: https://marketplace.visualstudio.com / items? itemName = softwaredotcom.swdc-vscode
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

14: Синхронизация настроек

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

Переход к настройке расширения Sync. Он создает и хранит вашу конфигурацию в Github gist и синхронизирует там, где вы хотите.Просто и здорово!

Ссылка: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

15: Polacode

Понравился такой фрагмент кода?

Тогда этот добавочный номер для вас. Мы можем использовать это расширение, чтобы создать красивый поляроид кода и поделиться им.

Ссылка: https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

Заключение

Если вам понравилась эта статья, поделитесь ею в социальных сетях, чтобы помочь распространить информацию. Спасибо за прочтение!

Дальнейшее изучение

Топ-5 обязательных расширений кода Visual Studio
Учебник по MySQL для Node.js
Все статьи по программированию Codeforgeek
Как проверить, существует ли файл в Node.js

Как просмотреть HTML-файл в браузере с помощью Код Visual Studio

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

Это поможет вам настроить локальный веб-сервер, известный как lite-server, с VS Code , а также поможет вам разместить статические файлы html в localhost и отладить код Javascript .

1. Установите Node.js

Если он еще не установлен, загрузите его здесь

Он поставляется с npm (менеджер пакетов для получения и управления вашими библиотеками разработки)

2.Создайте новую папку для вашего проекта

Создайте где-нибудь на вашем диске новую папку для вашего веб-приложения.

3. Добавьте файл package.json в папку проекта

Затем скопируйте / вставьте следующий текст:

  {
   "name": "Демо",
   "версия": "1. 2.5,4 дюйма
   }
}
  

4. Установите веб-сервер

В окне терминала (командная строка в Windows), открытом в папке проекта, выполните эту команду:

  npm установить
  

Это установит lite-server (определенный в package.json), статический сервер, который загружает index.html в ваш браузер по умолчанию и автоматически обновляет его при изменении файлов приложения.

5. Запустите локальный веб-сервер!

(при условии, что у вас есть index.html в папке вашего проекта).

В том же окне терминала (командная строка в Windows) выполните эту команду:

  н / мин старт
  

Подождите секунду, и index.html загрузится и отобразится в вашем браузере по умолчанию, обслуживаемом вашим локальным веб-сервером!

lite-server наблюдает за вашими файлами и обновляет страницу, как только вы вносите изменения в любые файлы html, js или css.

И если у вас есть VS Code, настроенный на автоматическое сохранение (меню File / Auto Save), вы видите изменения в браузере по мере ввода!

Примечания:

  • Не закрывайте командную строку, пока не закончите кодирование в своем приложение на день
  • Он открывается по адресу http: // localhost: 10001, но вы можете изменить порт с помощью редактирование пакета.json файл.

Вот и все. Теперь перед любым сеансом программирования просто введите npm start, и все готово!

Первоначально опубликовано в блоге msdn . Кредиты принадлежат Автору: @Laurent Duveau

microsoft / vscode-html-languageservice: языковые службы для HTML

GitHub - microsoft / vscode-html-languageservice: языковые службы для HTML

Файлы

Постоянная ссылка Не удалось загрузить последнюю информацию о фиксации.

Тип

Имя

Последнее сообщение фиксации

Время фиксации

Служба языка HTML, извлеченная из VSCode, для повторного использования, например, в редакторе Monaco.

Почему?

vscode-html-languageservice содержит языковые навыки, лежащие в основе редактирования HTML в Visual Studio Code. и редактор Монако.

  • doComplete / doComplete2 (async) предоставляет предложения завершения для данного местоположения.

  • setCompletionParticipants позволяет участнику вносить предложения по конкретным токенам.

  • doHover предоставляет информацию о наведении курсора в заданном месте.

  • Формат форматирует код в заданном диапазоне.

  • findDocumentLinks находит все ссылки в документе.

  • findDocumentSymbols находит все символы в документе.

  • getFoldingRanges диапазона обратного сгиба для данного документа.

  • getSelectionRanges возвращает диапазоны выбора для данного документа. ...

Полный API см. На htmlLanguageService.ts и htmlLanguageTypes.ts

.

Установка

  npm install --save vscode-html-languageservice
  

Развитие

  • клонировать это репо, запустить пряжу
  • Тест пряжи для компиляции и проведения тестов

Как запустить и отладить службу?

  • открыть папку в VSCode.
  • установить точки останова, например в htmlCompletion.ts
  • запускает модульные тесты из окна просмотра запуска и ждет, пока не будет достигнута точка останова:

Как запустить и отладить службу внутри экземпляра VSCode?

  • запустите VSCode из исходных кодов, как описано здесь: https://github.com/Microsoft/vscode/wiki/How-to-Contribute
  • свяжите fodler репозитория vscode-html-languageservice с vscode / extensions / html-language-features / server для запуска VSCode с последними изменениями из этой папки:
    • cd vscode-html-languageservice , ссылка пряжи
    • cd vscode / extensions / html-language-features / server , ссылка пряжи vscode-html-languageservice
  • запустить VSCode из исходного кода ( vscode / scripts / code.sh | bat ) и откройте файл .html
  • в окне VSCode, которое открыто в источниках vscode-html-languageservice , запустите команду Debug: Attach to Node process и выберите процесс code-oss с путем html-language-features path
  • установить точки останова, например в htmlCompletion.ts
  • в экземпляре, запущенном из источников, вызвать завершение кода в файле .html

Лицензия

(лицензия MIT)

Авторские права 2016-2020, Microsoft

За исключением data / *.json , созданный на основе контента из Mozilla Developer Network. и распространяется под CC BY-SA 2.5.

Около

Языковые услуги для HTML

Ресурсы

Лицензия

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

лучших расширений кода Visual Studio для фронтенд-разработчиков (2021 г.)

Отличный инструментарий может помочь разработчикам писать более быстрый, чистый и последовательный код. Расширения Visual Studio Code позволяют добавлять инструменты, языки, отладчики и многое другое, чтобы помочь вам в этом. Некоторое время назад я спросил фронтенд-разработчиков здесь, в Shopify, без каких расширений, пакетов и плагинов они не могли бы жить.

На основе этих разговоров я написал две статьи о лучших плагинах Sublime Text и лучших пакетах Atom для интерфейсных разработчиков. В этой статье я выделил свои лучшие варианты расширений Visual Studio Code (VS Code) и разбил их на следующие шесть категорий. Если вы хотите убедиться, что то, что вы создаете, безопасно, вы также можете ознакомиться с нашей статьей о том, как повысить безопасность веб-сайта вашего клиента.

Установка расширений кода Visual Studio

Следует отметить, что Visual Studio Code имеет большую встроенную поддержку многих широко используемых расширений, подключаемых модулей или пакетов, имеющихся в других редакторах.К ним относятся поддержка Emmet, интегрированного терминала, IntelliSense для множества различных языков (JavaScript, TypeScript, JSON, HTML, CSS, Less и Sass), а также поддержка контроля версий.

Просмотр и установка расширений из Visual Studio Code довольно проста. Просто введите cmd + shift + x (на Mac) или ctrl + shift + x (на ПК), чтобы открыть панель View: Extensions , затем нажмите кнопку Install , чтобы установить Visual Расширение Studio Code, которое вы хотите.

Вы также можете просматривать и устанавливать расширения, щелкнув вкладку Extensions на панели активности в верхней части домашней страницы VS Code. Или вы можете использовать палитру команд для установки расширений (все одновременно), набрав cmd + shift + p (OSX) или ctrl + shift + p (Windows, Linux), затем введите «Установить» extension »и выберите Extensions: Install Extensions .

Вам потребуется перезапустить VS Code при установке нового расширения, чтобы оно вступило в силу.В дополнение к поиску расширений в VS Code, вы также можете просматривать VS Code Extension Marketplace, где есть более подробная документация по каждому расширению.

Развивайте свой бизнес с помощью партнерской программы Shopify

Предлагаете ли вы услуги веб-дизайна и разработки или хотите создавать приложения для Shopify App Store, партнерская программа Shopify поможет вам добиться успеха. Присоединяйтесь бесплатно и получите доступ к возможностям распределения доходов, средам предварительной версии для разработчиков и образовательным ресурсам.

Подписаться

1. Синхронизация настроек

Расширение «Синхронизация настроек», ранее известное как «Синхронизация настроек кода Visual Studio», синхронизирует настройки, фрагменты, темы, привязки клавиш, рабочие области, расширения и многое другое на нескольких компьютерах. Я думаю, что это, вероятно, одно из самых важных и полезных расширений, которое гарантирует, что независимо от того, на каком компьютере вы работаете, у вас будут все инструменты, к которым вы привыкли.

Просмотр настроек синхронизации

Фрагменты и стиль кода

Фрагменты довольно просты: начните вводить ключевое слово, которое активирует фрагмент, а затем разверните текст.+ пробел в сочетании с другими предложениями или в специальном средстве выбора фрагментов.

Вы можете вставить фрагмент из средства выбора, открыв палитру команд и набрав «Вставить фрагмент». Вы также можете создавать свои собственные фрагменты, используя синтаксис фрагментов TextMate. Примеры можно найти в документации по фрагментам VS Code. Или загрузите их через расширение, вот несколько расширений сниппетов, которые попали в список.

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

2. Фрагменты шаблона Shopify Liquid

Расширение Shopify Liquid Template Snippets включает в себя различные фрагменты Liquid, чтобы ускорить разработку тем. Сюда входят фрагменты для тегов потока управления, теги итерации, теги переменных, фильтры массивов и многое другое. У этого расширения есть одна зависимость - расширение Liquid.

После установки введите часть ключевого слова фрагмента и нажмите , введите или , верните , и фрагмент развернется. Вы также можете активировать фрагменты из редактора, набрав cmd + пробел (OSX) или ctrl + пробел (Windows, Linux).

Просмотр жидких фрагментов Shopify

3. HTML-фрагменты

HTML Snippets добавляет расширенную языковую поддержку для разметки HTML, включая фрагменты, краткую информацию и описания, в которых указывается, является ли тег устаревшим.

Просмотр фрагментов HTML

4. Конечные пробелы

Что в имени? Что ж, расширение конечных пробелов делает в значительной степени именно то, что описывает заголовок - оно позволяет вам выделять конечные пробелы и быстро их удалять.Это расширение является портом популярного плагина Sublime Text Trailing Spaces и предлагает быстрое удаление конечных пробелов, обрезку при сохранении и многое другое.

Просмотр конечных пробелов

Вам также может понравиться: Учебный комплект Shopify GraphQL.

5. Пустая строка в конце файла

Пустая строка в конце файла - это минимальное и очень простое расширение, которое добавляет дополнительную пустую строку в конец любого сохраненного файла.

Просмотр пустой строки в конце файла

Подпишитесь на информационный бюллетень Developer Digest

Будьте в курсе последних изменений в Shopify API и других продуктах для разработчиков с нашим ежеквартальным дайджестом разработчиков.

Подписаться

Линтеры и подсветка синтаксиса

При программировании важно обеспечить согласованность, а это значит, что крайне важно использовать правильные инструменты, которые будут анализировать исходный код и отмечать любые программные или стилистические ошибки, ошибки и т. Д. Линтеры обеспечивают такую ​​согласованность и помогают выработать передовой опыт для вашей команды. Подсветка синтаксиса также играет ключевую роль в простоте использования текстового редактора. VS Code поддерживает множество языков прямо из коробки, поэтому для улучшения этого опыта требуется не так много расширений.

Вам также могут понравиться: 4 простых способа развертывания вашего веб-сайта или приложения.

6. Жидкость

Расширение Liquid необходимо тем, кто разрабатывает темы Shopify с использованием VS Code. Несмотря на то, что есть поддержка значков на боковой панели, позволяющих отличать файлы Liquid из коробки, VS Code не имеет подсветки синтаксиса для Liquid без помощи этого расширения. Это расширение добавляет подсветку синтаксиса для Liquid и действует как поддержка расширения Shopify Liquid Snippets.Он также поддерживает блоки кода разделов и автозаполнение фрагментов для тегов и фильтров Liquid.

Просмотр поддержки жидких языков

7. stylelint

stylelint - это расширение, которое поддерживает CSS, SCSS и Less. Вы можете контролировать, включен ли stylelint для разных языков или нет, в зависимости от того, как вы хотите настроить его параметры.

Посмотреть stylelint

8. ESLint

Это расширение интегрирует ESLint в VS Code и требует, чтобы вы уже установили ESLint на свой компьютер локально или глобально.Вы можете сделать это с помощью npm , запустив npm install -g eslint . Более подробные настройки и инструкции по настройке и установке можно найти на странице магазина расширений Visual Studio Code.

Посмотреть ESLint

9. TSlint

Эта новая версия TSLint похожа на предыдущее расширение, поскольку требует, чтобы у вас уже был установлен TSLint локально в проекте или глобально на вашем компьютере. Это расширение интегрирует линтер TSLint для языка TypeScript в VS Code.+ Сочетание клавиш для открытия встроенного терминала из VS Code. Нам всем нужно отслеживать изменения, которые мы вносим в наш код, и что может быть лучше, чем с помощью Git. Вот одно полезное расширение Visual Studio Code, которое помогает еще больше интегрировать Git в процесс написания кода.

10. GitLens

Расширение GitLens действительно потрясающее; он позволяет визуализировать авторство кода в VS Code. Вы можете просматривать и исследовать историю файла, просматривать аннотацию git blame для каждой строки файла и даже добавлять аннотацию изменения (diff) при наведении, все из которых полностью настраиваемы.

Посмотреть GitLens

Улучшения редактора

Эти усовершенствования редактора ускоряют отладку, написание и чтение кода. Они помогают вам в повседневном программировании, будь то поиск по методу, который написал кто-то другой, или получение подсказок к названиям классов в качестве разметки для написания.

11. Путь Intellisense

Расширение Path Intellisense помогает автоматически заполнять имена файлов. Очень полезно при записи путей в разметке или в любом файле, в котором есть ссылки на пути.

Путь просмотра Intellisense

12. IntelliSense для имен классов CSS

Расширение IntelliSense для имен классов CSS помогает автоматически заполнять имена классов для атрибута класса HTML, просматривая определения классов CSS в вашей рабочей области и внешние файлы, на которые ссылается элемент ссылки.

Просмотр имен классов IntelliSense для CSS

13. CSS Peek

CSS Peak расширяет шаблоны HTML и Embedded JavaScript с поддержкой Go To Definition для классов и идентификаторов CSS, найденных в вашей разметке.

Посмотреть CSS Peek

14. Направляющие

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

Руководства по просмотрам

15. Отладчик для Chrome

Расширение Debugger for Chrome добавляет отладчик браузера Google Chrome в ваш редактор.Он позволяет вам запускать экземпляр Chrome, связанный с вашим приложением, или он может подключаться к работающему экземпляру Chrome. Используя параметр url , вы указываете VS Code, какой URL открыть или запустить в Chrome.

Просмотр отладчика для Chrome

Вам также может понравиться: Использование Git для упрощения развертывания темы Shopify.

16. Мгновенная уценка

Расширение Instant Markdown позволяет редактировать документы Markdown в VS Code и мгновенно просматривать их в браузере.Это очень полезно для редактирования файлов readme и других документов, написанных на Markdown.

Посмотреть мгновенную уценку

17. открыть в браузере

Это расширение Visual Studio Code делает именно то, что говорит: оно позволяет просматривать HTML-файл в браузере. Он открывает HTML-страницы в браузере по умолчанию, но вы также можете выбрать «открывать в других браузерах», чтобы открыть их в другом, щелкнув правой кнопкой мыши.

Открыть в браузере

Темы и приколы 🌈

Не нужно относиться к себе слишком серьезно, чтобы писать отличный код для фронтенд-разработки.На самом деле, если сделать рабочее пространство более ярким с помощью удачной цветовой кодировки, это может даже помочь вам оставаться более организованным и свести к минимуму ошибки. Хорошая новость заключается в том, что для VS Code доступно множество тем, которые вы можете найти на веб-сайте тем VS Code. Может быть интересно добавить в редактор немного цвета. Вот несколько особенно популярных расширений и тем Visual Studio Code, которые могут быть вам интересны и полезны.

18. Радужные скобки

Добавьте веселья в свой редактор с помощью 🌈 Rainbow Brackets! Это расширение Visual Studio Code предоставляет цвета радуги для круглых скобок, квадратных скобок и фигурных скобок.Это может быть особенно полезно для программистов на JavaScript!

Посмотреть кронштейны Rainbow

19. Радужный отступ

«Радуга отступов» — это простое расширение, которое раскрашивает отступ перед текстом, чередуя разные цвета на каждом шаге. Это облегчает чтение вашего отступа, особенно если вы пишете код для Python или Nim.

Вид радуги с отступом

Вам также могут понравиться: Универсальный дизайн: 11 практических советов, которые сделают ваши сайты и приложения более доступными.

20. Темы, вдохновленные атомом

Для многих разработчиков VS Code — не первый редактор. Они уже использовали другой редактор и познакомились с ним, прежде чем исследовать возможности VS Code. Вероятно, поэтому некоторые из самых популярных расширений и тем Visual Studio Code были перенесены из других редакторов, таких как Atom. Вот три из самых популярных тем для VS Code, перенесенных из Atom:

Начать!

VS Code имеет огромную библиотеку расширений на выбор, и я рассмотрел только 20 лучших, рекомендованных кучей замечательных разработчиков интерфейса здесь, в Shopify.Но не останавливайтесь на VS Code — есть еще много дополнительных инструментов для разработки. Важно помнить, что инструменты всегда должны работать на вас, а не наоборот.

Как настроить VS Code для веб-разработки за несколько простых шагов

Visual Studio Code стал самым популярным редактором исходного кода. Он легкий, но мощный и, без сомнения, мой любимый.

В этой статье я расскажу, как начать работу и настроить VS Code для веб-разработчиков.

Вот видео, которое вы можете посмотреть, если хотите дополнить эту статью:

Видео о настройке VS Code

Введение в VS Code

Загрузите Visual Studio Code

Если на вашем компьютере еще не установлен VS Code, перейдите по ссылке code.visualstudio.com, чтобы загрузить его. Вы можете открыть раскрывающийся список, чтобы выбрать версии, которые хотите загрузить, но обычно большая кнопка должна делать всю работу.

Вкладка приветствия VS Code

После установки и открытия первое, что вы увидите, это вкладка приветствия.Здесь вы найдете 5 разделов:

Вкладка приветствия

Начало : Вы можете создать новый файл или открыть папку.

Недавние : Вы можете найти все недавно открытые папки

Справка : Вы можете найти полезную информацию. Например, распечатанная шпаргалка по клавиатуре или серия вводных видеороликов.

Настроить : вы можете видеть, что вы можете установить настройки и сочетания клавиш из других редакторов кода, таких как Vim или Atom.Так что, если вы привыкли использовать эти редакторы в настоящее время, вы можете пойти дальше и проверить это.

Но мы хотим рассмотреть цветовую тему . Если вы выберете его, вы увидите, что есть список тем на выбор. Вы также можете использовать клавиши со стрелками вверх и вниз для предварительного просмотра тем. Но моя любимая тема — тема по умолчанию, поэтому я буду ее придерживаться.

Цветовая тема

Learn : Здесь вы найдете 3 варианта. Первый выбор в списке — Найти и запустить все команды. С его помощью мы можем найти и запустить все доступные команды. Мы собираемся часто использовать это, поэтому я рекомендую вам запомнить ярлык, которым является Command / Control + Shift + P .

Второй вариант — Обзор интерфейса . Если мы выберем его, мы сможем увидеть наиболее распространенные элементы в пользовательском интерфейсе, а также увидеть ярлык для переключения элементов:

Обзор интерфейса

Последний выбор — это площадка для интерактивного редактора .Здесь вы можете найти основные функции VS Code с инструкциями и примерами.

Давайте, например, выберем Emmet . С помощью Emmet мы можем писать ярлыки, а затем расширять их в кусок кода.

Итак, скажем, например, что мы хотим создать элемент неупорядоченного списка с 3 элементами внутри, и каждый элемент имеет имя класса «плод». Мы можем набрать ul> li.fruit * 3 и нажать tab .

Emmet в интерактивном редакторе Playground

Вы также можете увидеть это в существующем примере ( ul> li.item $ * 5 ), они попытались создать элемент неупорядоченного списка и 5 элементов с именем класса , элемент внутри. Но имя класса также имеет нумерацию :

  

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

Хорошо, рекомендую вам ознакомиться со всеми этими функциями.Их очень много, и ничего страшного, если ты сейчас всего этого не понимаешь. Вы всегда можете вернуться в будущее.

VS Code File Explorer

Затем перейдем в File Explorer , выбрав первую вкладку на боковой панели навигации или Command / Control + Shift + E .

Здесь вы можете открыть существующую папку, но давайте создадим новую папку и новый файл. Вместо того, чтобы открывать новое окно, давайте откроем терминал в VS Code. Вы можете нажать кнопку ошибка и предупреждение в строке состояния, а затем выбрать вкладку Terminal , или вы можете использовать ярлык Control + `.

Прямо сейчас я нахожусь в своем домашнем каталоге. Давайте создадим новую папку, набрав mkdir vscode-tutorials , и войдем в нее с cd vscode-tutorials .

Теперь мы хотим открыть эту папку, чтобы мы могли нажать кнопку открыть папку и перейти в каталог папки — но это большая работа. Вместо этого в терминале мы можем сказать код . . Теперь вы можете столкнуться с ошибкой: bash: code: command not found . Терминал

в VS Code

Чтобы исправить это, мы можем открыть палитру команд и найти Shell Command: Install code command в Path и выбрать ее.Теперь вернемся к терминалу и наберем код . , новое окно VS Code откроется с созданной папкой.

Хорошо, теперь мы хотим создать новый файл. В разделе папок мы можем щелкнуть значок нового файла или щелкнуть правой кнопкой мыши и выбрать новый файл . Назовем файл index.html , а внутри него введем восклицательный знак (!) И нажмем Tab или Enter. С Emmet он сгенерирует HTML-шаблон.

Генерация HTML с помощью Emmet в VS Code

Теперь давайте снова откроем палитру команд , найдите Format Document и выберите его.Вы можете видеть, что он добавляет интервалы между разными разделами и очищает наш код.

Это очень полезная функция от VS Code. Но мы не хотим постоянно искать Format Documen t и хотим, чтобы он форматировался всякий раз, когда мы сохраняем файл.

Вы также заметили, что отступ теперь равен 4 пробела , что на мой взгляд многовато. Так что давайте изменим его на 2. И для этого мы можем перейти в настройки или использовать ярлык Command / Control +, .

На вкладке Commonly Used мы можем изменить размер табуляции на 2, а в Text Editor / Formatting мы можем выбрать Format при сохранении . Теперь всякий раз, когда мы сохраняем, файлы будут правильно отформатированы.

VS Code Extensions

Последнее, что я хочу показать вам, это Extensions . Вы можете выбрать вкладку расширений на боковой панели навигации или с помощью ярлыка: Command / Control + Shift + X .

Здесь мы можем отфильтровать расширения, например, по Самые популярные или Рекомендуемые .

Есть много расширений на выбор. Но первое расширение, которое нам нужно установить, — это Live Server. Благодаря этому мы можем заставить локальный сервер перезагружать статические веб-страницы.

Live Server Extension

Например, если мы перейдем к нашему index.html и откроем палитру команд и выполним поиск Live Server: Откройте с Live Server , вы увидите, что открылась новая вкладка в браузере.

Оставить комментарий

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.