<style> block is treated as JS #15

msokk · 2017-08-13T14:25:44Z

Hi,

After upgrading to eslint-plugin-vue v3 and finally figuring out to turn off eslint-plugin-html
, I got some max-lenerrors in style block - mostly background rules.

Is this expected that eslint-plugin-vue will lint CSS?

ESLint version: 4.4.1
eslint-plugin-vue: 3.11.0
vue-eslint-parser: 2.0.0-beta.6

The text was updated successfully, but these errors were encountered:

armano2 · 2017-08-13T14:31:23Z

@msokk eslint-plugin-vue for now is not linting css, can you provide code to reproduce?

and your .eslintrc file

armano2 · 2017-08-13T14:36:21Z

eslint-plugin-html is parsing vue files than you can still use it but you have to change
"html/html-extensions": [".html"] to not include vue files

vuejs/eslint-plugin-vue#91 (comment)

msokk · 2017-08-13T14:53:13Z

Here is the code:
https://gist.github.com/msokk/99238890e19bc0208c950cea9d9aa0d8

I'm using airbnb eslint config, that's allowed with this plugin?

armano2 · 2017-08-13T15:03:37Z

ok i se where is an issue, right now parser is parsing entire code from file.
if we have:

<template></template>
<style>
div {
    background: red;
}
</style>

There is no AST from style but Tokens are there:
https://gist.github.com/armano2/b6c13f9dd2bdebb74fccb6b06e74cfce

rules witch inerate over Tokens are going to validate css/html/js (only stylistic rules)
in your case its: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js#L151

'max-len': ['error', 100, 2, {
      ignoreUrls: true,
      ignoreComments: false,
      ignoreRegExpLiterals: true,
      ignoreStrings: true,
      ignoreTemplateLiterals: true,
}],

@mysticatea is this working as expected?

mysticatea · 2017-08-14T03:47:42Z

Thank you for this issue.

However, this is one of known limitations.
The rule checks source code texts instead of AST trees, so lines which are on outside of <script> causes max-len errors.

There is no workaround for now. I can refactor the rule as using AST instead of texts.

As a side note, this plugin uses a different mechanism to eslint-plugin-html.

eslint-plugin-html is using preprocessors. It transforms source codes before parsers and rules use the source codes. In eslint-plugin-html case, it extracts only inside of <script>, then parsers and rules use it.
eslint-plugin-vue does not use the preprocessor. This parser parses whole source code of .vue files and rules use the whole source code. If eslint-plugin-vue uses the preprocessors, it removes outside of <script>, this parser cannot generate AST of <template>, so eslint-plugin-vue cannot use the preprocessors.

msokk · 2017-08-14T07:11:38Z

Thanks for clarifying.
I only got max-len errors and most of the affected rules can be spread over multiple lines and with airbnb config long urls are ignored. So overall I easily fixed those few max-len ones.

mysticatea added the question label Aug 14, 2017

mysticatea closed this as completed Aug 14, 2017

msokk mentioned this issue Aug 15, 2017

Support specifying file extensions to lint AtomLinter/linter-eslint#966

Closed

haoqunjiang mentioned this issue Aug 27, 2018

Separate max-len eslint rule for Vue template tag vuejs/vue-cli#2367

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

<style> block is treated as JS #15

<style> block is treated as JS #15

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!