Background

In our projects, we often set up aliases for easier referencing. For instance, a typical project structure might look like this:

├── src
│   ├── App.vue
│   ├── common
│   ├── components
│   ├── hooks
│   ├── index.css
│   ├── main.ts
│   └── shims-vue.d.ts
├── tsconfig.json
└── vite.config.ts

Then, we usually use aliases for easier imports, like so:

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '@common': resolve(__dirname, './src/common'),
      '@hooks': resolve(__dirname, './src/hooks'),
    },
  }
})

However, in collaborative projects, it's common to encounter situations where some imports use aliases while others rely on relative paths:

// hooks/useMounted.ts

import { foo } from '@common'
// or
import { foo } from '../common'

For someone like me with a touch of OCD, this inconsistency can be quite bothersome. So, I came up with an idea: what if we could develop a vite plugin to enforce a rule? If an import is within the context of an alias (e.g., @common), it should allow relative path imports; otherwise, it should enforce alias imports. Failure to comply should result in a warning or even an error, similar to the image below:

After investing 5 hours, from 6 PM to midnight, I finally implemented and open-sourced it 👉 vite-plugin-alias-import-checker. If you're interested, please read on for more details~

vite-plugin-alias-import-checker

🔥 Features

• Supports various file types: 👉 .js, .jsx, .ts, .tsx, .vue, .svelte, and .astro
• Offers different error levels: warn (for console warnings) or error (strict mode, errors reported on the page)

🔨 Configuration

First, import it into your vite.config.ts:

import { resolve } from 'node:path'
import { defineConfig } from 'vite'

import aliasImportChecker from 'vite-plugin-alias-import-checker'

const config = defineConfig({
  plugins: [
    aliasImportChecker(),

  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@common': resolve(__dirname, './src/common'),
      '@hooks': resolve(__dirname, './src/hooks'),
    },
  },
})

export default config

The plugin will then implement the functionality described above based on the configured aliases.

For more examples, check out vue/vite.config.ts, react/vite.config.ts, astro.config.mjs

👇 Effects:

vue-demo

react-demo

astro-demo

Conclusion

If you're a fellow sufferer of OCD like me, I highly recommend giving this plugin a try. If you encounter any issues, please let me know. And if you find it helpful, please don't hesitate to give it(vite-plugin-alias-import-checker) a star✨. Thank you~