{"id":26346,"date":"2016-04-15T23:01:07","date_gmt":"2016-04-15T15:01:07","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26346"},"modified":"2022-03-09T00:20:51","modified_gmt":"2022-03-08T16:20:51","slug":"code-optimization-css-js-linting-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/","title":{"rendered":"10 CSS and JavaScript Linting Tools for Code Optimization"},"content":{"rendered":"<p class=\"note\"><strong>Editor\u2019s note: <\/strong>This article is part of our <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/code-optimization-series\/\" rel=\"noopener noreferrer\">Code Optimization series<\/a>, where we take a look at how to optimize coding for better efficiency in a bid to be better coders.<\/p>\n<p><a href=\"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/\">Linting tools<\/a> can significantly help developers to <strong>write good quality, optimized code<\/strong>. Linting is a code-checking process that looks for errors in the source code, and flags potential bugs. Most linters use the <a href=\"https:\/\/www.techtarget.com\/whatis\/definition\/static-analysis-static-code-analysis\" target=\"_blank\" rel=\"noopener noreferrer\">static code analysis<\/a> technique, which means <strong>the code is checked without being actually executed<\/strong>.<\/p>\n<p>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 <strong>lint on a regular basis<\/strong>, as it can save you from many headaches in the future.<\/p>\n<p>Linters are not solely bug prevention tools, but they can also be effectively used during debugging <strong>to find errors that are hard to catch<\/strong> otherwise. In this post we will check out 10 powerful linting tools you can use to lint your CSS and JavaScript files in order to improve the quality of your code.<\/p>\n<p class=\"note\"><strong>Read more: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/identify-code-errors-sublime-linter\/\">Identify Code Error In Sublime Text With Sublime Linter<\/a><\/p>\n<h2>1. <a href=\"http:\/\/csslint.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSSLint<\/a><\/h2>\n<p><a href=\"http:\/\/csslint.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSSLint<\/a> admittedly intends to \"hurt your feelings\", but in exchange it \"makes you code much better\". CSSLint currently leads the market of CSS linting. It\u2019s written in JavaScript, it\u2019s open-source, and comes with tons of configurable options.<\/p>\n<p>CSSLint allows you to <strong>choose what kind of errors and warnings<\/strong> (compatibility, performance, duplication, etc.) <strong>you want to test for<\/strong>, and <strong>validates your CSS syntax against the rules you opt for.<\/strong><\/p>\n<p>It doesn\u2019t only work in the browser, but also has a <a href=\"https:\/\/github.com\/CSSLint\/csslint\/wiki\/Command-line-interface\" target=\"_blank\" rel=\"noopener noreferrer\">command line interface<\/a>, and you can <a href=\"https:\/\/github.com\/CSSLint\/csslint\/wiki\/Build-System-Integration\" target=\"_blank\" rel=\"noopener noreferrer\">integrate it into your own build system<\/a> as well.<\/p>\n<figure><a href=\"http:\/\/csslint.net\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/csslint.jpg\" alt=\"CSSLint\" width=\"700\" height=\"422\"><\/a><\/figure>\n<h2>2. <a href=\"https:\/\/github.com\/SublimeLinter\/SublimeLinter-csslint\" target=\"_blank\" rel=\"noopener noreferrer\">SublimeLinter CSSLint<\/a><\/h2>\n<p>CSSLint is such an effective CSS linter that it\u2019s hard to find a competitor that measures up to it. Probably that\u2019s the reason why the <a href=\"https:\/\/www.sublimelinter.com\/en\/latest\/\" target=\"_blank\" rel=\"noopener noreferrer\">SublimeLinter<\/a> linting framework built its <a href=\"https:\/\/github.com\/SublimeLinter\/SublimeLinter-csslint\" target=\"_blank\" rel=\"noopener noreferrer\">CSS linting plugin<\/a> on top of it. <a href=\"https:\/\/github.com\/SublimeLinter\" target=\"_blank\" rel=\"noopener noreferrer\">SublimeLinter<\/a> is a SublimeText plugin that <strong>provides users with a means to lint their code (CSS, PHP, Python, Java, Ruby, etc.) right inside the SublimeText edito<\/strong>r.<\/p>\n<p>Before you <a href=\"https:\/\/github.com\/SublimeLinter\/SublimeLinter-csslint#plugin-installation\" target=\"_blank\" rel=\"noopener noreferrer\">install the SublimeLinter CSSLint plugin<\/a> itself, you need to <a href=\"https:\/\/github.com\/SublimeLinter\/SublimeLinter-csslint#linter-installation\" target=\"_blank\" rel=\"noopener noreferrer\">install CSSLint<\/a> as a Node.js module. The great thing about this handy tool is that you <strong>only have to configure the settings once<\/strong>, or if you\u2019re happy with the defaults you don\u2019t even have to do that, then you can always get the relevant warnings and notifications inside your SublimeText editor without any further hassle.<\/p>\n<figure><a href=\"https:\/\/www.sublimelinter.com\/en\/latest\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/sublimelinter.jpg\" alt=\"SublimeLinter\" width=\"700\" height=\"308\"><\/a><\/figure>\n<h2>3. <a href=\"https:\/\/stylelint.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">StyleLint<\/a><\/h2>\n<p><a href=\"https:\/\/stylelint.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">StyleLint<\/a> helps developers avoid errors in CSS, SCSS, or any other <a href=\"https:\/\/github.com\/postcss\/postcss#syntaxes\" target=\"_blank\" rel=\"noopener noreferrer\">syntaxes that PostCSS can parse<\/a>. StyleLint tests for over a hundred <a href=\"https:\/\/stylelint.io\/user-guide\/rules\/\" target=\"_blank\" rel=\"noopener noreferrer\">rules<\/a>, and you can <strong>choose which ones you want to switch on<\/strong> (see an <a href=\"https:\/\/stylelint.io\/user-guide\/example-config\/\" target=\"_blank\" rel=\"noopener noreferrer\">example config<\/a>).<\/p>\n<p>If you don\u2019t want to build your own configuration, you can also opt for a <a href=\"https:\/\/github.com\/stylelint\/stylelint-config-standard\" target=\"_blank\" rel=\"noopener noreferrer\">pre-written, standard config<\/a> that contains about 60 StyleLint rules. StyleLint is a quite flexible tool, it can be extended by <a href=\"https:\/\/stylelint.io\/user-guide\/plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">extra plugins<\/a>, and used in 3 different forms: as a <a href=\"https:\/\/stylelint.io\/user-guide\/cli\/\" target=\"_blank\" rel=\"noopener noreferrer\">command line tool<\/a>, as a <a href=\"https:\/\/stylelint.io\/user-guide\/node-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js module<\/a>, or as a <a href=\"https:\/\/stylelint.io\/user-guide\/postcss-plugin\/\" target=\"_blank\" rel=\"noopener noreferrer\">PostCSS plugin<\/a>.<\/p>\n<figure><a href=\"https:\/\/stylelint.io\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/stylelint.jpg\" alt=\"StyleLint\" width=\"700\" height=\"440\"><\/a><\/figure>\n<h2>4. <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C CSS Validator<\/a><\/h2>\n<p>Although W3C\u2019s <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Validator<\/a> is usually not thought of as a linting tool, it gives developers a great opportunity to check their CSS source code against W3C\u2019s official standards. W3C built its validators <a href=\"https:\/\/validator.w3.org\/docs\/help.html#what-is-it\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">with the intent<\/a> to provide a tool that\u2019s similar to the <a href=\"https:\/\/www.unix.com\/man-page\/FreeBSD\/1\/lint\" target=\"_blank\" rel=\"noopener noreferrer\">Lint<\/a> program checker for the C language.<\/p>\n<p>At first, they created the HTML markup validator that was later followed by the CSS validator. W3C\u2019s CSS validator doesn\u2019t have as many options as CSSLint, but it <strong>returns detailed, easy-to-understand error messages and notifications<\/strong>.<\/p>\n<p>As an extra feature, you can also check your code against W3C\u2019s recent <a href=\"https:\/\/www.w3.org\/Mobile\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">mobile web standards<\/a>, which is not a bad thing in the era of the mobile web.<\/p>\n<figure><a href=\"https:\/\/jigsaw.w3.org\/css-validator\/validator.html.en\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/w3c.jpg\" alt=\"W3C CSS Validator\" width=\"700\" height=\"400\"><\/a><\/figure>\n<h2>5. <a href=\"http:\/\/www.dirtymarkup.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dirty Markup<\/a><\/h2>\n<p><a href=\"http:\/\/www.dirtymarkup.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dirty Markup<\/a> cleans, formats, and validates your HTML, CSS, and JavaScript code. It can be a great choice if you like straightforward design and want a quick solution. Dirty Markup <strong>throws error messages and notifications in real time<\/strong> while you <strong>write or modify your code inside the editor<\/strong>.<\/p>\n<p>When you hit the \u201cClean\u201d button, it <strong>fixes syntax errors at once, tidies up the format, but leaves the warnings intact<\/strong> letting you solve them however you want. You can\u2019t choose which rules you want to test for, but all three file types <strong>have a few settings that enable you to decide the format<\/strong> of the cleaned output.<\/p>\n<figure><a href=\"http:\/\/www.dirtymarkup.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/dirty-markup.jpg\" alt=\"Dirty Markup\" width=\"700\" height=\"354\"><\/a><\/figure>\n<h2>6. <a href=\"https:\/\/www.jslint.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLint<\/a><\/h2>\n<p><a href=\"https:\/\/www.jslint.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSLint<\/a> was first released in 2002 by <a href=\"https:\/\/en.wikipedia.org\/wiki\/Douglas_Crockford\" target=\"_blank\" rel=\"noopener noreferrer\">Douglas Crockford<\/a>, and haven\u2019t lost momentum since then, so you can safely assume that it\u2019s a stabile and reliable JavaScript linting tool.<\/p>\n<p>JSLint can process JavaScript source code and JSON text, and it comes with a <strong>ready-made configuration that follows the JS best practices<\/strong> Crockford wrote about in his book entitled <a href=\"https:\/\/www.amazon.com\/\/exec\/obidos\/ASIN\/0596517742\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript: The Good Parts<\/a>.<\/p>\n<p>JSLint has a few options you can choose from, but you <strong>can\u2019t add your own custom rules, or disable most of the features<\/strong>. JSLint has already begun to include the latest <a href=\"https:\/\/www.hongkiat.com\/blog\/ecmascript-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 6 standards<\/a>, you can check out the current stage of the ES6 implementation <a href=\"https:\/\/www.jslint.com\/help.html#es6\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<figure><a href=\"https:\/\/www.jslint.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/jslint.jpg\" alt=\"JSLint\" width=\"700\" height=\"483\"><\/a><\/figure>\n<h2>7. <a href=\"https:\/\/jshint.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSHint<\/a><\/h2>\n<p><a href=\"https:\/\/jshint.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSHint<\/a> is a highly popular fork of JSLint, and it\u2019s used by <a href=\"https:\/\/github.com\/jshint\/jshint#who-uses-jshint\" target=\"_blank\" rel=\"noopener noreferrer\">major tech companies<\/a> like Facebook, Twitter, and Medium<\/p>\n<p>JSHint is a community-driven project that started out with the <a href=\"https:\/\/badassjs.com\/post\/3364925033\/jshint-an-community-driven-fork-of-jslint\" target=\"_blank\" rel=\"noopener noreferrer\">endeavour<\/a> to <strong>create a more configurable and less opinionated version of JSLint<\/strong>. JSHint allows developers to <a href=\"https:\/\/jshint.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">configure<\/a> any of its <a href=\"https:\/\/jshint.com\/docs\/options\/\" target=\"_blank\" rel=\"noopener noreferrer\">linting options<\/a>, and place the customized configuration into a separate file, an option that makes the tool easily reusable, and a good fit for bigger projects.<\/p>\n<p>You not only can use JSHint to lint vanilla JavaScript, it also has out-of-the-box <a href=\"https:\/\/jshint.com\/docs\/options\/#environments\" target=\"_blank\" rel=\"noopener noreferrer\">support for many popular JS libraries<\/a>, such as jQuery, Mootools, Mocha, and Node.js.<\/p>\n<figure><a href=\"https:\/\/jshint.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/jshint.jpg\" alt=\"JSHint\" width=\"700\" height=\"294\"><\/a><\/figure>\n<h2>8. <a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint<\/a><\/h2>\n<p><a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint<\/a> is the latest big thing on the JavaScript linting landscape. Its popularity stems from its highly flexible nature. You not only can customize tons of its sophisticated <a href=\"https:\/\/eslint.org\/docs\/rules\/\" target=\"_blank\" rel=\"noopener noreferrer\">linting rules<\/a>, and integrate it with <a href=\"https:\/\/eslint.org\/docs\/user-guide\/integrations\" target=\"_blank\" rel=\"noopener noreferrer\">all major code editors<\/a>, but you can also easily <strong>extend its functionalities<\/strong> by adding different <a href=\"https:\/\/eslint.org\/docs\/developer-guide\/working-with-plugins\" target=\"_blank\" rel=\"noopener noreferrer\">plugins<\/a> to it.<\/p>\n<p>By specifying the <a href=\"https:\/\/eslint.org\/docs\/user-guide\/configuring#specifying-parser-options\" target=\"_blank\" rel=\"noopener noreferrer\">parser options<\/a>, you can also <strong>choose which standard of the JS language you want to support<\/strong> 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 <a href=\"https:\/\/jsx.github.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSX<\/a>.<\/p>\n<figure><a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/eslint.jpg\" alt=\"ESLint\" width=\"700\" height=\"398\"><\/a><\/figure>\n<h2>9. <a href=\"http:\/\/jscs.info\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSCS<\/a><\/h2>\n<p><a href=\"http:\/\/jscs.info\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSCS<\/a>, or JavaScript Code Style is a pluggable code style linter for JavaScript, that checks for code formatting rules.<\/p>\n<p>The goal of JSCS is to provide a means to <strong>programmatically enforce adherence to a certain coding style guide<\/strong>. Although JSCS doesn\u2019t check bugs and errors, it\u2019s 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.<\/p>\n<p>JSCS is a real time-saver, as it automatically fixes your formatting errors, so you don\u2019t have to go through them one by one. It has many <a href=\"http:\/\/jscs.info\/overview\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">different presets<\/a> belonging to bigger projects, such as Google, Grunt, or Wikimedia coding style presets, that you can easily use in your own projects, but <strong>you can also create your own custom configuration<\/strong>.<\/p>\n<figure><a href=\"http:\/\/jscs.info\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/jscs.jpg\" alt=\"JSCS\" width=\"700\" height=\"490\"><\/a><\/figure>\n<h2>10. <a href=\"https:\/\/standardjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">StandardJS<\/a><\/h2>\n<p><a href=\"https:\/\/standardjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">StandardJS<\/a>, or JavaScript Standard Style is a code style linter just like JSCS, but differs from it in its simplicity and straightforwardness. StandardJS can be an excellent choice, <strong>if you don\u2019t want to spend time with configuration<\/strong>, just want an effective tool that runs out of the box.<\/p>\n<p>StandardJS follows a handful of pre-written <a href=\"https:\/\/standardjs.com\/#rules\" target=\"_blank\" rel=\"noopener noreferrer\">formatting rules<\/a>, and its core value is to keep your coding workflow distraction-free, so you <a href=\"https:\/\/standardjs.com\/#i-disagree-with-rule-x-can-you-change-it\" target=\"_target\" rel=\"noopener noreferrer\">can\u2019t change the rules you disagree with<\/a>. Only choose StandardJS if you don\u2019t want to have a custom config, and just want to <strong>enforce a consistent code style across your JavaScript files<\/strong>.<\/p>\n<figure><a href=\"https:\/\/standardjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/standardjs.jpg\" alt=\"StandardJS\" width=\"700\" height=\"488\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Editor\u2019s 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&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,3393],"tags":[3427,507,2902,4117,3761],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 CSS and JavaScript Linting Tools for Code Optimization - Hongkiat<\/title>\n<meta name=\"description\" content=\"Editor&#039;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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 CSS and JavaScript Linting Tools for Code Optimization\" \/>\n<meta property=\"og:description\" content=\"Editor&#039;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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-15T15:01:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-08T16:20:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/csslint.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"10 CSS and JavaScript Linting Tools for Code Optimization\",\"datePublished\":\"2016-04-15T15:01:07+00:00\",\"dateModified\":\"2022-03-08T16:20:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/\"},\"wordCount\":1312,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimization-css-js-linting-tools\\\/csslint.jpg\",\"keywords\":[\"Code Optimization\",\"CSS\",\"CSS Tools\",\"Javascripts\",\"Series: Code Optimization\"],\"articleSection\":[\"Coding\",\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/\",\"name\":\"10 CSS and JavaScript Linting Tools for Code Optimization - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimization-css-js-linting-tools\\\/csslint.jpg\",\"datePublished\":\"2016-04-15T15:01:07+00:00\",\"dateModified\":\"2022-03-08T16:20:51+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimization-css-js-linting-tools\\\/csslint.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimization-css-js-linting-tools\\\/csslint.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimization-css-js-linting-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 CSS and JavaScript Linting Tools for Code Optimization\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 CSS and JavaScript Linting Tools for Code Optimization - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/","og_locale":"en_US","og_type":"article","og_title":"10 CSS and JavaScript Linting Tools for Code Optimization","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-04-15T15:01:07+00:00","article_modified_time":"2022-03-08T16:20:51+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/csslint.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"10 CSS and JavaScript Linting Tools for Code Optimization","datePublished":"2016-04-15T15:01:07+00:00","dateModified":"2022-03-08T16:20:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/"},"wordCount":1312,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/csslint.jpg","keywords":["Code Optimization","CSS","CSS Tools","Javascripts","Series: Code Optimization"],"articleSection":["Coding","Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/","name":"10 CSS and JavaScript Linting Tools for Code Optimization - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/csslint.jpg","datePublished":"2016-04-15T15:01:07+00:00","dateModified":"2022-03-08T16:20:51+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/csslint.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimization-css-js-linting-tools\/csslint.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimization-css-js-linting-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 CSS and JavaScript Linting Tools for Code Optimization"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6QW","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26346"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26346\/revisions"}],"predecessor-version":[{"id":59089,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26346\/revisions\/59089"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26346"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}