Visual Studio Code - Web-Revenue.ru

Содержание

Где скачать visual studio code
Русификация VS Code
Горячие клавиши
emmet
Cниппеты — ускорители разработки
Установка готовых сниппетов из Marketplace
Создание своих сниппетов
Настройка FTP или sftp подключения и синхронизации VS Code при помощи RemoteFS

Visual Studio Code (сокращенно VS Code) — это бесплатный редактор исходного кода, разработанный компанией Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений.

Это редактор кода которым я постоянно пользуюсь (в основном для верстки, иногда разработке сайтов на MODX — когда шаблоны файловые) и который мы сейчас разберем. Если вы к примеру хотите профессионально заниматься PHP, то лучше выбрать платное IDE типа WebStorm.

Где скачать visual studio code

Скачать vs code можно с оф. сайта: code.visualstudio.com.

Русификация VS Code

На одном из ПК он у меня сам русифицировался после установки, на другом самостоятельно не захотел)

В общем для русификации интерфейса, зайдите в extensions (расширения) в строке поиска наберите: Russian Language Pack for Visual Studio Code или просто Russian Language Pack, установите расширение.

Перезагрузите редактор, чтобы visual studio code стал на русском.

Горячие клавиши

Справку по горячим клавишам можно найти в «Справка» — «Справочник по сочетаниям клавиш», или во официальной документации на странице: https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference (на английском).

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

Там же их можно изменить. А так же перенести сочетания из других редакторов, например из Vim, Sublime Text, Atom, Bratckets. Скачать пакеты с их сочетаниями клавиш можно здесь: https://code.visualstudio.com/docs/getstarted/keybindings#_keymap-extensions

emmet

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

Cниппеты — ускорители разработки

Сниппеты — это шаблоны, облегчающие ввод повторяющихся шаблонов кода, таких как циклы или условные операторы. VS Code из коробки имеет встроенные фрагменты для ряда языков, таких как: JavaScript, TypeScript, Markdown и PHP. И так как встроен emmet, то автоматом можно добавить html.

Если говорить простым языком «сниппет» — это готовый кусок заранее написанного кода, который можно вызывать внутри среды Vs Code. Представляет из себя json код, который содержит префикс, тело и описание сниппета. В данном случае мы рассмотрим такие сниппеты, которые можно вставить в любом месте нашего файла.

Установка готовых сниппетов из Marketplace

В маркетплейсе полного готовых сниппетов на разные случае жизни, для того чтобы их посмотреть и установить, перейдите в «Расширения» ( Ctrl+Shift+X ), в поле поиска введите фильтр @category:»snippets».

Если вам нужно что-то конкретное, например я часто верстаю при помощи bootstrap 5 и мне нужны его готовые фрагменты, можно сузить поиск так: @category:»snippets» bootstrap 5. Дальше ищем сниппет с адекватным описание и устанавливаем, читаем описание (возможно сохраняем) и пользуемся.

Создание своих сниппетов

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

Далее выберем «Новый файл с глобальным фрагментом кода…»

После чего вводим пишем название сниппета, например: «web-dev-snippet» и нажимаем Enter. Создастся заготовка сниппета с закомментированным текстом.

Файл со сниппетами — просто json объект. Каждый сниппет — тоже объект, который содержит следующие поля:

scope — языки, для которых будет подставляться сниппет (в случае глобального сниппет файла)
prefix —сокращение, по которому активируется сниппет.
body — сам сниппет
description — описание, будет показано в Intellisense

Давайте для примера создадим для примера 2 сниппета, один для css, второй для html, для остальных языков создается также.

К примеру мы хотим написать сниппет который строит следующую css конструкцию:

@media (max-width: 768px) {
  здесь должен стоять курсор
}

Для этого стираем все из этого файла и пишем следующую конструкцию:

{
  "@media": {
    "prefix": "@m-w768",
    "scope": "css",
    "body": [
      "@media (max-width: 768px) {",
      "  $1",
      "}"
    ],
    "description": "Вставить медиа запрос"
  }
}

Давайте сразу проверим работоспособность, для этого сохраняем наш сниппет, создаём новый файл, установим у него язык CSS и введем начало нашего префикса и выберем его (или введем префикс полностью и нажмем Tab):

И получаем результат:

Ну и давайте чуть посложнее сниппет создадим для html, который к примеру строит вот такой код:

<picture>
    <source type="image/webp" srcset="images/.webp">
    <source type="image/jpeg" srcset="images/.jpg">
    <img src="images/.jpg" alt="Visual Studio Code" title="">
</picture>

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

{
	"picture": {
        "prefix": "mypicture",
        "body": [
			"<picture>",
			"\t<source type=\"image/webp\" srcset=\"${1:images/}.webp\">",
			"\t<source type=\"image/jpeg\" srcset=\"${1:images/}.jpg\">",
			"\t<img src=\"${1:images/}.jpg\" alt=\"${2:}\" title=\"${2:}\">",
			"</picture>",
			"",
        ],
        "description": "Прогрессивные изображения для веб-сайтов"
    }
}

Сохраним и сразу проверим в html файле

Теперь давайте разбираться что к чему:

Для выбора расположения курсора используется символ $ ($1, $2, $3)
Для задания очередности перехода курсора при нажатии tab используется нумерация $1, $2
Если вам необходимо в сниппете использовать двойные кавычки "", то перед ними необходимо ставить обратный слэш \
\t – экранированная “t” – означающая табуляцию.
${Num: default} – это конструкция плейсхолдера, где Num – порядковый номер. Т.к. в srcset и в src нам нужно указать один и тот же путь, но с разными расширениями, то мы просто указываем, что во всех этих полях будет ${1:images/}, где «images/» — значение по умолчанию, которое подставляется в код и при изменении одного из этих полей изменятся все 3. Аналогично для alt="" и title="", только порядковый номер placeholder-а увеличивается на один.

К стати сниппеты стыкуются так:

Надеюсь доходчиво объяснил, в общем делайте так готовые заготовки и экономьте время на разработке. Оригинальная документация по сниппетам здесь: https://code.visualstudio.com/docs/editor/userdefinedsnippets.

Настройка FTP или sftp подключения и синхронизации VS Code при помощи RemoteFS

Нажимаем на расширения, в окне поиска вбиваем RemoteFS и нажимаем установить.

После установки, идем в настройки Remote FS и щелкаем на строку Изменить setting.json

И указываем промеж "remotefs.remote": { ... } следующий конфиг

"dev": {
            "scheme": "ftp",
            "port": 21,
            "host": "host",
            "username": "username",
            "password": "password",
            "rootPath": "/"
          }

где:

«protocol» — используемый для подключения протокол, указать можно FTP или SFTP, в зависимости от выбранного нужно указывать различные настройки далее.
«port» — порт: (Для FTP — укажите 21., Для SFTP — обычно 22).
«host» — укажите хост из данных для подключения по FTP или SSH.
«username» — имя пользователя: (Для FTP — укажите логин из данных для подключения по FTP, Для SFTP — укажите логин из данных для подключения по SSH.
«password» — пароль: (Для FTP — укажите пароль FTP-пользователя, Для SFTP — укажите пароль из данных для подключения по SSH.
«remotePath» — полный путь к каталогу сайта: (Для FTP: Либо укажите / — если нужно попасть напрямую в каталог доступа пользователя FTP, либо укажите остаток пути от каталога доступа пользователя FTP до нужного подкаталога — если нужно попасть не напрямую в каталог доступа, а в его подкаталог. Для SFTP — укажите путь в виде /home/user/example.com/www/, где user это название хостинг-аккаунта, а example.com/www это каталог сайта.

Сохраните изменения в конфигурационном файле.

После этого жмем Ctrl+Shift+P (Windows/Linux), вводим Remote FS: Add Folder to Workspace. И радуемся — теперь можно кодить на сайте прям из редактора.