Durante os próximos meses, vou escrever alguns posts passando algumas dicas de estudo para quem está tentando ingressar na área e não faz ideia de por onde começar.

Hoje a área de tecnologia está bem dividida, e o melhor, vaga de todo tipo e para toda empresa

Através da tecnologia da pra conseguir escolher qualquer área, desde desenvolvimento até gestão. É lógico que qualquer evolução sempre está atrelada a tempo e força de vontade.


### Ferramentas e redes sociais

Hoje existe um leque de ferramentas e redes sociais para desenvolvedores, para usar como portfólio ou até buscar emprego. As que recomendo utilizar:

- [Linkedin](https://www.linkedin.com/): Rede social profissional, muito utilizada no ramo de tecnologia, serve para criar conexões (network) e como um currículo online;
- [GitHub](https://github.com/): Repositório de projetos e portfólio assim como linkedin é muito bem avaliada em busca de empregos;
- [DevDocs](https://devdocs.io/): Site que contém documentações de diversas linguagens e frameworks.

_Para entender melhor o que é framework, biblioteca, dê uma olhada [nesse vídeo](https://www.youtube.com/watch?v=F0H4HPXdZog)._


### O que acompanhar?

Alguns canais do Youtube pra ficar de olho que abordam diversos tipo de conteúdo e área:

- [Alura](https://www.youtube.com/c/Alura)
- [Código Fonte TV](https://www.youtube.com/c/codigofontetv)
- [DevMedia](https://www.youtube.com/channel/UClBrpNsTEFLbZDDMW1xiOaQ)
- [Filipe Deschamps](https://www.youtube.com/c/FilipeDeschamps)
- [Rocketseat](https://www.youtube.com/c/RocketSeat)
- [Willian Justen](https://www.youtube.com/channel/UCa12brLWzCqnxN0KOyjfmJQ)

Alguns Podcast pra se ouvir e manter atualizado:

- [Cabeça de Lab](http://www.cabecadelab.com.br/)
- [FalaDev](https://open.spotify.com/show/3TNsKUGlP9YbV1pgy3ACrW)
- [Hipsters Ponto Tech](https://hipsters.tech/)
- [PodProgramar](https://podprogramar.com.br/)


### Desenvolvimento

A alguns anos atrás era mais comum ver grandes aplicações todas num mesmo código e linguagem, a maioria dessas aplicações hoje foram refatoradas (reescritas) e divididas em partes menores, as que não foram separadas são chamadas de Monolito, a maioria dos sistemas legados que existem hoje são Monolitos.

Hoje as principais áreas de desenvolvimento são de fato Backend e Frontend. É claro que existem diversas outras para se ficar de olho como, Mobile, QA, DevOps, DBA.

Para entender um pouco melhor a diferença entre Back e Front dá uma olhada [nesse vídeo](https://youtu.be/WdDjUabKgqA).

Recomendo dar uma olhada nesse roadmap (passo a passo) para essas duas carreiras:

- [Backend](https://roadmap.sh/backend)
- [Frontend](https://roadmap.sh/frontend)


### Gestão
Se o foco é gestão, é mais prezado soft skills do que hard skills, pra entender a diferença entre elas, [se liga](https://www.pipefy.com/pt-br/blog/hard-skills/?utm_source=google&utm_medium=cpc&utm_campaign=gg_br_perf_search_general_dynamic&utm_content=114637112560&utm_term=&utm_id=go_cmp-11023932452_adg-114637112560_ad-475740771812_dsa-19959388920_dev-c_ext-_prd-_sig-Cj0KCQiAx9mABhD0ARIsAEfpavSlBBU6AEGYCP3_gNwsnPCNApMMvodoMHvLtQVslLJTFlnQ1R4OEgIaAjDFEALw_wcB&gclid=Cj0KCQiAx9mABhD0ARIsAEfpavSlBBU6AEGYCP3_gNwsnPCNApMMvodoMHvLtQVslLJTFlnQ1R4OEgIaAjDFEALw_wcB).

É uma área que está bem ligada às metodologias, hoje se fala muito dos métodos ágeis, se você ainda não sabe o que é isso, dá uma olhada [nesse outro artigo](https://sambatech.com/blog/insights/metodos-ageis/).

Às áreas mais buscadas hoje no mercado relacionada a gestão são:
- [Scrum Master](https://www.youtube.com/watch?v=ijLxEealwNw)
- [PO](https://www.youtube.com/watch?v=NVfza6wOxoU)
- [PM](https://www.youtube.com/watch?v=cy1YwS57wa8)


Por onde começar na Área de Tecnologia

### Introdução

Olá me chamo, espero que você esteja bem! Hoje irei mostrar o que é Lint, quais são os benefícios e como configurá-lo em um projeto [Node](https://nodejs.org/en/) utilizando [Express](https://expressjs.com/) e [Typescript](https://www.typescriptlang.org/).

### Antes de mais nada, o que é Lint

> Linting is the automated checking of your source code for programmatic and stylistic errors. This is done by using a lint tool (otherwise known as linter). A lint tool is a basic static code analyzer.

Simplificando, lint é uma correção automática que algumas ferramentas (como por exemplo [ESLint](https://eslint.org/), [Pylint](https://pypi.org/project/pylint/), entre outras), realizam para padronizar o código com regras pré-definidas.

### Quais as vantagens do Lint?

Uma das maiores vantagens do lint é a padronização, ele analisa todo o código, realiza a correção de forma automática, aplica o padrão pré-definido e alerta caso o mesmo não esteja sendo seguido, levando a uma redução considerável de erros de sintáticos.

Também facilita a integração de um desenvolvedor novo no time (claro que isso envolve outras variáveis), mas apresentar para um dev uma documentação de lint, o ajuda a se encontrar no projeto/produto mesmo sem ter muita noção da regra de negócio.

### Show me the code.

O guia a seguir é realizado utilizando o [Yarn](https://yarnpkg.com/) como gerenciador de pacotes e o [VSCode](https://code.visualstudio.com/) como editor de texto, instale as seguintes extensões em seu editor de texto: [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig), [ESLint](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) e [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).

As configurações tem como base a guia de estilo do [Airbnb](https://github.com/airbnb/javascript), um dos mais utilizados atualmente. Além disso, faço algumas configurações no [ESLint](https://eslint.org/) para facilitar a importação de arquivos [Typescript](https://www.typescriptlang.org/), configuro o [Prettier](https://prettier.io/) para realizar a formatação do estilo e adiciono o [EditorConfig](https://editorconfig.org/) para realizar as configurações do editor.

No terminal crie uma pasta com o comando `mkdir node-template` e, em seguida, entre na pasta utilizando `cd node-template`. Agora utilizaremos o yarn para iniciar um novo projeto:

```bash
$ yarn init -y
```

Em seguida adicione o express:

```bash
$ yarn add express
```

E algumas outras dependências de desenvolvimento:

```bash
$ yarn add @types/express typescript ts-node-dev eslint -D
```

A seguir devemos iniciar as configurações do Typescript com o seguinte comando:

```bash
$ yarn tsc --init
```

Vamos alterar somente as configurações `outDir` e `rootDir`, deixando como esse [gist](https://gist.github.com/melquisedecfelipe/ffd71c3e205418d7afdf1ce7735523f5).

Também será necessário adicionar os seguintes script no `package.json`:

```js
"scripts": {
  "build": "tsc",
  "dev": "ts-node-dev --transpileOnly --ignore-watch node_modules src/server.ts"
},
```

Em seguida, crie uma pasta `src` com um arquivo chamado `server.ts`. A estrutura deve ficar igual a esta:

```
node-template
├── package.json
├── src
│   └── server.ts
├── tsconfig.json
└── yarn.lock
```

Adicione o seguinte código desse [gist](https://gist.github.com/melquisedecfelipe/523c52ab3d4ed5f728124b5923444286) no `server.ts`.

Instale as outras dependências de desenvolvimento:

```bash
$ yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier prettier -D
```

Após isso as configurações serão todas realizadas na raiz do diretório `node-template`. Vamos inicializar o ESLint:

```bash
$ yarn eslint --init
```

Em seguida selecione as seguintes opções:
![Configuração ESLint](https://media.giphy.com/media/VI3CMwizh9j2ay4vVj/giphy.gif)

Substitua as configurações do arquivo `.eslintrc.json` por essas do [gist](https://gist.github.com/melquisedecfelipe/084ca3e4b2c8dea1cf06ee8e78be27c8).

Crie o arquivo `.eslintignore` na raiz e adicione:

```
/*.js
node_modules
dist
```

Crie o arquivo `prettier.config.js` na raiz e adicione:

```js
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
};
```

Por fim, concluímos todas as configurações. Tendo como resultado:
![Resultado](https://media.giphy.com/media/dyoOkM6L6NhmbpPMbj/giphy.gif)

Para inicializar o projeto, basta rodar o seguinte comando:

```bash
$ yarn dev
```

### Conclusão

Seguir uma style guide é uma ótima prática nos dias de hoje e ter um bom lint configurado para isso aumenta demais a produtividade, ainda mais se implementada juntamente com algum padronizador de commit. Não é uma regra nem bala de prata, o time precisa estar bem alinhado. Se não acaba perdendo todo o potencial e melhorias que agregariam na pipeline.

Se você chegou até aqui, **obrigado**!

### Referências

- [melquisedecfelipe/node-template](https://github.com/melquisedecfelipe/node-template)
- [What Is Lint Code? And Why Is Linting Important?](https://www.perforce.com/blog/qac/why-linting-important-and-how-use-lint-tools)
- [airbnb/javascript](https://github.com/airbnb/javascript)
- [List of available rules](https://eslint.org/docs/rules/)
- [Install - Prettier](https://prettier.io/docs/en/install.html)


Configurando ESLint no Node com Express e Typescript

:floppy_disk: Extensions used on AmbevTech Bumblebee team

bumblebee-extension-pack

:tada: Boilerplate with typescript, react and styled components

react-vite

:tada: Boilerplate with typescript, react, next and styled components

cra-template-react-template

:trophy: A node project with typescript and lint

node-template

:ok_hand: Next.js seed app with typescript

Desenvolvedor FullStack

Útilmos Posts

Por onde começar na Área de Tecnologia

Configurando ESLint no Node com Express e Typescript

Útilmos Commits

bumblebee-extension-pack

react-vite

next

cra-template-react-template

node-template

next-seed

Contato

Social