NuxtでESLintのルールを無効にする

Nuxt.jsではpropsでオブジェクトなどを受け取る際、空のオブジェクトを子コンポーネントで定義しておきます。その際、空のオブジェクトがあるとESLintに怒られるため、グローバルで無効にしておくことにしました。

例　子コンポーネント（propsに空のオブジェクト）

components/atoms/Child.vue

<script>
export default {
  props: {
    receivedObject: {
      type: Object,
      default: () => {},
    },
  },
}
</script>

プロジェクトディレクトリ直下の.eslintrc.jsファイル内

.eslintrc

module.exports = {
  // add your custom rules here
  rules: {
    'no-empty-function': 'off',
    // 空のfunctioｎあっても大丈夫
  },
}

プロジェクトではこの辺も追加しました。

.eslintrc

module.exports = {
  // add your custom rules here
  rules: {
    'no-console': 'off', // console.log();OK
    'no-unused-vars': 'off', // 使っていない変数あってもOK
    // ↓空白行に対してwarnのみ出るようにする。
    'no-multiple-empty-lines': ['warn', { max: 1 }],
    // 'lodash/prefer-lodash-method': [2, { ignoreObjects: ['_'] }],
    'no-empty-function': 'off',
    // 空のfunctioｎあっても大丈夫
  },
}

グローバルに適用する必要がない場合は、該当のエラー箇所の直上にコメントをつければOK

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */

参考

• Disallow empty functions (no-empty-function)
• ESLintについてのメモ
• Rules - Disabling Rules