SCSS prettifying does not seems to use the correct parser - Parsing error: Unexpected token

[jitendravyas]

I wanted to use it for scss only but getting these errors in almost all scss files. I'm using it with this config #28 (comment)

/Users/jitendravyas/app-v3/app/styles/components/_graph.scss
  1:1  error  Parsing error: Unexpected token

/Users/jitendravyas/app-v3/app/styles/components/_headings.scss
  2:1  error  Parsing error: Unexpected token

/Users/jitendravyas/app-v3/app/styles/components/_heatmap-thumbnail.scss
  6:1  error  Parsing error: Unexpected token

/Users/jitendravyas/app-v3/app/styles/components/_identifier-icons.scss
  11:1  error  Parsing error: Unexpected token

/Users/jitendravyas/app-v3/app/styles/components/_islands.scss
  4:1  error  Parsing error: Unexpected token

/Users/jitendravyas/app-v3/app/styles/components/_loaders.scss
  1:1  error  Parsing error: Unexpected token

[thomasbertet]

Hi there,

I'm having the same behavior.

I suspect the :

Prettier automatically infers the parser from the input file path, so you shouldn't have to change this setting

from prettier to not work properly as it seems the .scss files are parsed using babylon or equivalent.

Notice that I did not specify any parser in my `prettier rule in the eslint config file :

"prettier/prettier": ["error", {"trailingComma": "es5", "singleQuote": true, "tabWidth": 4}]

I'm using:

• eslint 4.0.0,
• prettier 1.4.4
• "eslint-plugin-prettier": "2.1.1",

@jitendravyas can you change the name of the issue with something saying SCSS prettifying does not seems to use the correct parser maybe ?

Oh and thanks all of you for this plugin by the way, I'm using it everyday with JS files and it works like a charm !

[not-an-aardvark]

Thanks for the report. However, I think this is out of scope for this plugin. If eslint-plugin-prettier supplied a parser to let ESLint parse non-javascript files, then all of the other enabled ESLint rules would also get run on the file. This would usually result in nonsense output, because the other ESLint rules are designed for javascript files.

I would recommend just using prettier directly to handle SCSS files -- it's not necessary to use this plugin for that because none of the other ESLint rules are relevant to CSS anyway.

[thomasbertet]

Of course that makes sense ! Thanks for the reply.

It was just easier for us to have only one tool (eslint) to do the job for both JS & SCSS files but I guess I was just lazy and hoped everything would work out of the box, just by adding the .scss suffix =)

Thanks again. I believe you can close this issue maybe ?

[jitendravyas]

I wanted to use Prettier via ESlint only so I can use eslint ignore file. prettier/prettier#1977

[lydell]

@jitendravyas For CSS/SCSS/Less you’re looking for stylelint-plugin-prettier. There’s just one little problem: It doesn’t exist yet!