background preloader

Sublime Text 3

Facebook Twitter

Cheat Sheet. Changing Between Spaces and Tabs in Sublime Text. Sublime Text is pretty dang good at making it easy to switch between using tabs and spaces to indent your code.

Changing Between Spaces and Tabs in Sublime Text

More importantly, it makes it easy to adjust the indentation of code that doesn't match your preference. I thought I'd put this together for reference, as there is a particular sequence of steps for some of the transitions that needs to be followed. The first step is making sure your User Preferences are how you like them. I prefer spaces, so my settings are like this: Adjust to your liking there. Sublime Text Line and Indentation Tools (Tutorial #2) Settings – Reference — Sublime Text Unofficial Documentation. Keyboard shortcuts - Sublime 3 toggle comment command doesn't work in Windows.

Sublime Text 3 Guide: Tips, Tricks, and Shortcuts. Sublime Text 3 (ST3) is the latest version of one of the most commonly used plain text editors by web developers, coders, and programmers.

Sublime Text 3 Guide: Tips, Tricks, and Shortcuts

It’s available for Mac, Windows, and Linux, and free to download and use. Make the most of ST3 with the 25 tips and tricks in this ultimate guide for web developers. Learn about must-have packages, useful keyboard shortcuts, and more. How to show whitespace in Sublime Text. There’s one every team: That one guy who’s taken the wrong side in the eternal Tabs vs.

How to show whitespace in Sublime Text

Space Debate. Perhaps he doesn’t know any better. It’s possible he just hasn’t bothered to set up his text editor. Or maybe, you suspect darkly, he knows and does it on purpose… Whatever the reason, his commits are a pain to review. While Sublime can’t dish out the attitude adjustment this guy so justly deserves, it can make it easy to spot (and fix) inconsistent use of whitespace in files. By default, Sublime shows whitespace on selected text: Tabs show up as dashes, while spaces are dots. You can control when Sublime shows white space with the draw_white_space setting. To change your whitespace preferences, run Preferences: Settings – User in the command palette, then add the draw_white_space setting: If you also want Sublime to automatically replace tab characters with spaces when you open a file, override the translate_tabs_to_spaces setting: P.S. 33 Essential Sublime Text Plugins for All Developers. Introduction As developers, we consume our time with code editors (or IDEs).

33 Essential Sublime Text Plugins for All Developers

Therefore there is a kind of inescapable emotional commitment. Just like some people we spend too much time with, code editors deserve attention, too. Don’t use IDs in CSS selectors? ❧ (@boblet) Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint.

Don’t use IDs in CSS selectors? ❧ (@boblet)

The “Don’t use IDs in selectors” suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. CSS Lint is harmful. CSS Lint is harmful Tools like CSS Lint, and CSS Lint in particular, are mainly about checking your CSS for browser performance.

CSS Lint is harmful

Performance at the cost of everything else. Performance as the altar at which all the other benefits of CSS are sacrificed. Unless you work at Google, or Yahoo, and are styling a mammoth ultra-ambitious project inside a team of dozens, where each developer is an island, it is very unlikely you need to optimise the performance of your page to the extent this tool aims, or pay the penalties required by CSS Lint’s rules. Adding CSS Vendor Prefix Automatically with Sublime Text. There are many CSS3 properties that are still experimental.

Adding CSS Vendor Prefix Automatically with Sublime Text

An experimental CSS property uses vendor prefix, and as we already know, each browser has their own prefix; Firefox uses -moz-, Internet Explorer uses -ms-, Chrome and Safari use -webkit-, and Opera uses -o- (which has been switched to -webkit- as well). The problem is, unless you are utilizing Compass, including vendor prefix is tedious. The requirement is also varied for each browser, and whether we should include the prefix (or not) becomes a question worthy of consideration. About SublimeLinter — SublimeLinter 3.4.24 documentation. SublimeLinter is a linting framework.

About SublimeLinter — SublimeLinter 3.4.24 documentation

The actual linting is done by separate Sublime Text 3 plugins, which can be installed via Package Control. What is a linter? ¶ A linter is a small program that checks code for stylistic or programming errors. Linters are available for most syntaxes, from Python to HTML. SublimeLinter does not do the linting itself; it acts as a host for linting plugins. Note that SublimeLinter is not limited to a single linter plugin per syntax — you are free to install multiple linter plugins for a syntax, and all of them will run when you edit a file in that syntax. In addition, SublimeLinter supports multiple syntaxes in a single file, which is common when editing HTML. Usage — SublimeLinter 3.4.24 documentation. GitHub - jonlabelle/Trimmer: A Sublime Text plug-in for cleaning up whitespace. Sublime ColorPicker by weslly. Installation Install this repository via Package Control Usage.

Sublime ColorPicker by weslly

Quick Tip: Enable Sublime Text Word Wrap » Justin Seeley. I’m a big fan of Sublime Text 2 and it has become my default editor for all things web design.

Quick Tip: Enable Sublime Text Word Wrap » Justin Seeley

However, there was something about the default behavior of this app that really bugged me. Whenever I would browse a document I would always get frustrated by the way the application would horizontally scroll whenever a document had really long lines of code (like lengthy CSS declarations). I knew there had to be a way to force the code to wrap to a new line and disable this behavior.

Well, after a long Google search, I found the answer, and thought I’d share with you how to enable Sublime Text word wrap. 18 Essential Plugins to Get More Out Of Sublime Text. Even though SublimeText comes with a bunch of great features that help our work as web developers, like any other tool, there will always be a room for enhancements.

This is when plugins can be real useful (and we are huge fans of plugins). Before we proceed, maybe you’d like to check out our previous posts on SublimeText to see what it can do in its native state: Moving on, in this post, we have put together a few plugins that you may need to install to fill the functionalities that are missing from SublimeText. Node.js - How to resolve 'npm should be run outside of the node repl, in your normal shell' How to install SublimeLinter and JSHint in Sublime Text.