Install and configure Sublime Text 3 for Django

In this post, you’ll learn how to install Sublime Text 3, my new discovery regarding editors. It has made my life easier!

Moreover, I’ll show you how to configure it to help you when coding with Django!

Installation

First, download and install Sublime Text 3 from their official website.

Also, install Package Control from its website (follow the simple steps on that page). It is a useful tool that will help you install and update new plugins for Sublime Text.

After you have installed this package, open the Command Pallete, which can be opened from Sublime Text and pressing ctrl + shift + p (windows and Linux) or cmd + shift + p (OS). Once opened, type:

Package Control: Install Package

You will see all the available packages to install. You can read more about how to use Package Control here.

Install Sublime Code Intel by selecting the package SublimeCodeIntel. This package will improve the autocompletion in your Python, Django, HTML, JavaScript and CSS code. Check a demo here.

Following the same procedure as before, install Anaconda and Djaneiro.

Personalization for Python/Django

With this packages, you’ll get help in writing your code with the official style guide for Python, PEP8. However, I find the max line length limit too short: 79 characters. Therefore, I’ll show you how to extend this limit to 99 characters, which is also accepted by PEP8 but only for exclusive team projects (and provided that comments and docstrings are still wrapped at 72 characters).

From Sublime Text go to the upper menu: Sublime Text –> Preferences –> Package Settings –> Anaconda –> Settings – Syntax Specific – User

A new tab will open in your Sublime Text. Type:

{
    “pep8_max_line_length”: 120,
}

Save the file, close Sublime Text and open it again to make the changes effective. Make sure you really close the app, and it doesn’t remain open in your navigation bar (specially for Mac users).

Another thing we need to change is that by default, Sublime Text writes a Tab when the tab key is pressed, instead of 4 spaces. To change this, go again to the upper menu: Sublime Text –> Preferences –> Settings – User and write:

{
    “translate_tabs_to_spaces”: true,
}

Note: if there was something on that file, add it like:

{
     “some text” : “some other text”,
     “some text” : “some other text”,
     “translate_tabs_to_spaces”: true,
}

Close and open again to apply the changes.

Sublime Command Line

If you are using Mac OS X, you can add the subl command line to open files with Sublime Text.

To install it, you should run:

$sudo ln -s “/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl” /bin/subl

Note: the above code is a single line (but it truncates here due to its length). Also, make sure that the folder /bin is in your PATH:

$ echo $PATH

should show a list containing the folder /bin. If it’s not the case, in your home directiory, open or crete a file named .procfile (with the initial dot) and add:

export PATH=$PATH:/bin

You can check out all the possibilities of the subl command here. Also, you can type

$ subl –help

to list all the commands you can use.

Create a project

I assume that the files of your project are contained into a folder, namely the projectfolder. We will open all the files in that folder at the same time:

$ subl projectfolder

Then, we will save it as a project, to open it again whenever we want. In the upper menu: Project –> Save Project As, and name your Project.

If you go to your projectfolder, you will see two different files there: projectname.sublime-project and projectname.sublime-workspace. These two files are JSON files. Then, to open your project just type:

$ subl projectname.sublime-project

This is very useful, as it opens your project with the same appearance as you left it! 🙂

If you are using Git, you should include the sublime-project file into your version control, but not the sublime-workspace one. Therefore, open your .gitignore file and include

projectname.sublime-workspace

When you are in Sublime Text with your project opened, you can visualize each file by clicking once on its name in the left menu. However, if you go to another file from another folder, the previous file disappears. Note that when you are visualizing a file, the name in the upper tab is in italics.

To make it persistent, you should click twice on the file. You’ll see that the name on the tab is not written in italics. Also, if you modify a file, it automatically will be persistent.

Change the autocomplete key

One thing I don’t like about the autocomplete option is that sometimes they go against you. You are typing your piece of code and when you type Enter or tab, suddenly you get a non-desired function written there. This is why I’m going to explain how you can change that in Sublime Text 3 🙂

We are going to let the autocomplete option only when tab is pressed, and not Enter. Go to Sublime Text –> Preferences –> Key Bindings – User and add the following:

[
    { “keys”: [“enter”], “command”: “commit_completion”, “context”:
        [
            { “key”: “auto_complete_visible” },
            { “key”: “setting.auto_complete_commit_on_tab”, “operand”: false }
        ]
    },
]

Next, go to Sublime Text –> Preferences –> Settings – User and add:

{
“auto_complete_commit_on_tab”: true,
}

Close and open Sublime Text and now, only when you press the tab key, you will autocomplete your functions!

Autocomplete Tip: When you are writing your models in Django, if you simply write Model and press tab (or enter if you didn’t change the autocomplete), a template for a new model will appar. Nice! 🙂

Check this post if you want a complete Cheat Sheet of all the Sublime Text 3 shortcuts!

I’ll try to write more useful tips as I discover them!!

Hope it was useful 🙂

+1 if Sublime Text made your life easier!