Editor’s note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be better coders.
Linting tools can significantly help developers to write good quality, optimized code. Linting is a code-checking process that looks for errors in the source code, and flags potential bugs. Most linters use the static code analysis technique, which means the code is checked without being actually executed.
You can lint on different occassions, such as in real time while you write the code, when you save the file, when you commit the changes, or before the code goes into production. Whatever your workflow is like, the important thing is to lint on a regular basis, as it can save you from many headaches in the future.
CSSLint allows you to choose what kind of errors and warnings (compatibility, performance, duplication, etc.) you want to test for, and validates your CSS syntax against the rules you opt for.
CSSLint is such an effective CSS linter that it’s hard to find a competitor that measures up to it. Probably that’s the reason why the SublimeLinter linting framework built its CSS linting plugin on top of it. SublimeLinter is a SublimeText plugin that provides users with a means to lint their code (CSS, PHP, Python, Java, Ruby, etc.) right inside the SublimeText editor.
Before you install the SublimeLinter CSSLint plugin itself, you need to install CSSLint as a Node.js module. The great thing about this handy tool is that you only have to configure the settings once, or if you’re happy with the defaults you don’t even have to do that, then you can always get the relevant warnings and notifications inside your SublimeText editor without any further hassle.
Although W3C’s CSS Validator is usually not thought of as a linting tool, it gives developers a great opportunity to check their CSS source code against W3C’s official standards. W3C built its validators with the intent to provide a tool that’s similar to the Lint program checker for the C language.
At first, they created the HTML markup validator that was later followed by the CSS validator. W3C’s CSS validator doesn’t have as many options as CSSLint, but it returns detailed, easy-to-understand error messages and notifications.
As an extra feature, you can also check your code against W3C’s recent mobile web standards, which is not a bad thing in the era of the mobile web.
When you hit the “Clean” button, it fixes syntax errors at once, tidies up the format, but leaves the warnings intact letting you solve them however you want. You can’t choose which rules you want to test for, but all three file types have a few settings that enable you to decide the format of the cleaned output.
JSLint has a few options you can choose from, but you can’t add your own custom rules, or disable most of the features. JSLint has already begun to include the latest ECMAScript 6 standards, you can check out the current stage of the ES6 implementation here.
JSHint is a community-driven project that started out with the endeavour to create a more configurable and less opinionated version of JSLint. JSHint allows developers to configure any of its linting options, and place the customized configuration into a separate file, an option that makes the tool easily reusable, and a good fit for bigger projects.
By specifying the parser options, you can also choose which standard of the JS language you want to support during the linting process, which means you not only can check your scripts against the default ECMAScript 5 syntax, but also against ECMAScript 6, ECMAScript 7, and JSX.
The goal of JSCS is to provide a means to programmatically enforce adherence to a certain coding style guide. Although JSCS doesn’t check bugs and errors, it’s still used by many major players in the tech industry, such as Google, AirBnB, and AngularJS, as it helps developers keep a highly readable, consistent code base.
JSCS is a real time-saver, as it automatically fixes your formatting errors, so you don’t have to go through them one by one. It has many different presets belonging to bigger projects, such as Google, Grunt, or Wikimedia coding style presets, that you can easily use in your own projects, but you can also create your own custom configuration.