Search code examples
sublimetext3

Sublime text3, a file icon webpack icons

I'm using Sublime text 3 on mac, and no matter what i do with A file icons plugins webpack icons is only showing if the file name has the word config

webpack.config.js

but if the file name is anything else, the icon is just a normal js file

webpack.dev.js
wepback.prod.js

webpack.dev.js and webpack.prod.js are just showing as a regular js icon

i reinstalled the plugin, still same issues, even reinstalled sublime couple of times when i try to revert it i'm getting this error enter image description here

Solution

  • The problem is that A File Icon's Webpack Icon only works if the file extensions are:

    • "webpack.config.js"
    • "webpack.config.babel.js"
    • "webpack.dev.js"
    • "webpack.mix.js"

    Now, To make it work for your custom extensions as in your case for "wepback.prod.js" you will have to mannualy add this file extention into the A File Icon's icons.json file.

    To do this follow the steps:

    1. Install a sublime package called PackageResourceViewer.
    2. Open the Command Pelette window with ctrl+shift+p.
    3. Type PackageResourceViewer: Extract Package & click it. (This will help us to extact sublime packages).
    4. Select A File Icon's from the list and click Start Extraction. (This will extract the A File Icon's packge and place it into the sublime's Packages folder)
    5. Once extracted, open preferences -> Browse Packages.
    6. Navigate to A file Icon/icons/icons.json
    7. Open the icons.json file in sublime text and search for "file_type_webpack" inside the file.
    8. Inside the "file_type_webpack" object there will be a property called "extensions".
    9. Now inside this property you can add your "webpack.prod.js" custom file extension.

    Once added, save the file and restart sublime text.

    Now A File Icon's will show the Webpack Icon for the "webpack.prod.js" file extension!!

    Note: If you are using zzz A File Icon zzz then you can do the following:

    1. open preferences -> Browse Packages.
    2. Navigate to zzz A File Icon zzz/aliases/
    3. Inside the aliases folder, open the file named JavaScript (Webpack).sublime-syntax inside sublime text.
    4. Once opened, there will be a property called "file_extensions" & inside here you can add your "webpack.prod.js" file extension & this will fix your problem!!