Jump to content
Korean Random
ktulho

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

Recommended Posts

Posted (edited)

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

  

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

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

Цитата

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

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

      image.thumb.png.7dcb4e759f7a195363a59b6b46eddbb0.png

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

      image.png.6442238221882ba08707c2355aac8a06.png

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

      image.thumb.png.96df93fe740889f41945defc02c71409.png

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

      image.thumb.png.dcb1ec05d92fc523170aa3ab5fd97d99.png

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

     

     Хотелось бы также отметить, что в редакторе отображается символ BOM. Дело в том, что на данный момент, при копировании текста с форума вместе с ним может скопироваться управляющий символ BOM (подробнее здесь), который может поломать конфиг. В VSC он, и не только он, будет отображаться специальным символом:

     image.png.d34a9bf4a5e0790acff729c41742fc1e.png

 

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

     image.thumb.png.24d1db5385d8a557d6bd9c86989515f9.png

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

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

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

image.png.9eaacc5250c8b3031a1ee8e1b21117b2.png

     

    Расширения:

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

  1. Bracket Pair Colorizer 2 - добавляет подсветку для скобок, окружающих блоки кода.
  2. indent-rainbow - расширение делает отступы более читабельными.
  3. Indenticator - еще одно расширение помогающее облегчить восприятия блоков (секций) кодов.
  4. Subtle Match Brackets - выделяет парные скобки возле которых находиться курсор.
  5. Color Highlight - подсвечивает CSS / веб-цвета, найденные в вашем документе. К сожалению на данный момент не поддерживает цвета в виде 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):

 image.thumb.png.17771de1aee85f028abe06fbdc89c335.png

image.thumb.png.6c655eab4a66bb73aebdfa09c0f66712.pngimage.thumb.png.a058ed429ad0c669e9eb7c717d92306d.pngimage.thumb.png.76efeb11fa627ae1d77d7f1ffa4aa235.png

image.thumb.png.743da55a866665a116f7921d740bac90.pngimage.thumb.png.97e6d03dbe1a4ea63c4f5e4c93517c94.png

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

Edited by ktulho
  • Upvote 10

Share this post


Link to post

Short link
Share on other sites

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

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

find.thumb.gif.dbe76f563932b64479d72daa5a7063da.gif

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

multiple_cursors.gif.6ac71035c69fe043203d7cef2c76dca8.gif

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

compare.thumb.gif.1db36e198a1292c72e80f0e51d365dc7.gif

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

compare_save.thumb.gif.679219ade3ede8bc65947cf1ce5cfefd.gif

 

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

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

  1. Открыть окно Параметры (Ctrl + ,)
  2. В правом верхнем углу нажать иконку image.png.da37cb7528f9befef5c84289b1a3fe90.png
  • Subtle Match Brackets выделяет парную скобку прямоугольником. Настройка:

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

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

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

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

image.png.0b8471dbf57b122d67781e2e90d7832b.png

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

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

ProjMan.gif.ef109f65f734f0b67d1ef7a189c265da.gif

 

  • 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:// пути в конфиге будут дополняться автоматически.

Autocomplete.gif.1f0ef1506fe0913abefb005fd7e274b5.gif

 

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

  • Редактор
    • 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 by ktulho
  • Upvote 2

Share this post


Link to post

Short link
Share on other sites
2 минуты назад, ddar сказал:

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

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

  • Upvote 2

Share this post


Link to post

Short link
Share on other sites
2 минуты назад, ddar сказал:

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

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

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

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

     image.thumb.png.24d1db5385d8a557d6bd9c86989515f9.png

 

Edited by ktulho
  • Upvote 1

Share this post


Link to post

Short link
Share on other sites
3 минуты назад, ktulho сказал:

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

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

Точно. Жаль.

Share this post


Link to post

Short link
Share on other sites

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

outline.thumb.gif.a91980ea9f1959fd368dc2b152b7cc3d.gif

 

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

  • Upvote 1

Share this post


Link to post

Short link
Share on other sites

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

Share this post


Link to post

Short link
Share on other sites
3 часа назад, ddar сказал:

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

vopros.png.f8b208b21ad6754225ad8f0cdc3b34eb.png

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

Share this post


Link to post

Short link
Share on other sites

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

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

  • Upvote 1

Share this post


Link to post

Short link
Share on other sites

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

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

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

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

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

struk.png

struk2.png

Edited by ddar

Share this post


Link to post

Short link
Share on other sites
17.05.2019 в 13:05, ddar сказал:

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

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

Edited by ktulho

Share this post


Link to post

Short link
Share on other sites

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

  • Upvote 2

Share this post


Link to post

Short link
Share on other sites

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

  • Upvote 2

Share this post


Link to post

Short link
Share on other sites

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

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

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

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

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

image.png.9eaacc5250c8b3031a1ee8e1b21117b2.png

     

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

 

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

  • Upvote 2

Share this post


Link to post

Short link
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×