CODEWITHSUNDEEP
csssassstylelint
Shahriar
Shahriar

Reputation: 2390

How to allow // comments in scss within Stylelint (Unknown Word)

I'm new to Stylelint. I tried to understand docs and searched GitHub, but all explanations are full of double negatives and I'm confused!
The problem is that when I use // for comments, it throws Unknown word (CssSyntaxError)Stylelint(CssSyntaxError).

Examples:

How can I solve this issue, or perhaps disable Stylelint check on commented lines?

Upvotes: 9

Views: 14549

Answers (5)

Kerry Johnson
Kerry Johnson

Reputation: 1033

To save someone else some silly grief, I am using a monorepo like:

  • packages/
    • components/
      • **/*.scss
      • .stylelintrc.json
    • icons/
      • **/*.scss

My icon styles were throwing the Unknown word (CssSyntaxError)Stylelint(CssSyntaxError) error. You might've spot it already when laid out this way, but .stylelintrc.json wasn't applying to icons/ because .stylelintrc.json was NOT in icons/ or a common ancestor directory.

So, do as the other answers here suggested first, then move .stylelintrc.json to a common ancestor (or copy it to icons/):

  • packages/
    • components/
      • **/*.scss
    • icons/
      • **/*.scss
  • .stylelintrc.json

Upvotes: 0

Игорь Майоров
Игорь Майоров

Reputation: 1

"rules": {
    "comment-no-empty": true,
    "no-invalid-double-slash-comments": true
}

Upvotes: 0

26 Raka Yadav
26 Raka Yadav

Reputation: 21

yes when i am uninstall extenstion "stylelint-plus" so solve my problem Unknown word (CssSyntaxError)Stylelint(CssSyntaxError)

Upvotes: 2

Dheeraj TN
Dheeraj TN

Reputation: 41

I removed this extension called "stylelint-plus" from vs code and this solved my issue.

Upvotes: 4

jeddy3
jeddy3

Reputation: 3959

Stylelint is designed for CSS - the language has come a long way in the last few years and extensions like SCSS and Less are often not needed.

However, Stylelint can - through community custom syntaxes and plugins - be extended to support SCSS. The easiest way to do this is by extending the stylelint-config-standard-scss shared config. This config, created by the SCSS community, includes the postcss-scss syntax and stylelint-scss plugin - a collection of rules specific to SCSS - and configures Stylelint's built-in rules for SCSS.

You should first install the config as a dependency:

npm i --save-dev stylelint-config-standard-scss

And then set your configuration object (e.g. your .stylelintrc.json file) to:

{
  "extends": "stylelint-config-standard-scss"
}

The problem is that when I use // for comments, it throws Unknown word (CssSyntaxError)Stylelint(CssSyntaxError).

Double slash comments (//) are not standard CSS and can't be parsed by the CSS parser built into Stylelint, hence the syntax error. The SCSS parser included in the stylelint-config-standard-scss shared config can parser double slash comments correctly.

Upvotes: 9

Related Questions