Eslint, Airbnb, Prettier, Husky Setup for your next Vite Js project. ( vue — Vite )

6 min readJun 21, 2021

Vite is making a lot of buzz now a days in the Front end world especially for its ability to provide a faster dev experience for all the possible frameworks that are widely used. Anyhow I have observed that when you scaffold a project for a vite project it wont come up with Eslint or prettier linting / formatting option out of the box nor it asks you while you scaffold a project , so I thought of creating this blog addressing the same where we can manually combine …

ESLint and Eslint-airbnb : To catch all the Javascript code that is violating javascript coding best practices ( in this case a standard that is set by Airbnb for ES ) and to catch all the possible error pron code.

Prettier : To setup a auto formatter which Primarly focuses on the styling aspect of the code for all types of files likes .js, .css, html, .ts, .jsx, .vue etc ...

Husky : To make sure that the code formatting / linting happens before the contributor git commit’s his/her code according to the rules set by prettier / ESLint. So setting this up will make sure that even if multiple dev’s are working on your project the code formatting and linting will remain the same irrespective .

the above three config’s for your project will set a strong base for your project by setting coding standard which will attain code consistency and help you to catch all the possible errors with code beautification that stays consistent across all commits.

So let’s Start the above three tooling setup for your Vite Project…

Scaffolding Vite App

Run the below <CMD> to start scaffolding your Vue app with Vite.

npm init @vitejs/app my-test-app

Select the Framework of your choice ( in our case its vue)

Select the Varient you want ( I will go for non TS variant)

Now your scaffold is ready , CD into your app < DIR > and run `npm install` follwed by `npm run dev` <CMD> to start your dev server.

Install Eslint as DevDeps

npm i -D eslint

Configure Eslint-Airbnb style guide

Run the below npx or eslint command

eslint --init 
OR
npx eslint --init

The above cmd will trigger esLint generator CLI, follow the generator questions and input it wrt Vue ( specially select the reason as `To check syntax, find problems, and enforce code style` and when asked also select a StyleGuide check in to use a popular style guide and opt for ‘Airbnb’ or you can select any favorite ES StyleGuide to continue )

if any error like ( error-occurred-while-generating-your-javascript-config-file) occurs while running the esLint generator command , please refer refer this

The above cmd will Successfully create a .eslintrc.js configuration file with all the options configured w.r.t the entries chosen by you in the ESLint generator flow , which might look like below !!

EsLint created by the eslint generator

module.exports = {
  env: {
    browser: true,
    es2020: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {
  },
};

Finally add the below optional npm script’s to your package.json file so that you can run eslint manually via the npm cmd like npm run lint which will show you the code's which are possibly not following the good coding practices ( it will promt with line number also ) and npm run lint:fix cmd will automatically fix all the possible linting issues according to the eslint config.

"lint": "eslint src --ext .js",
"lint:fix" : "eslint src --ext .js --fix"

That’s it !! The above configuration is enough for catching Javascript error’s ( also for js code formatting ) and to follow a JS style guidelines but as we known that prettier is having much more command over formatting code ( including JS, html, tsx,ts,vue .. files ) than ESLint so why not separate both's job and assign the job of catching the JS error and throwing warning / suggestion of JavaScript files to eslint and giving prettier the job of handeling the formatting where it beautifies the code and provides option of Format on Save plus the user has the power to configure / override the code formatting rules presented by eslint-airbnb and add his own bit to it as he wants. So lets configure eslint and prettier in such a way that it won't conflict each other. So to accomplish this we need to add Eslint/prettier config and plugin to .eslintrc file as explained below.

Configure ESLint-Prettier.

Install prettier and eslint-prettier config pckg.

npm i eslint-config-prettier eslint-plugin-prettier prettier -D

Now Manually add prettier to the extends and plugins array as eslintrc.jsoptions . You can also pass some rules for prettier so that the error corresponding to prettier shows up in the eslint problems tab within IDE .Now the updated .eslintrc.js file looks likes this

module.exports = {
    env: {
        browser: true,
        es2020: true,
        node: true,
    },
    extends: ['plugin:vue/vue3-recommended', 'airbnb-base', 
              'prettier'],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
    },
    plugins: ['vue', 'prettier'],    rules: {
         'prettier/prettier': 'error',
    },
};

Above configuration is enough to get started with your JS Linting and code formatting / beautifying to work but be aware that the prettier’s beautifying way of code ( JS file ) is having an upper hand than airbnb which means the default’s of prettier is activated , like in this case singleQuotes is set to false in prettier by default ,whereas in airbnb-styleguide its turned true , so its better to create a .prettierrc.js file to override the options that we want or as we want it to be.

create a .prettierrc.js file and add the following to override the defaults

module.exports = {
    singleQuote: true,
    trailingComma: 'es5',
    tabWidth: 4,
    semi: false,
}

Now its all setup’ed properly for catching es6 error’s / warnings and formating (styling) the code using eslint and prettier respectively.

Config your Editor.

Even though we have successfully configured the Eslint, Prettier, Airbnb to our project, to work more efficiently it is recommended to configure your IDE’s / code editors ( webstrom , VSCode , .. etc ) such that it maps the prettier config or eslint config files from your project to the editor and applies these rules as soon as you save a file. So make sure that the IDE’s eslint and prettier plugin has mapped its settings to match with .eslintrc and .prettierrc file from the project.

follow this link For Vs Code integration [ extra cookie : try disabling `vetur` plugin ]

follow this link For webstrom integration

If you need support for typescript please have a look into this blog post LINK

Husky Setup

Run git prehook’s like prettier before anyone commits the code in the local , so that the code is beautified before its pushed on to github , link to full doc is here

Prerequisite: make sure that you have intitiated your project with git init cmd

One liner setup

npx mrm lint-staged

If you receive any error corresponding to mrm or npx (especially on windows it does ), if yes then refer to this git discussion Link

Last Step : Make sure that you add the below options to the package.json file and you are done , now this script will run before you commit the staged files on to a git commit which will run prettier fixes on the below mentioned file extension’s (js , css , md , vue, json, ts, tsx, jsx files)

"lint-staged": {
        "*.{js,css,md,vue,json,ts,tsx,jsx}": "prettier --write"
    }