• Learn how to Run Mac Snow-Leopard on Ubuntu using Oracle Sun Virtual-box
  • Are you a Turbo C++ addict/? Learn how to emulate Turbo c++ with Dos-box in a few steps.
  • Ubuntu's purple love-- A Clean and minimalistic wallpaper for your Desktop.

Flask support for SublimeText



This is my first blog post of the year. I like to confess that I'd actually lost interest in this blog for all this time because of my college and work commitments. However, I've decided to start blogging again and publish at least one post per month.

In the past few months I've managed to pick up a few new skills and have taught myself python based web frameworks (Django, Web2py, Flask). Although I'm no expert with these web frameworks, I've successfully used them on some of my recent projects.

Working with python based web frameworks is fun and interesting, but it takes time to get used it. I initially faced a lot of confusion in choosing the right IDE/text-editor, because apart from python I would also be dealing with  HTML, CSS, and JavaScript. I first started using Eclipse with Pydev plugin and it seemed to work fine, but soon I realized it wasn't fast enough, and all that white background started to hurt my eyes. I then decided to move to SublimeText 2.

I'd been using SublimeText for editing HTML, CSS, and JavaScript files, and was quite happy with its speed and sleek looks. I did a bit of searching on google and stackoverflow, and found the right Plugins for adding Jinja2 syntax support and auto complete features for python modules.

Follow this guide to install and configure the plugins.

I assume you already have Package control installed, if not follow this link to install it.

To install a plugin press Ctrl + Shift + P
    Type “install” to bring up the “Package Control: Install Package” option, and press Enter
    Look for the plugin you want to install and press Enter to install it.

To Add a channel press Ctrl + Shift + P
    Type “channel” to bring up the “Package Control: Add channel” option, and press Enter
     Enter the plugin's github or bitbucket url and and press Enter to add it.

Install these plugins.

  • Emmet  - High-speed HTML, CSS coding and abbreviation engine.
  • SublimeCodeIntel  - Code intelligence and smart autocomplete engine.
  • SublimeRope -  Python completions and some IDE-like functions.
  • SublimeLinter – IDE like linting support.
  • SideBarEnhancements – Enhancements to Sublime Text sidebar.
  • Sublime-Jinja2 –  Jinja2 syntax highlighting and snippet support. Install this plugin from this channel https://github.com/jpvanhal/sublime-jinja2
Once you have all the plugins installed restart Sublime, and start a new project. I assume you know the basics of using Flask, virtualenv, pip.


Press Ctrl + Shift + P and type “Rope” and select “Rope: New project”. It will prompt you for the root path of your project and virtualenv, just press enter with the default values.












You should now have a new folder in the sidebar “.ropeproject”.

Expand the folder and open the “config.py” file, look for the line that starts with "prefs.add" and right below that, add the absolute path of your sitepackages and Flask app.

prefs.add('python_path', '/path/to/your/app')





The below code will configure the autocomplete trigger key. From the menu open “Preferences >KeyBindings – User” and add the below code and save the file.
[
{ "keys": ["ctrl+space"], "command": "auto_complete" },
{ "keys": ["ctrl+space"], "command": "replace_completion_with_auto_complete", "context":
    [
        { "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
        { "key": "auto_complete_visible", "operator": "equal", "operand": true },
        { "key": "setting.tab_completion", "operator": "equal", "operand": true }
    ]
}
]


Restart SublimeText and check if the packages autocomplete works by pressing “Ctrl + Space” against an import statement.
















For using Jinja2 snippets and syntax highlighting. Press Ctrl + Shift + P  type “jinja” and select  “Set Syntax: HTML(Jinja Templates)














To use the Jinja2 snippets type the trigger value and press “Ctrl + Space”. For instance I type “if” and press “Ctrl + Space” I get the if else block.













For more of such snippets you can refer the snippet files from the Sublime-Jinja2 repo. Open the files and check for the trigger value.

2 comments:

Szalai Barna said...

Hey, good article. Any idea how to make Sublime to automatically recognize if I have jinja lines in the html code? If it's possible.

kechap said...

Have you tried jedi? I tried both and found it snappier. Can't figure out how to use the linter though.

Post a Comment