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

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

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

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

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"
  ]
}

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

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": {}
}

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 ."
}

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

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
}

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",
  ]
}

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

Adicionamos ao package.json

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

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

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: [],
  }

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;

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')

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

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.

This post is also available on DEV.