This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Jakub Andrzejewski
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!
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Jakub Andrzejewski
Jakub Andrzejewski | Sciencx (2022-12-19T07:22:27+00:00) Better DX in JS apps with unplugin-auto-import. Retrieved from https://www.scien.cx/2022/12/19/better-dx-in-js-apps-with-unplugin-auto-import/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.