Vue使う人にはおなじみVeeValidateとeslintの話。

環境

Vue 2.6.12
VeeValidate 3.4.5
TypeScript 4.0.5

問題

VeeValidateで用意されているルールのリストがここにありますが、例えばalpha_dashとかを使おうとするとeslintに叱られることがあります。

 ERROR  Failed to compile with 1 errors8:06:23 PM

 error  in ./src/components/Foo.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/app/src/components/Foo.vue
  111:40  error  Identifier 'alpha_dash' is not in camel case  @typescript-eslint/camelcase
  111:40  error  Identifier 'alpha_dash' is not in camel case  @typescript-eslint/camelcase

 ✖ 2 problems (2 errors, 0 warnings)

使っている.eslintrc.jsはvue/cliで生成したそのまま。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

対策

VeeValidateがsnake caseでexportしてるんだから仕方ないだろとは思いつつ、このためにeslintのルールを緩めたり例外を設けるという対処はすべきではないので、以下のようにasでエイリアス付けて回避しました。

import { alpha_dash as alphaDash } from 'vee-validate/dist/rules';

extend('alpha_dash', alphaDash);

これであればValidationProviderにはalpha_dashで書けます。

<ValidationProvider name="foo" rules="alpha_dash" v-slot="{ errors, valid }">