Category Archives: sublimetext

sublime text editor – windows context menu integration

recently, i’ve been bouncing between a mac and windows dev environment and one of the things that i noticed when i use windows is that i’m not as command line driven as i am when i develop on a mac. it’s almost as if i’m regressing to being a UI-dependent user. one of the things that i find myself doing while in explorer is wishing that i had sublime text editor integration in the context menu. i didn’t install it during the install and missed it.

turns out someone has already figured out how to add it:
https://gist.github.com/jcppkkk/8330314

making the leap to sublime text 3

i’ve been holding back from taking the plunge into sublime text 3 because the plugin support for it has been slow to port over to 3’s new architecture, but, tonight, after a fit of frustration with some code, i decided i needed a distraction.

i took an inventory of what plugins i use and it turns out that the plugins i use have been ported over to be compatible with sublime text 3. there’s a great resource can i switch to sublime text 3 that will tell you what shape the plugins that you use are in.

the biggest change i see in my day to day life with sublime text is how sublimelinter works. they’ve completely revamped the way that plugin works. each linter is now a separate plugin that you need to install instead of being packaged together with the main sublimelinter plugin. what this enables which couldn’t happen was that you can run multiple linters for javascript at one time!

i love this because i run both jshint and gjslint on my code and have had to resort to hacks to be able to do this, but now i can do it all.

JavaScript source code indexing with Sublime Text Editor with ctags

As a JavaScript developer, IDEs are still relatively immature and some very basic features available in other languages are hard to find for JavaScript. A killer feature in Eclipse for other languages like Java is its ability to open declarations. What this does is provide you the ability to look up symbols.

Before, I’d have to look through code to try to understand where a particular JavaScript object is, but there’s a better way to do it.

Exuberant Ctags provides a mechanism to index your source code and create a map of all of the symbols it finds in your code.

The CTags package for Sublime adds Ctags support to Sublime. Ctags generates an index (or tag) file of language objects so that they can be quickly and easily located by a text editor.

Exuberant Ctag’s support for modern JavaScript is not great, but you can help it along by giving it some hints via a file ~/.ctag. You should put the following from Tim’s gist:

Mac OS X install directions:

  1. Install Ctags. Mac OS X comes with a version of ctags already which is not the Exuberant Ctags version, so you’ll want to move it some other location if you use a package manager like homebrew to install it.
  2. In Sublime Text Editor, install the CTags package via the Package Control.
  3. Create the file ~/.ctags and put into it whatever is in this gist: ctags definition for JavaScript.
  4. Open your favorite project and build the ctags for the project via the “CTRL-T, CTRL-R” key sequence.
  5. Find a piece of your code where you want to open a declaration and “CTRL-T, CTRL-T” to see if ctags can bounce you over to the relevant piece of code. It’s not perfect and can’t always do it for you, but it’s pretty darn good.

Fixing jslint and jshint errors

Screen Shot 2013-04-08 at 7.53.22 AM

Anytime you write JavaScript code, you should lint your code. Linting code helps you write better JavaScript code. Linters are a form of static code analysis which will scan through your code and identify potential problems that it may find in your code.

The transition from going from not linting your code at all to writing code that is lint-free is a bit of struggle at first. What do all of these linting errors mean? Sometime I will end up having to google what a particular lint error means and how to fix it.

Well, those days are gone thanks to JSLint Error Explanations. They even have sample code which demonstrates the linting error and tells you hot to fix it. Pretty nice.

The only annoying thing about the site is the “Fork me in GitHub ribbon” on the upper right that is fixed in that corner even if you scroll.

Speaking of linting, I also highly recommend Google Closure’s linter. It comes with a tool that will automatically fix style issues that it finds for you. Very handy and easy to use, though the install is a little bit of a pain.

And lastly, for Sublime Text Editor users, if you want to use multiple linting engines on the fly with the excellent SublimeLinter package, you can check out my fork of the SublimeLinter that calls multiple engines instead of just one.

Sublime Text Editor and CoffeeScript

If you use Sublime Text Editor, there are a couple of nice plugins that will help you along your journey.
sublime-better-coffeescript is a fork of the original Sublime CoffeeScript plugin. It provides you “syntax highlighting and checking, commands, shortcuts, snippets, watched compilation and more.”

sublime coffeescript

Watched compilation
Most of the features, you take for granted, but the interesting feature for me is the watched compilation. This means that if you save a CoffeeScript file, it will automatically compile it to JavaScript for you. This has been pretty handy when you start learning CoffeeScript.

Just write some CoffeeScript, save it, and check out what JavaScript is compiled. It sheds some insight on the syntax when you are just starting to learn CoffeeScript.

sublime text editor


My favorite text editor/IDE is Sublime Text Editor.  Its full power is realized when you use Package Control. The text editor is fast, the packages yield a lot of great functionality in an IDE, and best yet, writing your own packages is relatively easy.

Yes, the text editor is not free, but it is cross-platform: Mac, Windows, and Linux, and the licensing is generously attached to the user, not the machine. That means that if you buy a license, it can be used on any of your machines.

Package recommendations:
HTMLTidy – reformat HTML using Tidy
jQuery – jQuery auto-completions
Markdown Preview – Markdown renderer to see MD in your text editor
Nodejs – node.js auto-completions
SublimeCodeIntel – fuzzy logic code completion
SublimeLinter – lint your code on the fly – my fork discussed below
Theme – Soda – alternative theme for sublime
Tomorrow Color Scheme – alternative color scheme for sublime

SublimeLinter – wilco42 fork
SublimeLinter is a fantastic real-time code linter that will lint your code as you type, but if you are writing JavaScript code, you have to pick the default linting engine. Available engines are: jshint, jslint, and gjslint. jshint and jslint are similar enough that you can just pick one of those, but there are significant differences between the gjslint and jshint engines where running one or the other won’t catch all of your violations.

My fork adds a new engine which runs both jshint and gjslint. It’s a relatively simple change which calls both engines externally and applies the result in-editor. If you feel like you want to run both linters in your IDE, give it a whirl.