CODEWITHSUNDEEP
sublimetext3
Taste of Leaving
Taste of Leaving

Reputation: 72

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

Upvotes: 2

Views: 1077

Answers (1)

dhruw lalan
dhruw lalan

Reputation: 801

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!!

Upvotes: 2

Related Questions