Настройка Visual Studio Code для редактирования XVM-конфигов.

[ktulho]

Навигация по теме:

• Установка и знакомство
• Подсветка синтаксиса
  • Установка
  • Файл расширения
• Расширения
  • Список и ссылки на расширения
  • Настройка некоторых расширений
  • Темы
• Некоторые возможности редактора
• Горячие клавиши

  

      Решил я попробовать использовать Visual Studio Code (VSC) для редактирования файлов конфигурации XVM. Сам я им только начал пользоваться (до этого использовал Notepad++), поэтому буду рад, если желающие поделятся опытом работы в нем. У меня пока только положительные впечатления от работы в нем.  

       Итак, согласно Википедии:

Цитата

Visual Studio Code — редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации. Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом, но готовые сборки распространяются под проприетарной лицензией.

      Скачать дистрибутив можно с официальной страницы. После установки имеем:

      

      Первое, что захотелось сделать, это русифицировать интерфейс. Для этого кликаем по иконке Extensions (Расширения) на левой панели и набираем в строке поиска Russian Language Pack. В первой строчке будет нужный нам результат. Нажимаем Install и после установки расширения перезапускаем программу.

      

      Теперь откроем папку с нашим конфиг XVM (Файл->Открыть папку...). VSC из "коробки" поддерживает языковой режим "JSON с комментариями" (файлы конфигурации XVM это немного расширенный формат JSON с поддержкой комментариев). Если языковой режим не определился автоматически, то нужно кликнуть в правом нижнем углу и выбрать в списке "JSON with Comments".

      

      Что же, неплохо, но это несложно сделать и в Notepad++. Приступим к поиску полезных и не очень расширений (список в конце сообщения). В результате установки и небольшой настройки расширений перечисленных в списке ниже, у меня получился следующий вид:

      

     Хорошо заметны отступы, блоки кода и концевые пробелы, выделены парные скобки и теги.

 

      Единственное, что смущает это скудная подсветка синтаксиса. Немного покурив Google, сделал подсветку для файлов *.xc. В разных темах она может выглядеть по разному. В стандартной темной теме она выглядит так:

     

       Для установки данной подсветки необходимо:

1. скачать файл xc-X.X.X.vcix (файл находиться в конце сообщения), где X.X.X - версия расширения
2. запустить VSC
3. в право верхнем углу панели "Расширения" (Ctrl + Shift + X) нажать кнопку  
4. в выпавшем меню выбрать пункт "Установка из VSIX..." и выбрать скачанный файл

     После этого в панели "Расширения" у вас должно появиться расширение:

     

    Расширения:

Существует несколько способов установки расширений. Для меня самый простой способ это пользоваться поиском расширений в самой программе.

1. Bracket Pair Colorizer 2 - добавляет подсветку для скобок, окружающих блоки кода.
2. indent-rainbow - расширение делает отступы более читабельными.
3. Indenticator - еще одно расширение помогающее облегчить восприятия блоков (секций) кодов.
4. Subtle Match Brackets - выделяет парные скобки возле которых находиться курсор.
5. Color Highlight - подсвечивает CSS / веб-цвета, найденные в вашем документе. К сожалению на данный момент не поддерживает цвета в виде 0xFFFFFF, хотя судя по репозиторию попытки были (Пересобрал данное расширение, теперь поддерживает цвета в виде 0xFFFFFF. Скачать расширение можно в конце данного сообщения).
6. Trailing Spaces - выделяет и может удалять конечные пробелы (ALT+SHIFT+T).
7. Highlight Matching Tag - выделения соответствующих открывающих или закрывающих тегов.
8. Russian - Code Spell Checker - русский словарь проверки орфографии. Вместе с ним установиться Code Spell Checker и английский словарь.
9. TabSpacer - конвертирует табы в пробелы (Ctrl + Shift + T).
10. Project Manager - менеджер проектов. Будет полезен, если вы настраиваете несколько конфигураций.
11. Path Autocomplete - автозаполнение пути к каталогам и файлам.
12. Markdown Preview Enhanced - предпросмотр файлов в формате Markdown. Пригодится для редактирования файлов README.md на GitHub или BitBucket. (Ctrl + K, V или Ctrl + Shift + V)
13. L13 Diff - Сравнение двух папок (Ctrl + L Ctrl + L).

 

Почти все расширения имеют настройки (Файл->Параметры->Параметры->Расширения).

 

 Темы (переключаться между темами можно сочетанием CTRL+K, CTRL+T):

• Atom One Dark Theme

 

• Solarized Custom (3 темы)

• Yi Dark & Yi Light Themes (2 темы)

       Расширение для подсветкой синтаксиса файлов конфигурации XVM: xc-1.0.0.vsix

 

        Пересобранное расширение Color Highlight: color-highlight-2.3.1.vsix

Edited November 29, 2020 by ktulho

[ktulho]

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

• В верхнем левом углу есть кнопка поиска. Она позволяет осуществлять поиск во всех файлах открытой папки.

• Удерживая нажатой клавишу ALT и кликая мышкой в разных местах редактируемого файла можно создать несколько курсоров, а затем одновременно редактировать текст в этих местах.

• Сочетание клавиш CTRL+\ позволяет вертикально разделить экран на 2, 3, 4 и т.д. части. Также окно можно разделить различными способами в меню Вид->Макет редактора.
• Открытые в редакторе файлы можно сравнить между собой. Для этого в панели "Открытые редакторы" нужно кликнуть правой кнопкой мыши на одном из файлов и выбрать пункт "Выбрать для сравнения", затем кликнуть правой кнопкой мыши на втором файле и выбрать "Сравнить с выбранным".

• Если вы еще не сохранили Файл после внесенных в него изменений, то можете сравнить текущие изменения с сохраненными. Для этого в панели "Открытые редакторы" кликнете правой кнопкой мыши на файле и выберете пункт "Сравнить с сохраненным".

 

 Настройка и использование расширений:

Почти все расширения имеют настройки. Все настройки хранятся в файле settings.json, частично их можно настроить в Файл->Параметры->Параметры (Ctrl + ,). Открытие файла settings.json:

1. Открыть окно Параметры (Ctrl + ,)
2. В правом верхнем углу нажать иконку 

• Subtle Match Brackets выделяет парную скобку прямоугольником. Настройка:

Открыть файл settings.json и вставить в него секцию:

    "subtleBrackets.style": {
        "borderWidth": "1px",
        "borderColor": "blue",
        "borderStyle": "none none solid none",
        "backgroundColor": "#9999FF77"
    }

Назначение параметров:

• "borderWidth" - толщина контура
• "borderColor" - цвет контура в формате #RGBA
• "borderStyle" - имеет четыре значения для каждой стороны контура (верхнее правое нижнее левое). Может принимать следующие значения: 

• "backgroundColor" - цвет фона #RGBA

• Project Manager позволяет быстро переключаться между проектами. В нашем случае, между конфигами. Для того чтобы, сохранить конфиг как проект нужно:
  1. Открыть папку с конфигом (Ctrl + K Ctrl + O)
  2. Открыть "Палитру команд" (Ctrl + Shift + P или F1)
  3. Набрать команду Project Manager (можно набирать части слов) и выбрать пункт Save Project
  4. Ввести название проекта

После этого, кликнув по иконке Менеджера проектов  , можно переключаться между проектами (конфигами).

 

• Path Autocomplete. Данное расширение позволит нам быстро и без ошибок прописывать пути к картинкам и не только. Настройка:

Открыть файл settings.json и добавить в него секцию "path-autocomplete.pathMappings" (путь до папок указать свой):

    "path-autocomplete.pathMappings": {
        "xvm://": "d:/World_of_Tanks/res_mods/mods/shared_resources/xvm",
        "cfg://": "d:/World_of_Tanks/res_mods/configs/xvm"
    }

После этого, при наборе xvm:// или cfg:// пути в конфиге будут дополняться автоматически.

 

 Некоторые сочетания горячих клавиш:

• Редактор
  • Alt + Shift + ↓ - Копировать текущую строку вниз
  • Ctrl + F - Найти
  • Ctrl + H - Заменить
  • Ctrl + /  - Переключить строчный комментарий
  • Alt + Shift + A - Переключить блочный комментарий
  • Alt + Click - Добавить курсор
  • Alt + Shift + Выделение - Выделение по столбцам
  • Alt +  ↓ или Alt + ↑ - Переместить строку вниз или вверх
  • Ctrl + ] или Ctrl + [ - Увеличить или уменьшить табуляцию для строки
  • Ctrl + K Ctrl + 0 (ноль) - Свернуть все блоки (секции)
  • Ctrl + K Ctrl + J - Развернуть все блоки (секции)
  • Ctrl + \ - Разделить редактор и дублировать файл
• Левая панель
  • Ctrl + Shift + E - Проводник
  • Ctrl + Shift + F - Найти в файлах
  • Ctrl + Shift + H - Заменить в файлах
  • Ctrl + Shift + X - Расширения
• Ctrl + Shift + P или F1 - Палитра команд
• Ctrl + S  - Сохранить файл
• Ctrl + K, Ctrl + T - Выбрать тему оформления
• Ctrl + , - окно Параметры

 

Edited June 21, 2019 by ktulho

[ddar]

Наконец-то подсветка. Ура.

[ktulho]

2 минуты назад, ddar сказал:

Наконец-то подсветка.

Если увидите какие то ошибки связанные с подсветкой, сообщайте, попробую поправить.

[ddar]

Может здесь убрать курсив?

[ktulho]

2 минуты назад, ddar сказал:

Может здесь убрать курсив?

Это зависит от темы.

В 13.05.2019 в 00:46, ktulho сказал:

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

     

 

Edited May 14, 2019 by ktulho

[ddar]

3 минуты назад, ktulho сказал:

Это зависит от темы.

В 13.05.2019 в 00:46, ktulho сказал:

Точно. Жаль.

[ktulho]

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

 

Обновил в шапке архив с подсветкой синтаксиса.

[ddar]

Круто. Для battleLabelsTemplates.xc вообще как глоток свежего воздуха.

[ktulho]

3 часа назад, ddar сказал:

Может здесь убрать курсив?

А как называется эта тема?

[ddar]

Только что, ktulho сказал:

А как называется эта тема?

One Dark Pro

[ktulho]

@ddar можно попробовать Atom One Dark Theme, вроде такая же, только знаки препинания не курсивом сделаны.

[ddar]

@ktulho даже не знаю, как благодарить. Спасибо.

[Xotabych]

@ktulho выражаю огромную благодарность за подробный мануал.

Дай бог тебе здоровья и вдохновения, удачи во всем тебе.

[ddar]

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

${ "battleLabelsTemplates.xc": "def.sixthSenseTimer" },
или
"shadow": ${ "@xvm.xc": "mainShadow" },

Если заменять эти ссылки такими

"shadow": { "$ref": { "file": "@xvm.xc", "path": "mainShadow" }}

то все нормально. В чем может быть проблема?

Edited May 17, 2019 by ddar

[ktulho]

17.05.2019 в 13:05, ddar сказал:

В чем может быть проблема?

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

Edited June 6, 2019 by ktulho

[ktulho]

Добавил парочку расширений и их настройку.

[ktulho]

Добавил еще пару расширений и описание настройки для Subtle Match Brackets. Особенно хотел бы отметить расширение L13 Diff, каждый, кто хочет поддерживать свой конфиг в актуальной состоянии, должен иметь средство для сравнение каталогов.

[ktulho]

Сделал подсветку синтаксиса файлов конфигураций XVM в виде расширения. Описание установки добавил  в шапку.

13.05.2019 в 00:46, ktulho сказал:

Для установки данной подсветки необходимо:

1. скачать файл xc-X.X.X.vcix (файл находиться в конце сообщения), где X.X.X - версия расширения
2. запустить VSC
3. в право верхнем углу панели "Расширения" (Ctrl + Shift + X) нажать кнопку  
4. в выпавшем меню выбрать пункт "Установка из VSIX..." и выбрать скачанный файл

     После этого в панели "Расширения" у вас должно появиться расширение:

     

Не забудьте удалить папку %LOCALAPPDATA%\Programs\Microsoft VS Code\resources\app\extensions\xc перед или после установки данного расширения.

 

Надеюсь разработчики XVM не против, что я использую их картинку.

[13]

@ktulho седьмая ссылка в списке расширений ведёт не на то расширение :)