Pre commit hook for eslint and vue

Question

I am using pre-commit for several hooks within a multi language project. All my existing hooks are working. I am now trying to get a eslint hook setup that will include Vue 2 files.

Here's my .pre-commit-config.yaml for the eslint section:

-   repo: https://github.com/pre-commit/mirrors-eslint
    rev: 'v7.18.0'
    hooks:
    -   id: eslint
        types_or: [javascript, jsx, ts, tsx, vue]
        additional_dependencies:
        -   eslint-plugin-vue@v7.5.0

This works for javascript files but completely ignores the Vue 2 files. I have setup the above config based on this: Eslint for vue and pre-commit eslint.

I have tried adding the following .eslintrc file in the root of the project which hasn't helped:

module.exports = {
  extends: [
    'plugin:vue/recommended'
  ]
}

The Vue files are completely ignored.

score 6 · Accepted Answer · answered Jan 22 '21 at 08:51

The base configuration at that version specifies types: [javascript]

when folded together with your configuration this sets:

types: [javascript]
types_or: [javascript, jsx, ts, tsx, vue]

from the documentation:

types, types_or, and files are evaluated together with AND when filtering. Tags within types are also evaluated using AND.

new in 2.9.0: Tags within types_or are evaluated using OR.

Putting that together (with a bit of set notation), you're requesting {javascript} & {javascript, jsx, ts, tsx, vue} -- simplified: {javascript}

the README of mirrors-eslint tells you what to do here, you need to override types back to the default [file] before applying additional filtering:

    -   id: eslint
        types: [file]
        types_or: [javascript, jsx, ts, tsx, vue]

disclaimer: I'm the creator of pre-commit, in the future please don't post your question to both the issue tracker and stackoverflow, thanks!

Pre commit hook for eslint and vue

1 Answers1