Better DX in JS apps with unplugin-auto-import

When developing projects, I always like to choose the tools that deliver the best Developer Experience possible. That is also why my favourite web framework currently is Nuxt.js (especially with the release of stable 3.0.0 version). But my desire to have the best Developer Experience does not stop there as I always try to implement DX improvements by myself as well.

In this article, I will dive into unplugin-auto-import package by Anthony Fu that improves Developer Experience by letting you not write code and still get the same result.

The best code is the one that you don't need to write
~Jakub

Developer Experience

The Developer Experience (DX) describes the experience developers have while using or working on your product. It is a package of positive and also negative feelings. In many companies, dealing with DX is often secondary to trying to make a User Experience (UX) as good as possible. This approach is unfortunate - developers are users too!

If you are new to this topic, there is a really good website that defines what is a good Developer Experience (and what is not) -> https://developerexperience.io/practices/good-developer-experience

And, you can also take a look at one of my articles that I wrote some time ago about Developer Experience -> https://dev.to/jacobandrewsky/what-is-developer-experience-2lh8

unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild with TypeScript support. In simple words, this plugin allows you to not write certain import statements. So, instead of writing this:

import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

We can write this:

const count = ref(0)
const doubled = computed(() => count.value * 2)

And have the same final result! Isn't it great?

In this particular case, it may not look that astounding as we only got rid off one import but imagine if you are building a big Vue.js application with packages like vue-router, vee-validate, @vue-use, then the savings are about 4/5 lines of code at least per each component.

But it does not end there as apart from the default functionality of the package, you also get a lot of configuration options. You can define the destination of the declaration files, add eslintrc config, inlcude certain files, and import more packages. Take a look at this advanced configuration below:

AutoImport({
  // targets to transform
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/, /\.vue\?vue/, // .vue
    /\.md$/, // .md
  ],

  // global imports to register
  imports: [
    // presets
    'vue',
    'vue-router',
    // custom
    {
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      'axios': [
        // default imports
        ['default', 'axios'], // import { default as axios } from 'axios',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]'],
      ],
    },
  ],
  // Enable auto import by filename for default module exports under directories
  defaultExportByFilename: false,

  // Auto import for module exports under directories
  // by default it only scan one level of modules under the directory
  dirs: [
    // './hooks',
    // './composables' // only root modules
    // './composables/**', // all nested modules
    // ...
  ],

  // Filepath to generate corresponding .d.ts file.
  // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
  // Set `false` to disable.
  dts: './auto-imports.d.ts',

  // Auto import inside Vue template
  // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
  vueTemplate: false,

  // Custom resolvers, compatible with `unplugin-vue-components`
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ],

  // Generate corresponding .eslintrc-auto-import.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc: {
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },
})

This delivers a great flexibility. Also, if you are using Nuxt 3, you are using this plugin under the hood to have auto imports of components, composables, and many more!

Summary

This plugin, allows you to write less code and have the same result. For me, it is an example of great Developer Experience! Let me know what other great DX examples you know so that I can write an article about them as well!