Иконки файлов в сайдбаре Sublime Text 3

#sublime_text #sublime_text_3

Установил новую тему для Sublime Text 3 только ради иконок файлов в Sidebar. Но на
деле оказалось всё не так радужно.
Как должно быть:

  

Как у меня:  

 

Да и иконка .sass не та:

   

То есть Sublime Text не понимает эти типы файлов. И во всех темах есть этот косяк.
Главный трабл в том что я специально скачал чистую portable версию, и даже в ней не
работает. Да и вообще есть несоответствия с многими иконками. В чём может быть проблема?
    

Ответы

Ответ 1

Во-первых, скачаем выбранную Вами Material Theme, перейдём в папку icons и посмотрим,
какая иконка соответствует JavaScript.



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

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

Для начала переместим требуемые изображения в какую-нибудь папку. Ссылки на некоторые
наборы иконок выложены в данном треде на форуме Sublime Text, мы воспользуемся файлами
из Material Theme, пусть для Sass там выбрана на мой взгляд неудачная иконка. Preferences
→ Browse Paskages... → User. Создаём папку Theme - Default, если она ещё не создана.
Название для папки не я придумал, оно обычно используется. Копируем туда всё — или
только изображения, которые пригодятся, — из папки icons Material Theme.

Preferences → Browse Paskages... → User → Theme - Default → создаём папку Preferences,
в которой будут располагаться файлы, о которых зайдёт речь ниже. В один всё у меня
вместить не получается, придётся с каждой иконкой связывать отдельный файл с расширением
tmPreferences.



Ruby

В новый файл Ruby.tmPreferences вставляем XML-конструкцию ниже, и сохраняем его:





    scope
    source.ruby
    settings
    
        icon
        Theme - Default/file_type_ruby
    




Между вторыми тегами  указывается путь к файлу иконки и его имя
без расширения.



Sass

Предположу, что Вы получили неудовлетворительные результаты, поскольку не подключили
отсутствующий по умолчанию в сборке Sublime Text 3 синтаксис Sass. Через Package Control
устанавливаем плагин, который в Package Control (имена плагинов в репозиториях, на
сайте Package Control и самом Package Control могут отличаться) называется просто Sass.

Теперь можно связывать sass-файлы с иконками. Создаём файл Sass.tmPreferences и вставляем
в него код.





    scope
    source.sass
    settings
    
        icon
        Theme - Default/file_type_sass
    






Markdown

Здесь между первыми тегами  недостаточно по аналогии вписать source.markdown
или source.md, и такое может случиться для других языков разметки/программирования.
Потребуется вставить «область видимости», scope. Как её получить, я очень подробно
расписал в данном ответе. Итак, достаём область видимости:



Сколько бы записей в ней не содержалось, нас интересует только первая, text.html.markdown.gfm,
которую мы и вставляем в файл Markdown.tmPreferences:





    scope
    text.html.markdown.gfm
    settings
    
        icon
        Theme - Default/file_type_markdown
    






Чтобы не вставлять код каждый раз вручную, рекомендую скачать набор из 70 tm.Preferences
файлов для распространённых компьютерных языков.



Изображения

К примеру, у бинарных, исполняемых файлов или картинок области видимости посмотреть
не получится. Чтобы изменить им иконки, необходимо добавить файлы со следующими названиями
в папку, где лежит файл активной темы с расширением tmTheme, у меня он располагается
по пути Preferences → Browse Paskages... → User.

file_type_binary.png
file_type_default.png
file_type_image.png
file_type_markup.png
file_type_source.png
file_type_text.png


Из названий понятно для чего они предназначены. Напротив наших изображений теперь
будет стоять иконка с названием file_type_image.png



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





Буквально во всех темах, которые мне доводилось увидеть, за редким исключением используются
одни и те же иконки. В светлых темах многие из них плохо видны, допустим, тот же оранжевый
значок JS на жёлтом фоне.



А иконки, взятые со сторонних сайтов, выглядят не очень красиво. Легко сменить цвета
самому можно, например, в GIMP при помощи функции Hue-Saturation. Открываем в этом
графическом редакторе файл иконки → Tools → Color Tools → Hue-Saturation, и двигаем
слайдеры, — изменение цвета достигается перемещением ползунка Hue:



После того, как подобрали колор, яркость и насыщенность, File → Overwrite file_type_%Ваш
тип файла%.png.



Примеры изменённых мной таким образом иконок: 

file_type_js.png
file_type_markdown.png
file_type_source.png
file_type_yaml.png







Возможные баги

Если вы скачали новую тему или схему, вне зависимости от того, будете ли использовать
её или нет, иконки в сайдбаре могут пропасть. В консоли при этом выдаётся примерно
следующая ошибка:

Errors parsing theme:
Rule is missing a class name
Unable to decode Packages/User/Theme - Default/arrow_down_over.png
pre session restore time: 0.3078


Устраняется проблема в 2 шага:


Ctrl+Shift+P → Package Control: Remove Package → выбираем нашу тему/цветовую схему
и удаляем её. Можно сообщить о проблеме разработчику темы/схемы.
У меня портились файлы с расширением tm.Preferences, о которых говорилось выше. Вместо
icons/file_type_ruby появлялись кракозябры.




Откройте любой tm.Preferences файл, посмотрите, есть ли там какие-то кракозябры,
и если да, то сделайте массовую замену кракозябр на корректные символы в папке, где
хранятся tm.Preferences файлы, с помощью поиска Ctrl+Shift+F.

После данных действий иконки вновь появлялись в моём сайдбаре.


Ответ 2

На момент написания ответа проблема решается следующим образом:


запускаем Package Control: Install package (комбинация клавиш Ctrl+Shift+P)  
вводим A File Icon в поисковую строку и устанавливаем    
перезапускаем Sublime Text 3 и иконки автоматически подтягиваются




Исходники лежат по ссылке: A File Icon