3 Technologies you should add to your new Vite Project

So you have created a new Vue 3 project using Vite, maybe it’s just for a pet project or a serious one. You are super happy with the boilerplate and the speed at which the Typescript code is compiling!

But hold on a sec, let’s not get too excited yet, there are 3 things you should do now, that will save you significant time later, let’s check them out!

Add an Alias to Vite

An alias is basically a set of characters you choose that will map to a particular path, usually, it will be the @ character mapping to the src folder of your project, however, you can add as many as you want, for example, @services to map to the src/services folder.

It will help us with refactoring mostly, as we will not care about changing the import paths inside a file if we move it around. also, imports can then be copy-pasted since they will all be relative to the root of the project.

To add an alias, provide it as a config to Vite through the vite.config.ts file

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  plugins: [vue()]
})

We also want to add this alias to our Typescript configuration (tsconfig.json) for autocompletion support(or jsconfig.json if you’re not using typescript):

{
  "compilerOptions": {
    // ...config
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  // ...config
}

Add Eslint to Vite

Eslint is used to bring the dev team together under a common umbrella of conventions that promotes consistency and better code quality. This makes it easier to conduct code reviews and maintain the code base.

Since we are using Typescript we will have to use the Eslint Typescript parser along with some other dependencies, let’s go ahead and install them:

npm i -D eslint eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser

Next, set up a eslint.cjs file:

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/strongly-recommended',
    'eslint:recommended',
    '@vue/typescript/recommended',
  ],
  plugins: ['@typescript-eslint'],
  rules: {
    semi: ['error', 'never'],
    '@typescript-eslint/no-unused-vars': 'error',
    'vue/no-multiple-template-root': 'off',
    'quotes': ['error', 'single'],
    'vue/script-indent': ['error', 2, {
      'baseIndent': 1,
    }],
    'comma-dangle': ['error', 'always-multiline'],
  },
  'overrides': [
    {
      'files': ['*.vue'],
      'rules': {
        'indent': 'off',
      },
    },
  ],
}

Finally, we will add a new command to the package.json scripts:

"lint": "eslint src"

And we’re done, if we run npm run lint we might see a few complaints already.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Add Prettier to Vite

Prettier is a code formatting tool and sometimes can be confused with Eslint when it comes to certain features. While Eslint acts as a code quality and code formatting tool, Prettier is used solely for the latter.

Prettier is opinionated and has few configurable options, thus, if we’re going to use it alongside Eslint, its preferable to then separate both tools as follows:

• Eslint for code quality (example: catching unused variables)
• Prettier for code formatting (example: using/not using semicolons)

Therefore, we will use the eslint-config-prettier in Eslint to disable the formatting rules which conflict with prettier!

To get started, install a few dependencies:

npm i -D prettier eslint-config-prettier

Then, create a configuration file called .prettierrc.json (optional):

{
  "printWidth": 160,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "vueIndentScriptAndStyle": true,
  "singleAttributePerLine": true,
  "arrowParens": "always"
}

The ideal way to use it is to make it the default code formatting tool for your project. We also can format when saving a file.

In VSCode install the prettier extension and then create a .vscode folder, inside create a settings.json file and paste this:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Conclusion

With this configuration now, you are ready for your journey. Cheers!