Visual Studio Code - Icons for MQL5 files in File Explorer - The Easy Way

Visual Studio Code - Icons for MQL5 files in File Explorer - The Easy Way

11 June 2020, 01:29
Flavio Javier Jarabeck
0
514

I'm using VSC for a WHILE now, but something that always bothered me - and just because I never gave a thought about it - is the image Icons representing my files in my source code tree. I was using the standard VSC icons package and it was "all right" for about 2 years... but today, waiting for a Backtesting result, I saw the File Explorer and decided to give it a revamp on the icons, mainly to expose visually the files that I always look to click on every day: the .mq5 and .mqh files.

That's the general ideia. Every file that is not important to the development processes - anyone but .MQ5 or .MQH files - should have a grayed icon.

Second need: I DON'T want to mess around creating icons, creating manifest files and packages just to change a couple of damn icons, so browsing the web and Forums, I discovered the VSC package named vscode-icons, and after reading its documentation, I found that it could really help me to solve this problem...


With more than 5 million installs, I'm pretty sure that this package could help me... anyway, I was looking for the basic...

And it did the job... Of course, nothing is perfect, in order to adapt myself to a set of icons that is the minimum of my requirements I found a pretty good solution and avoided to create my very own icons, so I was cool about that...

This package has a TON of preset icons, my job was to find the ones I want to substitute the Files Extensions I'm currently using in VSC for MQL5 coding. And I think I found.

After installing this package, just go to your settings.json file and add the following (as an example below):


// vscode-icons pack redefinition for MQL5 - fancy icons for MQL5 files...
"vsicons.presets.hideFolders": true,
        "vsicons.associations.files": [
                { "icon": "inc",        "extensions": ["log"],       "format": "svg" },
                { "icon": "vscode2",    "extensions": ["mq5","mqh"], "format": "svg" }
                { "icon": "powershell", "extensions": ["exe","ex5"], "format": "svg" }
                { "icon": "mercurial",  "extensions": ["png","ico"], "format": "svg" }
          ]


The "icon" element is the name of the icon in the library you will use to change the icon image on your files, identified by "extensions". The list could be found here:

https://github.com/vscode-icons/vscode-icons/wiki/ListOfFiles

So, my version of my File Explorer is the following:



The main purpose is to identify the file that I mostly use, that is, edit... So I gave it the Visual Studio Code logo in Blue... Other files were configured in Gray color, and the executable indicator file I used a Blue version of the Powershell icon...

I'm pretty impressed for the visual cues I gained with so little effort... I don't even need to read the whole filename to spot the right file to open!  :)


Hope this insipires you...


Live Long and Prosper


Share it with friends: