Feeling Comfortable with Your Dev Enviroment

Do you feel excited about coding? Do you have something that inspires you, or keeps you motivated to code? Well, if not, keep reading. If so… also keep reading.

I believe your physical workstation and your virtual environment should feel comfortable because you do your best work when you feel good. You can do a lot of things in your office to make it feel better (maybe a new chair). But what about your virtual workstation? What can you do to improve your virtual environment?

Selecting a Text Editor

This is totally up to you and probably doesn’t apply to every developer because some devs will need an IDE, not just a text editor. Any option is okay as long as you feel comfortable using it. Personally, I prefer Sublime Text because of its extensive and knowledgeable community. You can find a plugin for almost anything!

Another thing I love about this text editor is that it is pretty lightweight, just ~8.1 MB (as of the release 3126). If you’re worried about the plugins increasing the size, don’t! The plugins are written in Python and their settings are JSON, so they’re pretty lightweight too.

Sublime Text is a freemium text editor. The premium version is practically the same as the free version. The only difference is that you get an alert after several saves (and with the premium version you can test beta versions, too). I hate popups, but for some reason, this one has never bothered me.

This is what my Sublime Text looks like:

Sublime Text 3 with Material Design Theme by equinusocio

Do you like it? If so, I’ll show you how you can set yours up just like this one.

Customization

Despite the fact that functionality comes first, we’ll start by looking at the visuals first since it is the easiest. I find that it is a good introduction to how the Control Package works. So, let’s do it!

Installing the Control Package

The control package is the Sublime Text helper to install plugins, themes, snippets, etc. Is not 100% required, but it does make life easier.

First, you’ll want to go to Control Package Installation Site and follow the instructions. They’re pretty clear, but in case you feel lost, or you’re not sure, here’s some help:

To show the console, in the menu bar, go to View > Show Console, you’ll see the console on the bottom of the window (note: border won’t show up on your screen):

 

This is where you paste the code from the Control Package website. The process can take from 2-20 seconds. After that, just restart Sublime Text and you can start installing packages easily!

Installing Packages

As I said above, visuals first.

1. Themes

I suggest the awesome Material Theme by Mattia Astorino (aka. equinusocio). We mentioned above that the Package Control is not fully required but makes life easier, and here you’ll see why.

To install the theme, open the command prompt by pressing + + P (Ctrl + + P on Windows and Linux) and type Install Package, wait just a little bit until the Control Package loads the repositories. When the all the repositories are loaded, the command prompt will appear again, this time with a list of all the available packages.

Search for Material Theme and install equinusocio’s (by pressing enter).

The theme should be applied right away, but if it isn’t, do a right click > Material Theme > Activate:

Sublime Text 3 - Active Material ThemeThe default settings on the Material Theme look awesome immediately upon installation, but you can customize it by changing the color scheme, the accent color, etc. These are my settings:

2. Plugins

Plugins can make life easier and better… Programmatically speaking. Here are some of my favorite plugins that adapt really nicely to my job. The process to install them is exactly the same as the theme above.

1. Emmet

Emmet (or Zen Coding) is the first plugin to install by excellence. It is not recommended for newbies or enthusiasts that want to learn how to code because this plugin does high-speed coding and code completion tasks. Examples? Of course:

In an HTML file, by typing html:5 you will get an initial HTML5 template:

Not cool enough? Ok, let’s go higher. By typing: .container>h1{Title}+.row>(.col-md-4>img.img-responsive[src="images/$.jpg"]+h2{Subtitle $})*3  and then pressing the tab key, you will get this:

Right now you may think “why should I want to write that complex and hard to read line to get exactly the same thing I can write manually?”. That’s when you notice why Emmet is not for newbies. I spent about 7 seconds writing that line vs. more than 30 seconds writing it manually.

This plugin is used to speed up your coding, but like any tool, you must learn how to use it effectively! Don’t be disappointed if you can’t decipher the meaning of that weird line right now, because later you’ll be writing lines 10x more complex and speeding up your code like a ninja (Zen-coding 😀  get it? Ok 🙁 ).

2. SFTP (Sublime FTP)

Generally, the most used software to send/download files from servers via SFTP/FTP is FileZilla, which is an excellent software by the way. But Sublime Text can handle that thanks to Sublime FTP. This plugin has a free version and a premium version, and since it’s under the same license type as Sublime Text your trial will never end, but it will keep showing you a popup every # of uploads/downloads.

Its usage is really simple and somehow similar to the FileZilla setup, with the only difference that you have to write the configuration in JSON format. No big deal. Once you have your connection set up, you can start downloading, uploading, browsing, etc. on your remote server. This keeps you focused on your text editor without having to change between windows.

3. Snippets (Various)

Snippets are little pieces of code that are commonly used for the same purpose. This is what the Emmet plugin mentioned above does. By typing a relatively short line of code and then pressing tab, you get an entire structure!

The ones I use are:

They all make our lives easier! Since they’re based on the official coding guidelines (almost!) we keep our code clean and ordered.

4. DocBlockr

Code documentation… there’s no avoiding it. It’s vital when you want to keep your code healthy and easy to maintain. Read Karina’s tips to make your code maintenance easier if you want to learn more about this. DocBlockr makes code documentation easier through comments.

Here’s an example of what you get if you type /** above of a function() line (don’t forget to press the tab key)

Sublime Text 3 - DockBlockr

Pretty neat, huh? This plugin makes me feel happy about commenting on my code.

There are a lot of plugins out there that can help you a lot, and probably make you feel better about coding and make your virtual workspace more comfortable. In my case, this theme and these plugins make me feel good! I love Material Design and having it on my text editor is great. Keep in mind code completion plugins, despite the fact that they are not meant to be used by newbies, can be excellent learning tools.