[vite plugin]Validate and ensure the correctness of alias imports
Tags: vite, react, vue, javascript
Published: 2024-04-15 14:42:03

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

```ts
├── 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:

```ts
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:

```ts
// 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:


![astro-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q0kagnl7i4ra2yzhl1b.png)



After investing 5 hours, from 6 PM to midnight, I finally implemented and open-sourced it 👉 [vite-plugin-alias-import-checker](https://github.com/baozouai/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:

```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](https://github.com/baozouai/vite-plugin-alias-import-checker/blob/main/playgrounds/vue/vite.config.ts), [react/vite.config.ts](https://github.com/baozouai/vite-plugin-alias-import-checker/blob/main/playgrounds/react/vite.config.ts), [astro.config.mjs](https://github.com/baozouai/vite-plugin-alias-import-checker/blob/main/playgrounds/astro/astro.config.mjs)

### 👇 Effects:

![vue-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8nugh1h6zk5i1sr1ij4.png)
> vue-demo

![react-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo78b9yrbdthzpwe1rdv.png)

> react-demo

![astro-demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldik9a9afxf0os3m8xgq.png)
> 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](https://github.com/baozouai/vite-plugin-alias-import-checker)) a star✨. Thank you~