[vite plugin]Validate and ensure the correctness of alias imports

暴走 — Mon, 15 Apr 2024 14:42:03 +0000

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~

[enhance-log]to add log filename, line, argument name and separator

暴走 — Sun, 16 Jul 2023 10:41:58 +0000

vite-plugin-enhance-log

A vite Plugin to add log filename, log line, log argument name and separator.

There is also a babel pluin with the same features 👉 babel-plugin-enhance-log

📦 Install

pnpm add vite-plugin-enhance-log -D
# or
yarn add vite-plugin-enhance-log -D
# or
npm i vite-plugin-enhance-log -D

⚙️ Options

interface Options {
  /**
   * log file name
   * If your file name is too long,
   * and you don;t want to log the directory of  the file path, 
   * such as src/pages/xxxyyy/a.tsx, 
   * then you can configure enableDir to false, and only print a.tsx
   * @default true
   */
  enableFileName?: boolean | {
    enableDir?: boolean
  }
  /**
   * tip of start argument default 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
   * @example
   * console.log(' 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀', ...)
   */
  preTip?: string
  /** the delimiter for each parameter is an empty string by default, you can also use a newline \n, a semicolon';' a comma',' or even a pig '🐖' */
  splitBy?: boolean
  /** 
   * need endLine, default false， only if startLine unequal endLine
   * @example
   * console.log('line of 1 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 ~ main.tsx', ..., 'line of 10 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 ~ main.tsx')
   *  */
  endLine?: boolean
}

🔨 Usage

import { defineConfig } from 'vite'
import EnhanceLog from 'vite-plugin-enhance-log'

const config = defineConfig({
  plugins: [
    // if you use vue, ensure the vuePlugin before the log plugin
    EnhanceLog({
      splitBy: '\n',
      preTip: '🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖',
      enableFileName: true, // or enableFileName: { enableDir: false}
    }),
  ],
})

export default config

👇 Example

Clone the project and start playgrounds by running:

pnpm play # corresponding to vue
# or
pnpm play:react # corresponds to react

For specific configuration, see vue/vite.config.ts or react/vite.config.ts

For example, if you don't like small 🚀, but you like piggy 🐖, you can configure preTip as 🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖:

For example, in the case of many parameters, you want log to wrap each parameter, then you can configure splitBy as \n:

Or the delimiter is ;:

Of course, you can also specify it at will, such as using a dog head 🐶 to separate:

For example, if you want to know the file name where the log is located, you can configure enableFileName to be true (of course the default is true):

If the file path is too long:

and you only want to print the file name without the directory prefix, you can configure enableFileName: { enableDir: false }:

For another example, if there is a log that spans multiple lines, you want the number of lines at the beginning and end of the log, with the log entity in the middle, then you can set endLine to true:

We can see that the number of lines at the beginning is 29, and the number of lines at the end is 44, which is consistent with the source code

📄 License

vite-plugin-enhance-log is MIT licensed.

Forem: 暴走