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

     Для установки данной подсветки необходимо распаковать содержимое архива в папку %LOCALAPPDATA%\Programs\Microsoft VS Code\resources\app\extensions\. После этого, при открытие файлов с расширением .xc в правом нижнем углу должна быть надпись "XC for XVM". Архив находиться в конце сообщения.

     

   Расширения:

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

  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 и английский словарь.

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

 

Темы (переключаться между темами можно сочетанием 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.97e6d03dbe1a4ea63c4f5e4c93517c94.pngimage.thumb.png.743da55a866665a116f7921d740bac90.png

     Архив с подсветкой синтаксиса для файлов конфигурации XVMxc.zip

 

Edited by ktulho
  • Upvote 9

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

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
46 минут назад, ddar сказал:

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

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

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.

×