Install and configure ESLint, Prettier, and Tailwind CSS using Vite

The First Step

Create a new Vite project through yarn:

Add ESLint, Prettier, and other integration packages to the project:

yarn add -D eslint 

eslint-config-prettier to turn off all rules that are unnecessary or might conflict with Prettier.

Make modifications to .eslintrc.js (if not, create one):

  "extends": [

Make sure to put "prettier" last, so it gets the chance to override other configs.

eslint-plugin-prettier runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

Add these to the .eslintrc.js:

  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"

eslint-plugin-vue is an official ESLint plugin for vue.

My final configuration file looks like this:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  extends: ["plugin:vue/vue3-recommended", "prettier"],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: "module",
  plugins: ["vue", "html", "prettier"],
  rules: {
    "prettier/prettier": "error", 

In VS Code

To integrate ESLint into VS Code, we need to install the ESLint extension and Prettier extension for VS Code. To configure ESLint to automatically fix syntax and formatting issues, we need to create the file .vscode/settings.json:

    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"

It can also be used as a global configuration for vscode.

Now, whenever we save a vue file or a HTML file, it should automatically be formatted.


View Github

Face Swapper — Make production-quality face swaps

OnePlus 10 Pro Leak Suggests 80W Fast Charging, Launch in April 2022