Best Sublime Preferences — Theme, Font, Color Scheme, Code Prettifiers & Packages

Only the perfect IDE and its preferences make your code better, said me. When I have perfect configurations in my IDE, my project looks cleaner and better. When you have the healthier project, It helps your client better understand your works which directly contributes to the welfare of your community is what I believe.

After working with hundreds of themes, prettifiers and fonts in a whole, I am going to share the list of preferences which suits my need ideally. As a Full-Stack developer who is specialized in React and Node.js, these configurations would go in a concerned manner. If you are not into JavaScript, don’t worry. Some of these configurations might help you which makes your project better. :-)

Before getting into, I will start with the latest IDE available so that you have tons of preferences added to select.

Install Sublime Text V.3.1.1 Build 3176

Starting off with the configurations …

1. Best Colour Scheme — Mariana (Colour Scheme — Default)

Choose a Colour Scheme by clicking on,

Sublime Text → Preferences -> Colour Scheme…and select Mariana (Colour Scheme — Default).

This is the default colour scheme available in latest build and it gives an apt colour to the classes, functions and for syntax highlighting supremely.

Colour Scheme — Mariana | Theme — Adaptive.sublime-theme

2. Best Theme — Adaptive.sublime-theme (Theme — Default/adaptive)

Choose a theme by clicking on,

Sublime Text → Preferences -> Theme…and select Adaptive.sublime-theme (Theme — Default/adaptive).

This is again the default theme available in latest build which gives you an ideal layout for your sublime which you can see in the above picture. If it looks very dark and your the kind of the person who needs to give a perfect alternative match to it, you can choose,

Default.sublime-theme

which gives you a layout like below.

Colour Scheme — Mariana | Theme — Default.sublime-theme

3. A File Icon — Package

A File Icon package gives cute icons to your extension files beautifully. I would recommend you to install one and you can find it at

https://github.com/ihodev/a-file-icon

A File Icon Package

The easiest way to install is using Sublime’s Package Control. It’s listed as A File Icon.

1. Open Command Palette using menu item Tools → Command Palette...
2. Choose Package Control: Install Package
3. Find A File Icon and hit Enter

4. Best Font — Default.

As you can see in the above picture, sublime’s default font is the best for any language. However, if you wish to update font, you can set it at

Sublime Text → Preferences -> Settings

and in the Preferences.sublime-settings-Default, you can find for font_face and update its value like,

"font_face": "Source Code Pro"

5. Best Code Prettifiers — Specific to HTML, CSS & JS

I am sorry to disappoint you in Code Prettifier section is that I am going to write specifically for HTML CSS & JavaScripts since I haven’t got a chance to work in other languages.

For Babel, JSX files users …

But to surprise JS developers, I have got them two packages covering both old and new syntax in JavaScript (ES5, ES6 etc.)

Like said in Step 3,

1. Open Command Palette and choose Package Control: Install Package
2. Find Babel and hit Enter to install.

Now you have supported syntax. To prettify JSX files, you can install the prettifier package called, JsPrettier.

1. Open Command Palette and choose Package Control: Install Package
2. Find JsPrettier and hit Enter to install.

Now you have successfully install your JsPrettier package. To prettify you can either right click the jsx file and select JsPrettier Format Code or you choose to auto format while you save by selecting at,

Sublime Text → Preferences -> Package Settings -> JsPrettier -> Settings — Default and search for the below mentioned key and update its value to true.

“auto_format_on_save”: true,

For pure JavaScript users …

When you are using only pure JavaScript, you can install the following package called

HTML-CSS-JS Prettify

• Ctrl+Shift+P or Cmd+Shift+P in Linux/Windows/OS X
• type install, select Package Control: Install Package
• type prettify, select HTML-CSS-JS Prettify

and now do Cmd+Shift+H to prettify your JS, HTML or CSS file.

When you come across any interesting theme which you find it better, you are welcomed to mention it in the comments. Happy coding.

Appreciate by your claps and encourage me to contribute more.

Thank you.