Configurando um projeto Vue 3 + Vite + Typescript + Eslint + Tailwind
Tags: vue, vite, typescript, eslint
Published: 2021-02-04 19:20:21

Nos últimos meses tenho utilizado o [Vue](https://br.vuejs.org/index.html) 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](https://vitejs.dev/guide/introduction.html), 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](https://prettier.io/docs/en/index.html), [Husky](https://github.com/typicode/husky#readme) e [Tailwind](https://tailwindcss.com/docs). 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
  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
```npm
? 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.

```npm
  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.

```npm
├── 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
```json
{
  "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
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.
```json
{
  "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`
```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
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.
```json
{
  "singleQuote": true,
  "semi": false,
  "vueIndentScriptAndStyle": true
}
```

No arquivo `.eslintrc.json` devemos adicionar mais duas extensões para evitar regras duplicadas que podem se sobrescrever
```json
{
  "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
npm i -D husky lint-staged

#YARN
yarn add -D husky lint-staged
```

Adicionamos ao `package.json`
```json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,vue}": "eslint --fix"
  }
}
```
## Tailwind

O Tailwind é uma alternativa a frameworks CSS.

```npm
#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. 
```js
  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
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Agora no arquivo `main.ts` precisamos importar esse css e pronto, nosso tailwind está adicionado ao nosso projeto
```js
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](https://tailwindcss.com/docs)

## 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.