DEV Community

Cover image for Configurando um projeto Vue 3 + Vite + Typescript + Eslint + Tailwind
Christian Toledo
Christian Toledo

Posted on

Configurando um projeto Vue 3 + Vite + Typescript + Eslint + Tailwind

#vue #vite #typescript #eslint

Nos últimos meses tenho utilizado o Vue como meu framework principal de trabalho, e mais recentemente comecei a migração do Vue 2 para o Vue 3. Para iniciar meus projetos com Vue 3 tenho utilizado o Vite, uma ferramenta de desenvolvimento build free, isso significa na prática que não ocorre pré-build em desenvolvimento, oferecendo ao server os módulos javascript nativos. Entre as vantagens de se utilizar o Vite estão no ganho na velocidade de criação e hot module replacement do projeto.

Neste guia irei mostrar como faço para configurar meus projetos, e além das ferramentas do título, irei incluir também Prettier, Husky e Tailwind. Lembrando que essa não é a única, muito menos a forma mais correta, apenas a forma em que eu faço minhas configurações. Espero que esse guia te ajude.

Inciando a aplicação com Vite

Abra o terminal na pasta em que deseja criar o projeto e digite o comando abaixo. lembrando que após @vitejs/app e onde você escolhe o nome do seu projeto.

#NPM
  npm init @vitejs/app my-project

#YARN
  yarn create @vitejs/app my-project
Enter fullscreen mode Exit fullscreen mode

Ao rodar o comando acima no terminal, podemos conferir que o vite nos da opções de presets para nossa aplicação

? Select a template: …
▸ vanilla
  vue
  vue-ts
  react
  react-ts
  preact
  preact-ts
  lit-element
  lit-element-ts
Enter fullscreen mode Exit fullscreen mode

Como podemos ver, o Vite uma ferramenta que independe do framework. Para o nosso caso vamos escolher a opção vue-ts.

Pronto ao selecionar a opção, rapidamente o nosso projeto é criado. Agora navegamos para dentro da pasta do projeto e instalamos as dependências.

  cd my-project
#NPM
  npm install 
  npm run dev 

#YARN
  yarn
  yarn dev
Enter fullscreen mode Exit fullscreen mode

Pronto, o projeto por padrão está rodando na porta 3000.

O projeto criado segue a seguinte estrutura de pastas.

├── node_modules
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.ts
├── tsconfig.json
└── vite.config.ts
Enter fullscreen mode Exit fullscreen mode

Se você utiliza vscode, pode seguir os passos abaixo.

  1. Abra src/main.ts
  2. Abra o input de comando (ctrl + shift + P) do VSCode
  3. Procure e rode "Select TypeScript version" -> "Use workspace version"

Configurando Typescript

O Vue 3 por padrão já reconhece o Typescript, e o Vite já criou o arquivo main.ts. O que precisamos fazer e adicionar na tag <script> dos arquivos .vue o parametro lang="ts" e pronto, nosso projeto já entende Typescript.

No arquivo tsconfig.json podemos fazer a seguinte modificação

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "importHelpers": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": ".",
    "lib": ["esnext", "dom",
      "dom.iterable",
      "scripthost"],
    "types": ["vite/client"],
    "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": [
    "node_modules"
  ]
}
Enter fullscreen mode Exit fullscreen mode

ESLint 

#NPM
npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript

#YARN
yarn add -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript
Enter fullscreen mode Exit fullscreen mode

Após a instalação devemos criar um arquivo .eslintrc.json na raiz do projeto e inserir as seguintes configurações.

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2021
  },
  "plugins": [],
  "rules": {}
}
Enter fullscreen mode Exit fullscreen mode

Nesse arquivo você pode adicionar os plugins e as regras de sua preferência.

Podemos adicionar o seguinte script ao nosso package.json

"scripts": {
  "lint:script": "eslint --ext .ts,vue --ignore-path .gitignore ."
}
Enter fullscreen mode Exit fullscreen mode

Assim podemos rodar o script com a flag --fix para correção dos arquivos do projeto. Essa correção também pode ser feita através das configurações do VSCode para formatar ao salvar

Prettier

Adicionamos o Prettier para formatar nosso projeto.

#NPM
npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

#YARN
yarn add -D prettier eslint-plugin-prettier @vue/eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Ao instalar as dependências, criamos um arquivo .prettierrc e inserimos as seguintes configurações. Aqui você pode adiocionar as regras da sua preferência.

{
  "singleQuote": true,
  "semi": false,
  "vueIndentScriptAndStyle": true
}
Enter fullscreen mode Exit fullscreen mode

No arquivo .eslintrc.json devemos adicionar mais duas extensões para evitar regras duplicadas que podem se sobrescrever

{
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "prettier",
    "prettier/vue",
  ]
}
Enter fullscreen mode Exit fullscreen mode

Husky

Utilizamos o Husky para realizar ações antes de um commit, podemos formatar, rodar testes, e rodar outros scripts. Aqui vamos configurar apenas o linting.

#NPM
npm i -D husky lint-staged

#YARN
yarn add -D husky lint-staged
Enter fullscreen mode Exit fullscreen mode

Adicionamos ao package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,vue}": "eslint --fix"
  }
}
Enter fullscreen mode Exit fullscreen mode

Tailwind

O Tailwind é uma alternativa a frameworks CSS.

#NPM
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

#YARN
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

Em seguida iniciamos o Tailwind rodando o comando abaixo. Será criado um arquivo tailwind.config.js e um arquivo postcss.config.js

No arquivo tailwind.config.js podemos configurar o purge para o Tailwind remover os estilos não utilizado quando fizermos a build para produção.

  module.exports = {
   purge: [],
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
Enter fullscreen mode Exit fullscreen mode

Adicionando o Tailwind ao CSS

Dentro da nossa pasta src criamos um arquivo index.css, nele adicionamos o Tailwind da seguinte maneira

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Agora no arquivo main.ts precisamos importar esse css e pronto, nosso tailwind está adicionado ao nosso projeto

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
Enter fullscreen mode Exit fullscreen mode

Se estiver com o projeto rodando, pare e rode novamente. Graças ao Vite, esse processo deve ser bem rápido

Você pode encontrar mais sobre o Tailwind aqui

Extra: EditorConfig

O EditorConfig é um formato de arquivo que contém regras de configuração do editor de texto e padronização de código. Em alguns editores esse arquivo é lido automaticamente e aplica as configurações. É ideal em casos onde existe uma equipe de desenvolvimento e se deseja que todos estejam com a mesma configuração no editor de texto ou IDE de sua preferência. No site do EditorConfig você pode conferir se há necessidade de instalar o plugin ou se o seu editor já possui suporte nativo a esse formato de arquivo

Crie um arquivo .editorconfig e adicione as regras de sua preferência. O arquivo final deve ser algo parecido com a configuração abaixo.

root = true

[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Enter fullscreen mode Exit fullscreen mode

Conclusão

A criação de um projeto Vue utilizando Vite é uma alternativa ao vue-cli, que utiliza o Webpack como bundler. Optando pelo uso do Vite nós ganhamos performance durante o desenvolvimento, mas abrimos mão das configurações que o vue-cli já faz para nós, como a integração com ESLint. Até o momento eu não conheço uma forma de configuração com Vite que não seja manual, por isso escrevi esse guia. Acredito que boa parte dos projeto utilizam pelo menos algumas dessas configurações, e caso necessário, seguindo a lógica deste guia, você pode incluir as suas próprias configurações, como por exemplo testes com Jest.

Lembrando que essas são as configurações que eu utilizo ao iniciar um novo projeto. É importante você conhecer o seu projeto e com o tempo entender quais configurações funcionam para você. Essa publicação é apenas um guia com o objetivo de facilitar o inicio do desenvolvimento. Outro ponto a se observar é que a tecnologia evolui em um ritmo acelerado, então é importante ter em mente que as configurações podem alterar com o passar do tempo.

Top comments (3)

Collapse
 
fabiorecife profile image
Fábio Almeida •

Muito legal esse teu post , foi bem direto ao ponto .

Collapse
 
leoscripts profile image
Leandro Cavalcante •

Oi Christian muito legal esse post. uma observação na parte da instalação do Tailwind você esqueceu de colocar o camando de inicialização dos arquivos .config

Collapse
 
byte2bit profile image
byte2bit •

npx tailwindcss init -p

Read next

abhivyaktii profile image

🌟 NestJS + Databases: Making Snake Case Seamless!🐍

Abhinav -

dsychin profile image

Lessons Learned Migrating from React CRA & Jest to Vite & Vitest

Desmond Chin -

frorning profile image

Benchmarking in Node.js vs Deno: A Comprehensive Comparison

Piyush Chauhan -

rivea0 profile image

LeetCode Meditations: Merge Intervals

Eda -