The Ultimate Guide to JavaScript Linters
Linting is the process of checking your code for potential bugs or styling issues. Since JavaScript isn't a compiled language, linters are highly recommended for their ability to raise warnings and enforce consistency. In this article, we introduce JavaScript linting. We'll define what linting is, how JavaScript linters work, and explore the best JS linting tools used today.
What is Linting?
Linting is the process of checking code for potential bugs or issues. Linters are used to ensure that a project adheres to coding standards specified by a user or organization. When you run your code through a linter, it throws warnings for things like unintended global variables, code style, and code consistency.
While linters have existed for years, they have become especially popular with dynamic languages like JavaScript. Unlike compiled languages like Java or C, JavaScript doesn't have the luxury of a compiler that catches bugs and throws warnings at compile time. This leaves JavaScript more vulnerable to runtime errors and styling inconsistencies. For these reasons, it is highly recommended that linters are used with JavaScript.
How JavaScript Linters Work
Linters work by parsing code and analyzing it for styling inconsistencies and potential bugs. Linters throw warnings based on a set of rules defining best practices or a particular coding style. Most popular JS linters have online versions where you can simply copy / paste your code to generate warnings. Alternatively, you can run JS files through linters via task runners like gulp, etc. Linter utilities can be installed with package managers like npm. Linters can also integrate with IDEs like Atom and WebStorm to dynamically throw warnings as code is produced. This achieves a similar effect to modern compilers that throw warnings and catch errors before and during compile time.
Linters typically require a certain configuration that specifies a set of rules to check for. Since things like tabs vs spaces and semicolons are largely a matter of personal preference, different presets and configurations are used based on a team's preferences. This helps developers conform to a specific style and ensures consistency for a team or organization. While most linters come with a predefined set of rules to check for, they are easily extensible and can be customized to fit a team’s preferences. Companies like AirBnB and Google also provide their own presets that can be used with popular linter tools like ESHint.
Best JavaScript Linters
The top JavaScript linters used today are listed below. They each have their pros and cons but ultimately serve the same purpose for ensuring code quality and consistency:
JSLint
JSLint is among the oldest JavaScript linters. It was created in 2002 and is known for being extremely strict in terms of getting your code to pass with zero warnings. JSLint is not configurable or extensible. The advantage of this is it comes ready to go. You don't have to worry about configuration to use JSLint. The downside is you are stuck with what you get. JSLint doesn't support ES6 or progressive languages like React and JSX.
JSHint
JSHint is a more configurable version of JSLint. In fact, JSHint is a fork of the original JSLint project. JSHint has the added advantage of configuration and extensibility. It has better documentation and supports ES6 but not React.
JSCS
JSCS is a bit different than JSHint in that it only catches issues related to formatting. Unlike JSHint, JSCS does not catch potential errors or bugs for things like unused variables or globals. JSCS does require a configuration file but comes with convenient presets. JSCS is great for coding style specifically.
ESLint
ESLint is the most recent and popular linter used today. It's easily extensible and has the best support for ES6. ESLint also supports JSX, making it very popular with the React community. ESLint is superior for its ability to detect problems and has more rules available than other linters. While it does require configuration, ESLint has many presets available that make getting started a breeze.
Conclusion
While ESLint is the most popular linter tool used today, wrappers and presets exist for JSHint and JSCS as well. While presets allows teams to quickly adopt JavaScript standards used by companies like AirBnB, linters like ESLint provide extensibility that allows teams to create custom rules and standards. Linters easily integrate with IDEs to add compiler-like benefits to dynamic languages like JavaScript. Using linters improves code quality by ensuring consistency and identifying potential bugs at development time.
