Uncle Mac
🤴 Super Admin
- Downloaded
- 91.3 GB
- Uploaded
- 306.3 TB
- Ratio
- 3434.51
- Seedbonus
- 3,467,191
- Upload Count
- 333 (352)
Member for 10 years
SUBLIME TEXT FOR FRONT END DEVELOPERS
With
You must be registered for see links
being one of today's hottest editors for web development, it's important to know the ins and outs of the editor as it relates to front end development. Rather than being a step by step guide on Sublime Text, this post is filled with hot tips, tricks and packages that will make you amazing with Sublime Text.Syntax Highlighters
It's almost 2015 and a ton has changed in the last few years - CSS has exploded with new features, JavaScript has introduced new functionality and syntax and we have a handful of new languages that compile into HTML, CSS or JavaScript. The syntax highlighters that come with Sublime are old, and even unavailable for some languages.
The following packages will allow for the best possible syntax highlighting. Even if you already have syntax highlighters for all of your languages - give this a read as you may wish to change a few of them.
The
You must be registered for see links
syntax highlighter provides better code highlighting than the default JavaScript highlighter as well as support for ECMAScript 6 features such as modules, succinct methods, arrow functions, classes, generators, and accessors (ES5).
You must be registered for see links
provides highlighting for every CSS3 feature in the spec. That is everything new as well as things that are yet to be implemented. This should totally replace any existing CSS syntax highlighting that you have.Sass users should install the
You must be registered for see links
. Heads up - it's a common mistake to search and install the Sass when you really aren't writing the Sass syntax, but the Scss syntax - make sure you have the right one enabled so that all other packages, like Emmet, continue to work properly.
Of course there are are also
You must be registered for see links
and
You must be registered for see links
packages available if they are your CSS weapon of choice.Write Coffeescript? Make sure you have the
You must be registered for see links
package installed. It's important to grab the better-coffeescript package as the regular CoffeeScript package is no longer maintained. There is also a
You must be registered for see links
Package those in that camp.The
You must be registered for see links
package extends the default Haml package to include nested languages such as JS, CSS, Sass, etc, so you can maintain both your highlighting and snippets. The
You must be registered for see links
and
You must be registered for see links
packages provide much needed highlighting to these newish markup languages.PACKAGES AND PLUGINS
Sublime owes much of its popularity to the endless supply of interesting and helpful packages that the community has created. If you are new to Sublime, you can add and manage your packages with
You must be registered for see links
.While we could sit around all day and talk about the best Sublime Packages, and I hope you do in the comments, these are a handful of must-have packages for a front end developer working with HTML, CSS and JavaScript.
COLOR HIGHLIGHTER
When working with colors in a stylesheet - it's helpful to have some sort of visual aid showing you the actual color. Color Highlighter will scan your stylesheet and color your color name, hex code or RGBA by filling in the background with that color. There are options to underline with the color or display it as a circle in the gutter.
Recently, support for Sass, LESS, and Stylus variables have been added, which makes this tool ready for almost any workflow!
Emmet
Almost everyone already knows about
You must be registered for see links
and many have been using it since the Zen Coding days. However, I've found many developers are missing out on some of the powerful features of Emmet.Html
Emmet is great for writing HTML very quickly. Simply type the CSS selector for the markup you wish to have and hit tab. Use Jade, Slim or Haml? Emmet works with those markup languages too!
This can be as simple or as complicated as you want. Here are a few examples — be sure to check out the
You must be registered for see links
for all the possible ways to use Emmet with HTML.· `element` + `tab` creates that element and puts your cursor inside:
· `span` + `tab` → <span></span>
· `p` + `tab` → <p></p>
· `element.className` or `element#ID` + `tab` creates that element with the associated class(es) or ID
· `span.hello` + `tab` → <span class="hello"></span>
· `p.odd.warning` + `tab` → <p class="odd warning"></p>
· `div#contact` + `tab` → <div id="contact"></div>
· `element>childElement` + `tab` creates nested elements
· `ul>li` + `tab` → <ul><li></li></ul>
· `p>span` + `tab` → <p><span></span></p>
· `[element*5]` + `tab` creates that element times the number
· `p.hello*2` + `tab` → <p class="hello"></p><p class="hello"></p>
You can also use the $ as a placeholder for the increment. Use $$ for a leading zero.
`li.item$*3` + `tab` →
CSS
Learning Emmet for CSS is one the the better investments an front end developer can make. Not only does it speed you up, but it cuts down on the silly mistakes we all make.
Emmet for CSS works by typing the approximate CSS property/value that you want. There are no snippets, Emmet works on something called fuzzy matching which takes a best guess based on what you have inputted.
· posrel → position: relative;
· posab → position: absolute;
· fl → float:
· fr → float: right;
· db → display: block;
· dib → display: inline-block;
· tdn → text-decoration: none;
· c → color: #
· w → width:
· w100 → width: 100px;
· w100p → width: 100%;
· p → padding:
· p10 → padding: 10px;
· p10p → padding: 10%;
· bt1-s-red → border-top: 1px solid red;
You get the point - it's worth taking the time to re-train your brain to use these fuzzy matches rather than typing the entire property and value out.
Sublime Linter
Linting your code is an important step in the process. If you have never used a linter before, it's a code quality tool that checks for errors and bad practices, alerting you when you make them.
With
You must be registered for see links
you can easily get real-time linting feedback for virtually any language. As front end developers, we should be linting our JavaScript and possibly our CSS. If you make a mistake, Sublime Linter will stick a flag in the gutter alerting you to the error.
THEMES AND COLOR SCHEMES
Still using the default Sublime theme and color scheme? It might be time to check out a few different ones. There are two parts to changing the color of Sublime — a color scheme changes the color of your code syntax highlighting while a theme changes the color of the editor chrome such as the tabs, sidebar and command palette.
As of the latest build of Sublime Text 3, we now have the ability to put specific icons in the sidebar.
Whether you like light or dark, there is bound to be a theme that you like. Here are a few popular ones:
Solarized Dark
You must be registered for see links
is a fantastic theme that offers a light counterpart as well. It's available in almost every editor and has become a beloved standard by many top developers.
Cobalt2
You must be registered for see links
is my own theme that has been a tweaked and refined over the last 5 years. It's based on the original Cobalt theme and has many improvements with an emphasis on being easy on the eyes with crisp and clear contrast.
Seti UI
A new theme on the scene,
You must be registered for see links
is a very dark theme that offers chunky blue pops of color throughout.
GoTo anything
If you are coming from another editor such as Coda, Textmate or Dreamweaver, you probably rely on the sidebar to navigate around your files. Sublime introduced the concept of GoTo anything. At its simplest you can use it to open any file in your open folder or project. Just hit ⌘ (Ctrl on Windows) + p and it will open a list where you can start to type the name of your file. This dropdown supports fuzzy matching so you don't have to worry about spelling it exactly right, or even specifying which folder it is in.
Once comfortable with that, GoTo anything support line numbers of files jquery.js:205, column numbers jquery.js:205:15 as well as something called symbols jquery.js@ajax which allow you to quickly jump to functions, methods or selectors.
