Sublime Text Plugins-web Fundamentals

The minute you start developing a site, the first tool you'll use is a text editor, whether it's as simple as Notepad or a Full blown IDE.

In this episode Addy & Matt Look at their collection of the plugins for Sublime Text and discuss how EAC H one helps with their workflow.

Package Control

To get the packages (or plugins) referenced in the episode, you need to the install package Control, it's nice and Si Mple to the install and you can find instructions on how

Jshint

Jshint is a JavaScript linter which examines your JavaScript and highlights any possible errors or bad practices In your code.

For Exmample, if you accidentally typed a variable name wrong, like below, then Jshint would point out that fo was never defined and are going to cause an error.

var foo = {bar: ' Hello, World '}; var msg = Fo.bar;

The jshint plugin points out issues the by displaying a yellow box around the relevant text and placing Your cursor in that bit of code would result in a error message being shown in the bottom left of Sublime.

Other issues it ' ll catch is:

• Variables which is defined but never used
• Avoiding creating functions inside of loops
• Using the right comparison methods

To install the sublimelinter-jshint . Need to also install the Sublimelinterpacka GE and follow the installation instructions on the sublimelinter-jshint package page.

Some developers may find it helpful to include the jshint gutter plugin as well. It places a small dot in the gutter of any line with a jshint issue.

Jscs

Jscs 'll highlight any places where your JavaScript isn ' t following a specific style.

For example, Jscs can is used to define whether spaces should is used after keywords, like ' if ', or defining whether curly Braces should is on the same line or new line of a method.

The Sublimelinter-jscs package Highlights all issues inline in a similar style to jshint making it easy To correct any problems.

This is extremely helpful if it comes to working in a team as everyone can follow the same styleguide and keep your code Consistent.

The best bit are, with the jscs-formatter package can automatically fix A Y issues on the page is pressing CTRL + SHIFT + P, typing ' jscs formatter:format this file ' and pressing ENTER. You Learn more in Addy ' s blog post.

Color Highlighter

Color highlighter 'll add a color to the background of any color definitions in your CSS or Sass.

You can define whether it shows as an underline with a full background when you hover over it or always displays color on The definition background. Just go to ' package Settings ' > ' Color highlighter ' > ' Settings-default ' to see the initial Settings and alter you R settings in ' Settings-user '.

For full background highlighting add the following to the ' Settings-user ' file:

{  "Ha_style": "Filled"}

Gutter Color

Gutter Color is a alternative to Color highlighter, instead of showing the color on top of the color variable, I T puts the color in the gutter of the.

Color Picker

If you ever need a quick and easy-to-select a color from your and the Color Picker package m Ay is for you.

Press CTRL + SHIFT + C and boom-you got yourself a color picker.

Autofilename

Autofilename is a simple little plugin which gives you a list of the possible files as you type. This is the super handy if you ' re trying to the type out of an image name or add a CSS or JS file as it saves your time and more Impor Tantly reduces the risk of typos.

Autoprefixer

We've all had that moment of realisation where we've forgotten to add a prefixed the CSS property. With autoprefixer Your simple run it on your CSS and it's ll add all the prefixes to you need.

It means we go from this.

. container-thingy {  Display:flex;  Flex-direction:column;  Align-items:flex-start;}

.. To the following, just by hitting Ctrl + SHIFT + P and typing ' autoprefix CSS ' and hitting enter.

. container-thingy {  display:-webkit-flex;  Display:-ms-flexbox;  Display:flex;  -webkit-flex-direction:column;      -ms-flex-direction:column;          Flex-direction:column;  -webkit-align-items:flex-start;      -ms-flex-align:start;          Align-items:flex-start;}

You can also define, what browsers and browser versions, you would like-to-support in the package settings. Checkout The Package Control page for more info.

More ...

There is a tonne of other plugins this exist for Sublime Text, so is sure to Explorepackage Control.

For more advice and tips, should checkout Wesbos ' s great slide deck on keyboard shortcuts and other plugins f or Sublime Text.

Wesbos have also written a book titled ' Sublime Text for the Power User ' which could be of interes T to your wonderful people as well:)

Sublime Text Plugins-web Fundamentals