Question: Usage with `vue-eslint-parser` possible?

[alappe]

Thanks for your efforts regarding style and coffeescript!

I was very happy to see that AST support landed in a coffeescript release and wanted to see if I can integrate your plugins for prettier and eslint into our projects.

But for our vue projects, I'm running into the issue that those single file components seem to need a separate parser themselves – is there a way to combine it with your parser?

Regards
Andreas

[helixbass]

Hi, you're welcome!

I'm not familiar with the setup for vue apps (or how generally to use "multiple custom parsers" on a project with ESLint), but I'm happy to look into how that works with vue-eslint-parser

Looking at the docs, it seems like maybe you could just specify this in your ESLint config:

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
     "parser": "eslint-plugin-coffee"
  }
}

Could you try that (after installing eslint-plugin-coffee + its required eslint and coffeescript dependencies per the README) and see if it "just works"?

[alappe]

Yes, that one I tried. It results in

…/src/components/styleguide/Gauge.vue
  0:0  error  Parsing error: unexpected (

✖ 1 problem (1 error, 0 warnings)

So I was unsure if it works with multiple parsers at all. I also tried switching both parsers, resulting in a similar message unexpected =.

[helixbass]

Ok,

Here is an example Vue project that I set up: https://github.com/helixbass/vue-coffee-eslint-example

The issue causing the Parsing error: unexpected ( is that vue-eslint-parser wraps template expressions in 0(...), which doesn't parse in Coffeescript

So I can open an issue with vue-eslint-parser to see if they can update to a Coffeescript-compatible wrapper

In the meantime, using Yarn selective dependency resolutions, you can swap in a forked version of vue-eslint-parser that uses [...] instead of 0(...):

In your package.json:

"resolutions": {
  "eslint-plugin-vue/vue-eslint-parser": "github:helixbass/vue-eslint-parser#0fff0dd1"
},

and then yarn install

Still it won't report ESLint errors in .coffee files in the yarn serve dev server, since Vue's cli-plugin-eslint hardcodes file extensions that don't include .coffee

So to work around that you can use a forked version of @vue/cli-plugin-eslint:

yarn add --dev github:helixbass/vue-cli#vue-cli-plugin-eslint-v4.1.2-dev-400-gitpkg

At that point it is successfully reporting ESLint errors for me both in the yarn serve dev server and when running yarn lint on the command line

I saw that some Vue ESLint rules may not work correctly out-of-the-box with Coffeescript (eg "vue/require-render-return"), so I disabled it manually

It should be possible to add support for overrides for these incompatible Vue rules to this plugin (opened #29)

Also I'm curious should you be able to use Coffeescript syntax inside Vue template expressions? I tried eg {{ someImplicitCall withArgs }} and it failed to parse

[GeoffreyBooth]

Also I'm curious should you be able to use Coffeescript syntax inside Vue template expressions? I tried eg {{ someImplicitCall withArgs }} and it failed to parse

I don't think so. I've been working with Vue for a few years, and it supports CoffeeScript in .vue files via script lang="coffee" just fine, but within template expressions I think it's only plain JavaScript: https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions. I've never heard of TypeScript in there either, basically if you want anything at all complicated you write it in a helper that the template calls out to.

[alappe]

Bam, thanks so much @helixbass! I will try to set it up as you explained, switching to yarn for now.

GeoffreyBooth is right—vue only supports javascript in the template section. A weird mix I personally don't enjoy at all, but the team decided 🤷‍♂️

[alappe]

Ok, much of the codebase seems to work, generating a lot of useful errors to fix.

I do see those two patterns:

0:0 error Parsing error: reserved word 'void', (--debug brings:

eslint:linter [stdin]:1:1: error: reserved word 'void'
void function($event){hook.uri = initialHook.name}

) with this line of the source: <MyComponent @clear="hook.uri = initialHook.name" />

and

0:0 error Parsing error: reserved word 'let' (--debug brings:

eslint:linter [stdin]:1:5: error: reserved word 'let'
for(let hook in hooks);

) with this line of the source: <li v-for="hook in hooks">…

This is the output of vue-eslint-parser, again producing output which is not compatible with CoffeeScript as well, right?

[GeoffreyBooth]

Those seem like CoffeeScript compiler errors.

[helixbass]

I don't think so. I've been working with Vue for a few years, and it supports CoffeeScript in .vue files via script lang="coffee" just fine, but within template expressions I think it's only plain JavaScript

Interesting. In that case vue-eslint-parser's behavior of using the specified parser (in this case eslint-plugin-coffee ie parsing as Coffeescript) for template expressions seems incorrect (ie it should fall back to a known JS parser for template expressions)?

This is the output of vue-eslint-parser, again producing output which is not compatible with CoffeeScript as well, right?

Looks that way. I can look more into it and keep extending the forked vue-eslint-parser dependency

But per the first part of this comment, it would seem like here also vue-eslint-parser should just be using a JS parser (rather than the specified parser) for its converted pseudo-JavaScript from eg v-for (ie you also can't use Coffeescript inside a v-for or an @clear)?

Those seem like CoffeeScript compiler errors

Yup if it's the same issue as the template expressions being wrapped with 0(...), then the sequence is:

1. vue-eslint-parser finds a "nested expression" (eg a template expression, a v-for or an @clear)
2. vue-eslint-parser does some "wrapping" of that expression eg hook in hooks -> for(let hook in hooks); in order to make it a complete expression that can be parsed
3. vue-eslint-parser hands off that wrapped expression to eslint-plugin-coffee's AST parser
4. eslint-plugin-coffee's AST parser asks the Coffeescript compiler to generate AST for the wrapped expression

So the Coffeescript compiler would be failing to parse the expressions that are wrapped in non-Coffeescript compatible wrappers

But what I'm now saying here is that 3. should instead hand off to a known JS AST parser (not the parser you specified)

I guess it hasn't been an issue because the only custom parsers that people have been using (babel-eslint, Typescript) are JS-compatible, but it seems like the wrong thing to do conceptually

[helixbass]

Ok yup looks like those issues are all resolved by making vue-eslint-parser use ESLint's "native" JS parser (espree) for all expressions

@alappe can you try updating your vue-eslint-parser dependency resolution in package.json to:

"resolutions": {
  "eslint-plugin-vue/vue-eslint-parser": "github:helixbass/vue-eslint-parser#936ba67b"
}

and run yarn install?

For me this is working in the example project, it's not choking on @clear/v-for and it's correctly using Coffeescript parser when linting .coffee files and <script lang="coffee"> blocks

[alappe]

@helixbass Yes, this looks great now. Some Expected to return a value in "diff" computed property, but I can disable vue/return-in-computed-property for that, as CoffeeScript always returns.

Thank you very much for your help!

[joallard]

Hey folks! I'm trying to make this work, but I'm getting confused between a lot of instructions.

I modified some rules to quash some non-errors:

    "rules": {
      "coffee/id-length": "off",
      "vue/require-render-return": "off",
      "vue/no-shared-component-data": "off",
      "vue/return-in-computed-property": "off"
    }

Now I'm getting this very curious one:

error: 'h' is not defined (no-undef) at src/main.js:7:16:
  5 |
  6 | new Vue({
> 7 |   render: h => h(App),
    |                ^
  8 | }).$mount('#app')
  9 |

Any idea what that is?