• Happy Independence Day to all our friends in America! 🗽We hope you have an amazing 4th of July, filled with family,… twitter.com/i/web/status/1…

COMPANY BLOG & NEWSROOM

19Mar

Improving Your JavaScript Code

better_js

What do all good developers have in common? Their code is simple and accurate, no matter what coding guidelines they use. But why are coding rules important? What’s the point in using them, if the project works in the end? Site visitors and app users won’t see any difference, but it will be much easier for the dev team to work with a code that was written based on standards. The code will be easy to understand and modify if you see familiar indents, line wraps, and spacing between phrases, etc.

Coding guidelines provide consistency so that the code looks like it was written by one person, even if a whole team made contributions. These guidelines speed up the development process and help you maintain and update the project in the long run.

Coding Done Right

There are no unified or default coding rules for JavaScript, but there are a lot of “standards” suggested by various talented guys, for example Douglas Crockford, jQuery, and Airbnb.

All these standards are based on developers’ experience and specific tasks they’ve worked on. Unfortunately, there is no universal solution. Sometimes you need a certain framework, or to bend some of the rules — that’s when custom coding standards step in.

Following the Rules

If you don’t want to write your coding rules from scratch, you can use existing style guidelines as a basis. In general, coding rules can be divided into two categories:

  • “grammar-related” (unused variables, potential misprints, problematic pieces of code, etc.)
  • “style-related” (correct indentation, statements correctly separated by spaces, no trailing whitespace in the end of lines, etc.)

The easiest thing to do is to use an existing solution that will help you validate your code. These tools are called code linters.

One of them is JSLint. It validates both categories of mistakes but provides very strict limitations. This lint is especially helpful for newbie JavaScript developers because it can help them avoid many pitfalls.

Despite the fact that JSLint can be configured, its limitations may seem too strict and sometimes inappropriate. This is the reason why some developers ignore lint warnings and why we now have JSHint. This fork supports a more flexible configuration and its main purpose is to warn of potentially problematic pieces of code.

Detecting Potential Problems

If you haven’t tried any tools yet, I would recommend starting with JSHint. This tool has been used for many well-known projects including jQuery, Twitter Bootstrap, and Angular.js.

Here’s what JSHint warnings look like:

JSHint

You can play around with JSHint online, change the code on the fly, and see the corresponding lint warnings.

JSHint is already integrated with various IDEs and available as a plugin for some code editors, such as SublimeText. All you need is to find an installation guide and add it to your favorite code editor.

Keeping Code Accuracy

There is another lint designed specifically to keep code accurate – JSCS. With this tool, you can check the visual part of the code: correct indentation, spaces, quotes, and brackets. JSCS can also be used with JSHint:

JSCS

The JSCS website also provides a live demo, where you can play with it and see what warnings this tool generates in its default configuration.

Summary

If you use JSHint together with JSCS, and if they both are integrated into your IDE or code editor correctly, they will help your team use unified coding styles, decrease development time, avoid pitfalls, and make your code neat and easy to read.

Both of these tools allow flexible configuration for warnings and styles for each piece of the source code. That is why these tools are so popular. Of course, lints cannot check the speed or performance of your final code. They can help you maintain consistency, which is very important, especially if your project is large and you plan to develop and maintain it in the long-term.

Sergey

About the Author: Sergey is a devoted and forward-thinking web developer. With over 6 years of experience and counting, he loves solving non-standard tasks and playing around with JavaScript techniques.

leave a comment

All posts Back to top