@scayle/storefront-eslint-auto-explicit-import

An extension of the official @nuxt/eslint module to insert more explicit import statement automatically using eslint --fix into a Nuxt-based SCAYLE Storefront project.

NOTE: Currently composables, utilities, helper functions and imported functions from packages will be automatically inserted as imports. No components used within a <template> will be imported by it!

• Based on nuxt-eslint-auto-explicit-import
• Based on eslint-plugin-unimport
• Official @nuxt/eslint module
• Official ESLint Documentation

Example

• Example Commit on eslint-flat-config-viewer

Details

Usage

Add local module to nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    // Both are required
    '@nuxt/eslint',
    '@scayle/eslint-auto-explicit-import',
  ],
})

Followed by adding a dedicated eslint flat config if none exists:

// eslint.config.mjs
import withNuxt from './nuxt/eslint.config.mjs'

export default withNuxt({
  // Your ESLint config
})

Running eslint should now throw errors if a source file does use auto-import. Adding --fix allows for automatically inserting / fixing of missing imports.

# pnpm lint .
pnpm lint . --fix

Troubleshooting

1. Should a Vue component not have a dedicated <script> tag with some content within, it might be possible that the included local eslint-plugin-unimport fails with a range undefined error. In this case it is necessary to manually add the missing <script> tag with some dummy content.