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

• 08/24/2021
• Чтение занимает 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 вставил весь тег.

Развернуть ссылку

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

Добавить тег

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

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

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

Развернуть список

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

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

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

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

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

Как видите использование 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 с дополнительными возможностями). Вам могут не понравиться всех из них. Может быть, некоторые из них вам не нравятся, не решают проблему, которой у вас нет, или вам кажется, что у вас больше беспорядка, чем нужно. Это нормально. Это лишь некоторые из тех, что я пробовал, и в какой-то степени мне они понравились.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  npm установить
  

  н / мин старт
  

  npm install --save vscode-html-languageservice
  

Эта новая версия 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, перейдите по ссылке code.visualstudio.com, чтобы загрузить его. Вы можете открыть раскрывающийся список, чтобы выбрать версии, которые хотите загрузить, но обычно большая кнопка должна делать всю работу.

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

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

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

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

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

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

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

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

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

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

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

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

Вы также можете увидеть это в существующем примере ( 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 . Терминал

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

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

Теперь давайте снова откроем палитру команд , найдите 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. Благодаря этому мы можем заставить локальный сервер перезагружать статические веб-страницы.

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