How to check .vue files?

[scriptPilot]

Hello everybody! Is there any way, to check .vue files?

Only the script path should be checked.

After load these files with Vue Webpack loader, the source code isn't standard anymore, so must be checked before.

Documentation: Vue Single File Components

Example code:

<template>
  <p>Some HTML Code</p>
</template>

<script>
  module.exports = {}
</script>

[feross]

This is a tricky one. I think the easiest way to support this is for you (or someone else) to write a tool that extracts the <script> portion of the .vue file and run standard on it.

@zeke did something similar with standard-markdown, which lints the JS in your markdown files (like README.md, etc.).

This definitely doesn't belong in the main standard tool because then we'd have to also add support for hundreds of other similar JS libraries. Hope that makes sense.

[zeke]

After I wrote standard-markdown I realized it could also be really useful for linting inline scripts. I don't have an immediate need for that, but the standard-markdown module could be easily modfied (or forked) to support it. Here's an issue for tracking: zeke/standard-markdown#11

[exah]

Since .vue files is valid html, you can check them with eslint-plugin-html, like so:

$ standard --plugin html '**/*.{js,vue}'

[scriptPilot]

@exah - Thank you for that hint - how could I integrate it in Webpack 1 configuration?

[feross]

@exah Wow, that is extremely elegant.

Looks like eslint-plugin-markdown also exists, as a generic solution to the linting markdown code blocks problem, though it doesn't filter out all the same rules as standard-markdown which makes it harder to work with.

$ standard --plugin markdown '**/*.md'

[feross]

I just sent a PR to include a section in the readme about these plugins. #753

[zeke]

that is extremely elegant

Indeed! Good to know it's going in the readme.

it doesn't filter out all the same rules as standard-markdown

Yeah.. after using it with vanilla standard for a few days, it became clear that a few of the rules were too restrictive for code samples, so we added a few exceptions: zeke/standard-markdown#2

[feross]

Yeah, I mention standard-markdown first for that reason ;-)

[scriptPilot]

@exah - Okay, solved it with npm run ... - fine now :-)

[ArmorDarks]

Does eslint-plugin-html work for anyone with Standard?

On Windows machine

standard --plugin html "**/*.{js,vue}"

throws

standard: Unexpected linter output:

Error: eslint-plugin-html error: It seems that eslint is not loaded. If you think it is a bug, please file a report at https://github.com/BenoitZugmeyer/eslint-plugin-html/issues
    at iterateESLintModules (J:\Work\Greencard\green-card-app\node_modules\eslint-plugin-html\src\index.js:65:11)
    at Object.<anonymous> (J:\Work\Greencard\green-card-app\node_modules\eslint-plugin-html\src\index.js:26:1)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.load (J:\Work\Greencard\green-card-app\node_modules\standard\node_modules\eslint\lib\config\plugins.js:129:26)

If you think this is a bug in `standard`, open an issue: https://github.com/standard/standard/issues

[exah]

@ArmorDarks As of today you should use official eslint-plugin-vue instead of eslint-plugin-html.

[ArmorDarks]

Oh, I didn't encounter eslint-plugin-vue before. Thanks!

Still, we'd want to use eslint-plugin-html for some occasional inlined scripts in HTML. Does it work for anyone? Can't figure out is it eslint-plugin-html issue or standards.

[lqfxz520]

In sublime, how do you check files?

[timwis]

Just wanted to share how I have it working... is there a better way? I use eslint-config-standard with the following .eslintrc file:

{
  "extends": [
    "plugin:vue/recommended",
    "standard"
  ],
  "parserOptions": {
    "ecmaVersion": 2017
  }
}

I would prefer to use the standard binary instead of eslint-config-standard (if for no other reason than fewer devDeps in my package.json), but I couldn't get the Vue eslint plugin to work via the standard CLI. Has anyone figured it out?

[ArmorDarks]

Yeap, it seems to be impossible to specify which eslint-plugin-vue rules should be used. Or am I missing something?