Little guide about how to setup a Vite VueJS project with TypeScript, TailwindCSS, ESLint and Prettier support.

README.md

Little guide about how to setup a Vite VueJS project with TypeScript, TailwindCSS, ESLint and Prettier support.

Initialize the project

Run this command

yarn create vite <my-awesome-project> --template vue-ts

This will create a VueJS project with TypeScript support, but it doesn't add the configuration for Prettier or Eslint, let's add that.

Add Prettier and EsLint support

For that we need to install the following

yarn add -D eslint prettier eslint-plugin-vue eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript @vue/eslint-config-prettier

In the root folder of your project, add a file with the name of .eslintrc.js and the following content

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

If you want to modfiy the behaviour of Prettier you can add to the root of your project a .prettierrc.json file and add there your desire rules.

Add IDE support - VSCode

Be sure to have the next extensions:

• EsLint extension
• Prettier
• Volar

If we are working with VSCode, we should have prettier as the default formatter and format on save option enabled, so everytime that we save our fle, the IDE will format it using Prettier.

More guides about how to add ESLint and Prettier

These can be usefull If we want differents ways to configure our project and understand a little bit more about how Prettier and EsLint works

• ESLint and Prettier with Vite and Vue.js 3
• Prettier guide about how to integrate it with linters and why

Add TailwindCSS

The process of adding TailwindCSS is pretty straight forward, just follow the next guide:

• Install Tailwind CSS with Vue 3 and Vite