Introduction to JavaScript Standard Style

Introduction to JavaScript Standard Style

Since the release of JSLint in 2002, there have been a series of “linting” or static code analysis tools that have emerged to better check for coding rules and syntax errors in JavaScript. The most recent and widespread of these is ESLint, providing extensive configuration far surpassing its predecessors. While ESLint is a powerful tool for developers, its setup requirements can be a nuisance, with a full configuration file spanning hundreds of lines of code. This post will take a look at standard, a JavaScript style guide, linter and formatter that aims to address previous issues of configuration, debates on proper style practices and more.

Why standard

With opinions on best practices in JavaScript varying widely, there are an abundance of style guides, Google and AirBnB each have their own, and many companies and individuals either adopt these guides or configure their own preferences. While the configuration powers of ESLint allow for the slightest tweaking of subjective choices, there is a cost to this fiddling with configuration, especially on teams where opinions may diverge significantly. standard proposes an (opinionated) set of rules for how JavaScript should be styled and formatted. While some of these rules are much open to debate, the adoption of JavaScript Standard Style by numerous leading companies, such as npm and GitHub suggest that convention over configuration may be a worthwhile compromise in this case.

If your seeking additional help with JavaScript or general web development services in Los Angeles? Reach out to Sunlight Media for full stack web design and custom app development.

Installing standard

Installing standard is fairly simple. To install it globally so it is accessible across your system, run the following command (requires Node and npm):

npm install standard –global

If you’d like to only install it on a per-project basis, you can do so by just adding it as a dev dependency within your project:

npm install standard –save-dev

Using standard

The easiest way to use standard is by using the CLI program to check all JavaScript files within a given directory for any errors. From the root of your project directory you can simply run standard:

If you’d like to use standard to check a specific file in isolation, you can just append the file path after the standard command:

standard index.js

To fix any errors caught by standard, you can either go into the file and manually fix them, or you can simply run standard —fix to fix all errors within the directory. Note that the standard —fix command will only work for syntactical errors or other mistakes where the fix is immediately apparent.

There are third-party plugins or features for standard available for the most popular text editors, such as Vim, VS Code, Atom and Sublime Text. These integrations will allow standard to run as an in-editor linter, providing error messages whenever a new error is detected:

Conclusion

Including a linter as part of your development environment is an invaluable tool to save time on checking your code for errors or formatting issues. For a tool that allows you to get right to work with worrying about configuration files, standard is a worthwhile addition to any JavaScript development project.

Leave a Reply