Skip to content
This repository has been archived by the owner on Apr 19, 2022. It is now read-only.

Use custom template tokenizer for vue-eslint-parser #162

Draft
wants to merge 26 commits into
base: main
Choose a base branch
from

Conversation

rashfael
Copy link
Collaborator

@rashfael rashfael commented Mar 23, 2022

Uses https://github.com/rashfael/vue-eslint-parser-template-tokenizer-pug to drive existing and new rules.
We currently need to develop against https://github.com/rashfael/vue-eslint-parser/tree/custom-template-tokenizers . I'm using npm link but we can also add a github url to the package.json.

The goal for this PR is to have all already implemented rules run with the new tokenizer.

Todos

  • add vue-eslint-parser-template-tokenizer-pug to exported config
  • test existing rules if upstream eslint-plugin-vue rules work out of the box

@rashfael
Copy link
Collaborator Author

I started with testing script-setup-uses-vars since that's what has brought me to this project and it's just working out of the box.
@Shinigami92 could you help me with typescript definitions here? That test is just ported from eslint-plugin-vue.

@rashfael rashfael mentioned this pull request Mar 23, 2022
4 tasks
@Shinigami92
Copy link
Owner

could you help me with typescript definitions here?

I will look into this tomorrow

@Shinigami92
Copy link
Owner

Shinigami92 commented Mar 24, 2022

@rashfael We need to use something like this:

import * as vuePlugin from 'eslint-plugin-vue';
const rule = vuePlugin.rules['no-textarea-mustache'];

But as I said, eslint-plugin-vue doesn't bring types with it, so we may need to build them on our own

@Shinigami92
Copy link
Owner

How do you AUTOGENERATED the files, could you add the script in the scripts folder?
Also, how do we add custom pug specific tests if these tests are autogenerated?

@Shinigami92 Shinigami92 force-pushed the use-vue-eslint-parser-template-tokenizer-pug branch from f28907e to 1362668 Compare March 24, 2022 09:41
@rashfael
Copy link
Collaborator Author

The autogenerated tests are done with this script https://github.com/rashfael/vue-eslint-parser-template-tokenizer-pug/blob/main/scripts/generate-eslint-plugin-vue-tests.js but that's more of a one off since I have to touch up basically every file afterwards. I believe we don't need pug-specific tests for most eslint-plugin-vue rules.

schema: [],
messages: {
disallow:
"'template' cannot be keyed. Place the key on real elements instead.",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here we lost the pug-ified version of the message

In eslint-plugin-vue it is <template> (see https://github.com/vuejs/eslint-plugin-vue/blob/1ce68fa9def2c7d6da7aa5020c731860d7027459/lib/rules/no-template-key.js#L30)
But in my plugin there were not < and > around template because pug doesn't have such brackets 🤔

This is only one of many examples of such messages
Is it possible to update the message for pug?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Forking the whole rule code is a bit overkill, perhaps we could just wrap it, since that message is exposed in the rule meta object.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants