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, and select ( ). Sublime Text → Preferences -> Colour Scheme… 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, and select ( ). Sublime Text → Preferences -> Theme… 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 . It’s listed as . Package Control A File Icon Open using menu item Command Palette Tools → Command Palette... Choose Package Control: Install Package Find and hit A File Icon 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 , you can find for and update its value like, Preferences.sublime-settings-Default font_face "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 since I haven’t got a chance to work in other languages. HTML CSS & JavaScripts 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, Open and choose Command Palette Package Control: Install Package Find and hit Enter to install. Babel Now you have supported syntax. , you can install the prettifier package called, . To prettify JSX files JsPrettier Open and choose Command Palette Package Control: Install Package Find and hit Enter to install. JsPrettier Now you have successfully install your package. To prettify you can either right click the jsx file and select or you choose to auto format while you save by selecting at, JsPrettier JsPrettier Format Code and search for the below mentioned key and update its value to true. Sublime Text → Preferences -> Package Settings -> JsPrettier -> Settings — Default “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 or in Linux/Windows/OS X Ctrl+Shift+P Cmd+Shift+P type , select install Package Control: Install Package type , select prettify HTML-CSS-JS Prettify and now do to prettify your JS, HTML or CSS file. Cmd+Shift+H 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.