What are your suggestions for an ideal Sublime Text 2 configuration for development in HTML, CSS and JavaScript? [closed]

Question

Sublime Text 2 is not a fully featured editor from the beginning but seems to have tremendous power behind the scenes. While there are a lot of blog posts on the web giving you lists of packages which all seem usefull at first glance, you then find out during coding, that you use only a handfull of essential plugins on the daily basis, while some of the rest even produce performance issues.

In Sublime Text 2 nearly all of the configuration is done by creating and editing config files. Maybe some of you have already setup the editor for development in HTML, CSS and JavaScript in such a way, that it's possible to share the config files and a step by step instruction on what to install (and which docs to read). So my question is:

How do you customize Sublime Text 2 for coding in HTML, CSS and JavaScript to improve your productivity?

Sub-questions:

• Which specific settings changes do you find essential (for example tabs are not enabled out of the box)?
• Which packages do you find essential?
• How do you setup features like validation, real time syntax checking and code hints?
• How do you sync the editor (settings and packages) on two machines (using Dropbox or something similar)?

Feel free to add more sub-questions. Thanks!

Answer 1

I don't see how there can be a single answer to this question since it depends so heavily on what you are doing at the time.

Personally, I like Sublime because of its flexibility and cross-platform support. It is already enough of an IDE for many tasks without any changes. Though I've found with a UK keyboard, you have to change the default key combination for switching the console on and off - ctrl-\ works for me, ctrl-` is a dead-key combination.

Not sure what you mean about Tabs though? Is it because you have the distraction free (full-screen) setting turned on? That confused me, I prefer it off. Otherwise you certainly get tabs by default. And I love the split-screen capabilities.

The thing I love the most though is that you can just close Sublime without having to save things! I tend to keep 3 or 4 unsaved "documents" open as scratchpads - I never need to worry about loosing data.

Having said that, I like to add a few things:

• Sublime Linter - linting for several languages including JS and CSS. Though the default settings need adjusting slightly.
• BracketHighlighter
• ChangeTracker - see which parts of a file have changed
• A shell utility (there are several available)
• Sublime v8 & Node - direct access to run and lint code
• SFTP for remote access direct to files
• Some Markdown addins - make it even better to use Markdown
• DocBlockr - a helper for doc blocks
• A diff addin
• Automatic backups
• Coffee Script

All of these (and more) can be installed & managed with Sublime Packages

I've also a few TextMate bundle addins for things like Jade and Apache conf files.

For your sub-questions:

Which specific settings changes do you find essential (for example tabs are not enabled out of the box)?

Change the console switch as mentioned. Change the default settings for JS linting to allow for more modern styles.

Which packages do you find essential?

Shown above

How do you setup features like validation, real time syntax checking and code hints?

Just install the plugins! JS linting is a little too agressive for my liking, see my settings at the end of the post.

How do you synch the editor (settings and packages) on to machines (using Dropbox or something similar)?

I don't. I don't really need this. I have it installed on two boxes, one Windows and one Linux. Each have slightly different uses so I don't worry about synching, I just copy settings over if I want them. Dropbox synch would be easy enough though if that's what you wanted. Simply link the Sublime settings folder into the dropbox folder. Might not always work cross-platform though.

---

Here are the changed Sublime Linter settings:

"sublimelinter_fill_outlines": true,
"jshint_options":
{
    "evil": true,
    "regexdash": true,
    "browser": true,
    "wsh": true,
    "trailing": false,
    "sub": true,
    "latedef": true,
    "newcap": true,
    "regexp": true,
    "laxcomma": true
},

Here is the user keymap change for the console switch:

[
    { "keys": ["ctrl+\\"], "command": "show_panel", "args": {"panel": "console", "toggle": true} }
]