{"id":11804,"date":"2017-08-24T15:38:16","date_gmt":"2017-08-24T15:38:16","guid":{"rendered":"http:\/\/coherent-labs.com\/?p=11804"},"modified":"2017-12-05T13:44:25","modified_gmt":"2017-12-05T13:44:25","slug":"stylelint-integrating-modern-css-linters","status":"publish","type":"post","link":"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/","title":{"rendered":"What is stylelint and how to integrate a modern CSS linter in your workflow?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Previously, we <\/span><a href=\"http:\/\/coherent-labs.com\/what-is-javascript-linting-and-how-it-improves-your-workflow\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">introduced you to linting<\/span><\/a><span style=\"font-weight: 400;\">, and showed you how to integrate JSHint into your workflow. In this tutorial, we want to assist CSS developers produce the best code possible by looking at how they can bring order to their stylesheets and integrate stylelint in their workflow. Below, you will find a detailed explanation about the benefits, installation, configuration, and usage of <\/span><b>stylelint<\/b><span style=\"font-weight: 400;\">. <\/span><!--more--><\/p>\n<h3>What is stylelint?<\/h3>\n<p><a href=\"https:\/\/github.com\/stylelint\/stylelint\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Stylelint <\/span><span style=\"font-weight: 400;\">i<\/span><\/a><span style=\"font-weight: 400;\">s a tool that reports bad code in your CSS files. It helps to enforce the consistent code and prevents you from making errors in your stylesheets. It is highly configurable. Therefore, you can track almost everything from unknown units to important declarations in keyframe rules. Last but not least, you can customize and extend everything by writing and publishing your own rules as plugins.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Installation<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The simplest way to run stylelint is through its CLI. This gives you the stylelint CLI command which performs the CSS linting. You can install it globally and use it from everywhere in the file system by running the following command:<\/span><\/p>\n<pre>npm install -g stylelint<\/pre>\n<p>&nbsp;<\/p>\n<p><b>Note: <\/b><span style=\"font-weight: 400;\">Stylelint is an <\/span><a href=\"https:\/\/www.npmjs.com\/package\/stylelint\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">npm package<\/span><span style=\"font-weight: 400;\">,<\/span><\/a><span style=\"font-weight: 400;\"> so Node.js is a prerequisite.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Configuration<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">First of all, you should create JSON file in the root directory of your project, named <\/span><b>.stylelintrc <\/b><span style=\"font-weight: 400;\">where you will store your stylelint configuration object.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You have two options to create your configuration object:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> by either design your own<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> or extend a <\/span><a href=\"https:\/\/www.npmjs.com\/browse\/keyword\/stylelint-config\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">shared config<\/span><\/a><span style=\"font-weight: 400;\"> (supported by stylelint).<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">There are also two strategies to craft your configuration:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">start with an empty object and progress by adding rules one by one as you need them<\/span><\/li>\n<li><span style=\"font-weight: 400;\">you can copy\/paste the <\/span><a href=\"https:\/\/stylelint.io\/user-guide\/example-config\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">example configuration <\/span><span style=\"font-weight: 400;\">w<\/span><\/a><span style=\"font-weight: 400;\">hich holds all possible rules and turn on each one&#8217;s options<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">To extend a shared config, developers recommend using either <\/span><a href=\"https:\/\/github.com\/stylelint\/stylelint-config-standard\"><span style=\"font-weight: 400;\">stylelint-config-standard <\/span><span style=\"font-weight: 400;\">o<\/span><\/a><span style=\"font-weight: 400;\">r <\/span><a href=\"https:\/\/github.com\/stylelint\/stylelint-config-recommended\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">stylelint-config- recommended<\/span><\/a><\/p>\n<p><strong>The configuration object<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s take a look at some of the properties in the configuration object:<\/span><\/p>\n<ol>\n<li>Rules<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">There are more than <\/span><a href=\"https:\/\/stylelint.io\/user-guide\/rules\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">a hundred pre-defined rules<\/span><span style=\"font-weight: 400;\">,<\/span><\/a><span style=\"font-weight: 400;\"> reporting warnings in case of violations. The rules property<\/span><\/p>\n<p><span style=\"font-weight: 400;\">is an object whose keys are rule names and whose values are rule configurations. Here is how a sample configuration might look like:<\/span><\/p>\n<pre class=\"lang:js decode:true\">{\r\n  \"rules\": {\r\n    \"block-no-empty\": true,\r\n    \"color-hex-case\": \"lower\",\r\n    \"comment-empty-line-before\": [\r\n      \"always\",\r\n      {\r\n        \"ignore\": [\r\n          \"stylelint-command\",\r\n          \"after-comment\"\r\n        ]\r\n      }\r\n    ],\r\n    \"declaration-colon-space-after\": \"always\",\r\n    \"indentation\": [\r\n      \"tab\",\r\n      {\r\n        \"except\": [\r\n          \"value\"\r\n        ]\r\n      }\r\n    ],\r\n    \"max-empty-lines\": 2,\r\n    \"rule-empty-line-before\": null,\r\n    \"unit-whitelist\": [\r\n      \"em\",\r\n      \"rem\",\r\n      \"%\",\r\n      \"s\"\r\n    ]\r\n  }\r\n}<\/pre>\n<p>Each rule configuration fits in one of the following formats:<\/p>\n<p><span style=\"font-weight: 400;\">a single value (the primary option) &#8211; will turn a rule on<\/span><\/p>\n<p><span style=\"font-weight: 400;\">an array with two values ([primary option, secondary options]) &#8211; provides further customization null &#8211; turns the rule off<\/span><\/p>\n<ol start=\"2\">\n<li>Extends<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">If you decide to use an existing config and then change some of the rules, you have to add <\/span><b>extends <\/b><span style=\"font-weight: 400;\">property in your configuration object. Its value can be an npm module name, an absolute path or a path relative to the invoking configuration file.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the following example, we extend <\/span><a href=\"https:\/\/github.com\/stylelint\/stylelint-config-standard\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">stylelint-config-standard <\/span><span style=\"font-weight: 400;\">a<\/span><\/a><span style=\"font-weight: 400;\">nd then change &#8220;indentation&#8221; to tab, add a new rule &#8220;block-no-empty&#8221; that disallows empty blocks and turn off the &#8220;max-empty-lines&#8221; rule:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"lang:default decode:true \">{\r\n  \"extends\": \"stylelint-config-standard\",\r\n  \"rules\": {\r\n    \"indentation\": \"tab\",\r\n    \"block-no-empty\": true,\r\n    \"max-empty-lines\": null\r\n  }\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">You can extend more than one existing configuration:<\/span><\/p>\n<pre class=\"lang:default decode:true \">{\r\n  \"extends\": [\r\n    \"stylelint-config-standard\",\r\n    \".\\\/myExtendableConfig\"\r\n  ],\r\n  \"rules\": {\r\n    \"indentation\": \"tab\",\r\n    \"number-leading-zero\": null\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><b>Note: <\/b><span style=\"font-weight: 400;\">Each item in the array takes precedence over all the previous items.<\/span><\/p>\n<ol start=\"3\">\n<li>Plugins<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">To use a plugin, you have to add a &#8220;plugins&#8221; property with a npm module name value, an absolute path, or a path relative to the invoking configuration file.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once the plugin is declared, within your &#8220;rules&#8221; object, you&#8217;ll need to add options for the rule.<\/span><\/p>\n<pre class=\"lang:default decode:true \">{\r\n  \"plugins\": [\r\n    \"..\\\/stylelint-images.js\"\r\n  ],\r\n  \"rules\": {\r\n    \"images\\\/broken\": true\r\n  }\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">A plugin can also provide a set of rules, just add the rules you want to invoke. For example:<\/span><\/p>\n<pre class=\"lang:default decode:true\">{\r\n  \"plugins\": [\r\n    \"..\\\/stylelint-images.js\"\r\n  ],\r\n  \"rules\": {\r\n    \"images\\\/broken\": true,\r\n    \"images\\\/prefer-data-uri\": 256,\r\n...\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">The complete list of plugins, including their documentation can be found <\/span><a href=\"https:\/\/stylelint.io\/user-guide\/plugins\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">here<\/span><span style=\"font-weight: 400;\">.<\/span><\/a><span style=\"font-weight: 400;\"> If you want to write your own<\/span><\/p>\n<p><span style=\"font-weight: 400;\">plugin get familiar with stylelint&#8217;s <\/span><a href=\"https:\/\/stylelint.io\/developer-guide\/plugins\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">conventions for writing plugins<\/span><span style=\"font-weight: 400;\">.<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Other properties of the configuration object are <\/span><b>processors<\/b><span style=\"font-weight: 400;\">, <\/span><b>ignoreFiles, <\/b><span style=\"font-weight: 400;\">and <\/span><b>defaultSeverity<\/b><span style=\"font-weight: 400;\">; you can learn more about them from the <\/span><a href=\"https:\/\/stylelint.io\/user-guide\/configuration\/#configuration\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Stylelint Configuration<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/a><\/p>\n<h3><span style=\"font-weight: 400;\">Usage<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Stylelint will look for your <\/span><b>.stylelintrc <\/b><span style=\"font-weight: 400;\">recursively till the root of your file system. Make sure you include the quotation marks around file globs so that you can use the advantages of node-glob regardless of your shell. Now you can start linting with the following commands:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">linting all .css files in <\/span><b>styles <\/b><span style=\"font-weight: 400;\">current directory:<\/span><\/li>\n<\/ul>\n<pre>stylelint \"styles\/*.css\"<\/pre>\n<ul>\n<li><span style=\"font-weight: 400;\">linting all .css files in <\/span><b>foo <\/b><span style=\"font-weight: 400;\">current directory and any of its subdirectories:<\/span><\/li>\n<\/ul>\n<pre>stylelint \"foo\/**\/*.css\"<\/pre>\n<ul>\n<li><span style=\"font-weight: 400;\">linting all .css files in the whole directory:<\/span><\/li>\n<\/ul>\n<pre>stylelint \"**\/*.css\"<\/pre>\n<h3><span style=\"font-weight: 400;\">Example output:<\/span><\/h3>\n<h3><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11815 size-full\" src=\"http:\/\/coherent-labs.com\/wp-content\/uploads\/2017\/08\/^72C192E5D84EFA352CF733475794F802E98A3EC4B227BC31C1^pimgpsh_fullsize_distr.png\" alt=\"stylelint\" width=\"605\" height=\"49\" srcset=\"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2017\/08\/^72C192E5D84EFA352CF733475794F802E98A3EC4B227BC31C1^pimgpsh_fullsize_distr.png 605w, https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2017\/08\/^72C192E5D84EFA352CF733475794F802E98A3EC4B227BC31C1^pimgpsh_fullsize_distr-300x24.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/span><\/h3>\n<h3><span style=\"font-weight: 400;\">Additional resources:<\/span><\/h3>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2016\/05\/stylelint-the-style-sheet-linter-weve-always-wanted\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Stylelint: The Style Sheet Linter We\u2019ve Always Wanted<\/span><\/a><\/p>\n<p><a href=\"https:\/\/css-tricks.com\/stylelint\/\"><span style=\"font-weight: 400;\">Lint your CSS with stylelint<\/span><\/a><a href=\"https:\/\/medium.com\/@bjankord\/how-to-lint-scss-with-stylelint-dc87809a9878\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\"> How to lint SCSS with stylelint<\/span><\/a><a href=\"https:\/\/stylelint.io\/user-guide\/cli\/\"><span style=\"font-weight: 400;\"> The stylelint CLI<\/span><\/a><\/p>\n<p><a href=\"https:\/\/stylelint.io\/user-guide\/configuration\/#configuration\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Stylelint Configuration<\/span><\/a><\/p>\n<p><i><span style=\"font-weight: 400;\">If you have any questions about how to integrate stylelint in your workflow, write a comment below or start a discussion in our <\/span><\/i><a href=\"https:\/\/forums.coherent-labs.com\/index.php?board=14.0\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">Forum<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">.<\/span><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Previously, we introduced you to linting, and showed you how to integrate JSHint into your workflow. In this tutorial, we want to assist CSS developers produce the best code possible by looking at how they can bring order to their stylesheets and integrate stylelint in their workflow. Below, you will find a detailed explanation about [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":11812,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[410],"tags":[280,163,199,281,279,278,282,262,263,335,269],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is stylelint and how to integrate a modern CSS linter in your workflow<\/title>\n<meta name=\"description\" content=\"In this tutorial, we want to help CSS developers bring order to their stylesheets, integrate stylelint and integrate modern CCS linters.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is stylelint and how to integrate a modern CSS linter in your workflow\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we want to help CSS developers bring order to their stylesheets, integrate stylelint and integrate modern CCS linters.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/\" \/>\n<meta property=\"og:site_name\" content=\"Coherent Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CoherentLabs\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-24T15:38:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-05T13:44:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2017\/08\/stylelintbanner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"748\" \/>\n\t<meta property=\"og:image:height\" content=\"215\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alexandra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CoherentLabs\" \/>\n<meta name=\"twitter:site\" content=\"@CoherentLabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexandra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/\",\"url\":\"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/\",\"name\":\"What is stylelint and how to integrate a modern CSS linter in your workflow\",\"isPartOf\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\"},\"datePublished\":\"2017-08-24T15:38:16+00:00\",\"dateModified\":\"2017-12-05T13:44:25+00:00\",\"author\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791\"},\"description\":\"In this tutorial, we want to help CSS developers bring order to their stylesheets, integrate stylelint and integrate modern CCS linters.\",\"breadcrumb\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/coherent-labs.com\/posts\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is stylelint and how to integrate a modern CSS linter in your workflow?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\",\"url\":\"https:\/\/coherent-labs.com\/posts\/\",\"name\":\"Coherent Labs\",\"description\":\"Cross-Platform Game UI Middleware\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/coherent-labs.com\/posts\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791\",\"name\":\"Alexandra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g\",\"caption\":\"Alexandra\"},\"url\":\"https:\/\/coherent-labs.com\/posts\/author\/alexandra\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is stylelint and how to integrate a modern CSS linter in your workflow","description":"In this tutorial, we want to help CSS developers bring order to their stylesheets, integrate stylelint and integrate modern CCS linters.","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:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/","og_locale":"en_US","og_type":"article","og_title":"What is stylelint and how to integrate a modern CSS linter in your workflow","og_description":"In this tutorial, we want to help CSS developers bring order to their stylesheets, integrate stylelint and integrate modern CCS linters.","og_url":"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/","og_site_name":"Coherent Labs","article_publisher":"https:\/\/www.facebook.com\/CoherentLabs\/","article_published_time":"2017-08-24T15:38:16+00:00","article_modified_time":"2017-12-05T13:44:25+00:00","og_image":[{"width":"748","height":"215","url":"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2017\/08\/stylelintbanner.png","type":"image\/png"}],"author":"Alexandra","twitter_card":"summary_large_image","twitter_creator":"@CoherentLabs","twitter_site":"@CoherentLabs","twitter_misc":{"Written by":"Alexandra","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/","url":"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/","name":"What is stylelint and how to integrate a modern CSS linter in your workflow","isPartOf":{"@id":"https:\/\/coherent-labs.com\/posts\/#website"},"datePublished":"2017-08-24T15:38:16+00:00","dateModified":"2017-12-05T13:44:25+00:00","author":{"@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791"},"description":"In this tutorial, we want to help CSS developers bring order to their stylesheets, integrate stylelint and integrate modern CCS linters.","breadcrumb":{"@id":"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/coherent-labs.com\/posts\/stylelint-integrating-modern-css-linters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/coherent-labs.com\/posts\/"},{"@type":"ListItem","position":2,"name":"What is stylelint and how to integrate a modern CSS linter in your workflow?"}]},{"@type":"WebSite","@id":"https:\/\/coherent-labs.com\/posts\/#website","url":"https:\/\/coherent-labs.com\/posts\/","name":"Coherent Labs","description":"Cross-Platform Game UI Middleware","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/coherent-labs.com\/posts\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791","name":"Alexandra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g","caption":"Alexandra"},"url":"https:\/\/coherent-labs.com\/posts\/author\/alexandra\/"}]}},"_links":{"self":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/11804"}],"collection":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/comments?post=11804"}],"version-history":[{"count":12,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/11804\/revisions"}],"predecessor-version":[{"id":13857,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/11804\/revisions\/13857"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media\/11812"}],"wp:attachment":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media?parent=11804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/categories?post=11804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/tags?post=11804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}