.eslintrc.js

// cf. https://eslint.org/docs/user-guide/configuring

module.exports = {
  extends: [
    '@my-app/eslint-config', // cf. https://gist.github.com/jhlee8804/f6556886a251221d4d350a07b2327f9d
    'plugin:vue/essential', // cf. https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention
    '@vue/eslint-config-prettier', // cf. https://github.com/vuejs/eslint-config-prettier
  ],
  rules: {
    'no-unused-vars': 'off',
    // Rules: https://github.com/import-js/eslint-plugin-import/tree/main/docs/rules
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          ['parent', 'sibling'],
          'index',
          'type',
          'unknown',
        ],
        pathGroups: [
          {
            pattern: '{vue*,vue*/**}',
            group: 'external',
            position: 'before',
          },
          {
            // monorepo > packages 내부에서 다른 패키지를 참조하는 경우
            pattern: '@my-app/**',
            group: 'internal',
            position: 'before',
          },
          {
            // monorepo > packages 내부에서 root를 참조하는 경우
            pattern: '{@assets/**,@core-*/**,@models/**,@ui-*/**,@utils/**}',
            group: 'internal',
            position: 'after',
          },
          {
            // monorepo > apps 내부에서 root를 참조하는 경우
            pattern: '@/**',
            group: 'internal',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: ['vue'],
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
        'newlines-between': 'always',
      },
    ],
    // Rules: https://eslint.vuejs.org/rules/
    'vue/attributes-order': [
      'error',
      {
        order: [
          'EVENTS',
          'DEFINITION',
          'GLOBAL',
          'OTHER_ATTR',
          'TWO_WAY_BINDING',
          'RENDER_MODIFIERS',
          'CONTENT',
          'OTHER_DIRECTIVES',
          'LIST_RENDERING',
          'UNIQUE',
          'SLOT',
          'CONDITIONALS',
        ],
        alphabetical: true,
      },
    ],
    'vue/component-tags-order': 'error',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'any',
          normal: 'always',
          component: 'always',
        },
      },
    ],
    'vue/max-attributes-per-line': 'off',
    'vue/order-in-components': [
      'error',
      {
        order: [
          'el',
          'name',
          'key',
          'functional',
          ['delimiters', 'comments'],
          'parent',
          'extends',
          'mixins',
          'inheritAttrs',
          ['components', 'directives', 'filters'],
          ['provide', 'inject'],
          'layout',
          'middleware',
          'validate',
          'loading',
          'transition',
          'scrollToTop',
          'model',
          ['props', 'propsData'],
          'emits',
          'setup',
          'asyncData',
          'data',
          'static',
          'fetch',
          'head',
          'computed',
          'watch',
          'watchQuery',
          'ROUTER_GUARDS',
          'LIFECYCLE_HOOKS',
          'methods',
          ['template', 'render'],
          'renderError',
        ],
      },
    ],
    'vue/require-default-prop': 'off',
    // disable valid v-for directives
    // cf. https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-for.md
    // cf. https://github.com/vuejs/vetur/issues/261
    'vue/singleline-html-element-content-newline': 'off',
    'vue/valid-v-for': 'off',
  },
}