Extracting operations from .vue files

[mat813]

Extracting queries from .ts files works just fine, but I am struggling trying to figure out how to do the same for Vue single file components (.vue files).
I tried adding an override block before the one for .ts files, like this:

      {
        "files": [
          "src/**/*.vue"
        ],
        "processor": "eslint-plugin-vue"
      }

but it does not seem to work, and I have a feeling it breaks all the vue rules as I get weird eslint rule failures.

Any hints on how I can get the operation rules to work in vue sfc files ?

[dimaMachina]

https://github.com/B2o5T/graphql-eslint/tree/master/examples/vue-code-file

[mat813]

So, I tried that, and, mmm, looking at eslint --print-config with and without the graphql block gives out the same thing, but the vue files are not parsed properly any more.

[mat813]

So, I tried eslint --debug, it seems like it fails because the vue processor is not used when the graphql one is.

Without the graphql override block, it says this:

  eslint:cli-engine Lint ./src/components/Recherche/Service.vue +0ms
  eslint:linter Linting code for ./src/components/Recherche/Service.vue (pass 1) +0ms
  eslint:linter Verify +0ms
  eslint:linter With ConfigArray: ./src/components/Recherche/Service.vue +0ms
  eslint:linter Apply the processor: 'vue/.vue' +0ms
  eslint:linter A code block was found: '(unnamed)' +1ms
  eslint:linter Parsing: ./src/components/Recherche/Service.vue +3ms
  eslint:linter Parsing successful: ./src/components/Recherche/Service.vue +5s
  eslint:linter Scope analysis: ./src/components/Recherche/Service.vue +0ms
  eslint:linter Scope analysis successful: ./src/components/Recherche/Service.vue +0ms

And with the block, it says this:

  eslint:cli-engine Lint ./src/components/Recherche/Service.vue +0ms
  eslint:linter Linting code for ./src/components/Recherche/Service.vue (pass 1) +0ms
  eslint:linter Verify +0ms
  eslint:linter With ConfigArray: ./src/components/Recherche/Service.vue +1ms
  eslint:linter Apply the processor: '@graphql-eslint/graphql' +5ms
  eslint:linter A code block was found: 'document.graphql' +243ms
  eslint:linter This code block was skipped. +0ms
  eslint:linter A code block was found: '(unnamed)' +0ms
  eslint:linter Parsing: ./src/components/Recherche/Service.vue +4ms
  eslint:linter Parsing successful: ./src/components/Recherche/Service.vue +5s
  eslint:linter Scope analysis: ./src/components/Recherche/Service.vue +0ms
  eslint:linter Scope analysis successful: ./src/components/Recherche/Service.vue +0ms

I have a feeling I am missing something, but I cannot figure out how to have two processors :(

[mat813]

To be more complete, the error I get with the graphql override block is:

./src/components/Recherche/Service.vue
   41:12  error  clear  vue/comment-directive
   41:12  error  clear  vue/comment-directive
  109:10  error  clear  vue/comment-directive
  121:9   error  clear  vue/comment-directive

Which is bogus, it's like it cannot figure out it is a vue sfc.

[dimaMachina]

Sorry I don’t know, I don’t use vue, but all examples that are present in the repo are working and tested in ci

[mat813]

Ok, so, after a few hours of trial and error, so, the vue/comment-directive rule is a placeholder to find out eslint-disable xxx directives in html or css blocs in .vue files. If I disable it, eslint runs fine. But I cannot use those directive any more, so, I hacked up a second processor in graphql-eslint, like this:

exports.processors = {                                                                                                                                                                                                                          
  graphql: processor,                                                                                                                                                                                                            
  "graphql-vue": {                                                                                                                                                                                                                              
    supportsAutofix: true,                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                
    preprocess: processor.preprocess,                                                                                                                                                                                            
                                                                                                                                                                                                                                                
    postprocess(messages, filePath) {                                                                                                                                                                                                           
      if (messages.length > 0) {                                                                                                                                                                                                                
        const last = messages.length - 1;                                                                                                                                                                                                       
        messages[last] = require("eslint-plugin-vue").processors['.vue'].postprocess([messages[last]], filePath);                                                                                                                               
        const result = processor.postprocess(messages, filePath);                                                                                                                                                                
        return result;                                                                                                                                                                                                                          
      } else {                                                                                                                                                                                                                                  
        return messages                                                                                                                                                                                                                         
      }                                                                                                                                                                                                                                         
    },                                                                                                                                                                                                                                          
  }                                                                                                                                                                                                                                             
};

It is kinda awful, but it works.

[mat813]

I would recommend switching the vue-code-file example to "extends": ["plugin:vue/base"] as anyone using a vue app would have at least this, and it would be closer to the reality.

As it would break the tests, a new processor is needed, maybe something like I wrote before, keeping the require('eslint-plugin-vue') inside the processor as to not require a dependency on it. (or add it as an optional dep.)