浅井ブログ

基本的にはこちらの記事を参考に、導入を進めました。

https://qiita.com/yuki_s_14/items/96620ccfb1dd897ce9f3

PRはこちら
https://github.com/acaibawl/acai-blog/pull/8

.eslintrcという設定ファイルは古くて、今ははeslint.config.mjsという設定ファイルを使ってESLint Flat Config という書き方をするようです。

加えて、自分はvueファイルのtemplate内の各タグに付く要素の順番も統一したかったので下記コマンドでeslint-plugin-vueをインストールしました。

npm install --save-dev eslint-plugin-vue

タグ内の要素の順番を設定している箇所はeslint.config.mjsの下記になります。

{
    files: ['**/*.vue'],
    rules: {
      'vue/no-multiple-template-root': 'error',
      'vue/multi-word-component-names': 'off',
      'vue/require-v-for-key': 'error',
      'vue/no-use-v-if-with-v-for': 'error',
      'vue/attributes-order': [
        'error',
        {
          order: [
            'DEFINITION', // v-if, v-for, v-slot などの定義系ディレクティブ
            'LIST_RENDERING', // v-for などリストレンダリング系
            'CONDITIONALS', // v-if, v-else-if, v-else などの条件分岐
            'RENDER_MODIFIERS', // v-once, v-pre などレンダーモディファイア
            'GLOBAL', // id, class などグローバル属性
            'UNIQUE', // ref, key などユニーク属性
            'TWO_WAY_BINDING', // v-model など双方向バインディング
            'OTHER_DIRECTIVES', // その他のディレクティブ
            'OTHER_ATTR', // その他の属性
            'EVENTS', // v-on イベント系
            'CONTENT', // v-text, v-html などコンテンツ
          ],
          alphabetical: false,
        },
      ],
    },
  },

ESLint導入当初、エラーがめちゃくちゃ出ていました。

一旦下記コマンドで自動修正できる箇所を対応

npm run format

残ったエラー箇所を手直ししていったのですが、try~catchのcatchのerrorの型でanyを使う方が明らかにわかりやすいため、anyについては下記設定としました。

'@typescript-eslint/no-explicit-any': 'off'