roymas100/projeto-node

Iniciando projeto com node

Projeto-node

Criado no intuito de ser um guia para futuros projetos

Tabela de conteúdos

• Pre-requisitos
• Configurando estrutura
  • Passo 1 - Baixar dependencias
  • Passo 2 - Configurar 'tsconfig.json'
  • Passo 3 - Configurar scripts no 'package.json'
• Configurando EditorConfig, ESlint e Prettier
  • Configurando EditorConfig
  • Configurando ESLint
  • Configurando Prettier
• VSCode Debug Configuration
• Descrevendo arquitetura do software
• Configurando Docker
• Configurando TypeORM

Pre-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:

• Git,
• Node.js,
• yarn.

Além disto é bom ter um editor para trabalhar com o código como:

• VSCode.

Configurando estrutura / express, typescript

Passo 1 - Baixar dependencias

yarn add express

yarn add typescript @types/express -D

yarn tsc --init

Obs.: Quando tiver alguma dependencia que não está sendo lida, tente " @types/xxxx -D ".

Passo 2 - Configurar 'tsconfig.json'

Em tsconfig.json, descomente as duas linhas outDir e rootDir, e deixe como está abaixo:

    "outDir": "./dist",
    "rootDir": "./src",

Passo 3 - Configurar scripts no 'package.json'

Instale a dependencia como desenvolvimento:

yarn add ts-node-dev -D

Vá ao package.json e adicione os scripts conforme abaixo:

{
  ...
  "scripts": {
    "build": "tsc",
    "dev:server": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules src/server.ts"
  },
  ...
}

Configurando EditorConfig, ESlint e Prettier

Tutorial do Notion - Imagens também de sua autoria.

• EditorConfig, ESlint e Prettier

Configurando EditorConfig

Procure nas extensões do VSCode, a extensão EditorConfig for VS Code, assim como a imagem abaixo:

Depois de instalada, ao clicar com o botão direito sobre o explorador de arquivos do projeto vamos selecionar a opção Generate .editorconfig

Modifique o arquivo gerado, editorconfig, como está abaixo:

root = true

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

Configurando ESLint

Baixe a dependencia eslint

yarn add eslint -D

Inicialize a configuração

yarn eslint --init

1. To check syntax, find problems and enforce code style
2. Javascript modules (import/export)
3. None of these
4. Yes (for TypeScript)
5. Node
6. Use a popular style guide
7. Airbnb
8. JSON
9. No (já que usamos yarn)

Adiocione as depedencias manualmente já que não é instalado pelo npm

yarn add @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint-plugin-import@^2.21.2 @typescript-eslint/parser@latest -D

Crie um arquivo na raiz do projeto .eslintignore

/*.js
node_modules
dist

No .eslintrc.json:

Adicione em extends

"plugin:@typescript-eslint/recommended"

Adicione depois de rules

"settings": {
	    "import/resolver": {
	      "typescript": {}
	    }
	  }

Adicione em rules

"import/extensions": [
	      "error",
	      "ignorePackages",
	      {
	        "ts": "never"
	      }
	    ]

Exemplo:

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
				"plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
	   	"import/extensions": [
	      "error",
	      "ignorePackages",
	      {
	        "ts": "never"
	      }
	    ]
	  },
	  "settings": {
	    "import/resolver": {
	      "typescript": {}
	    }
	  }
}

Configurando Prettier

Instale as dependencias do prettier com eslint

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Modifique o arquivo .eslintconfig, na sessão extends

"prettier/@typescript-eslint",
"plugin:prettier/recommended"

E em plugins

"prettier"

Em rules

"prettier/prettier": "error"

Exemplo:

{
	...
  "extends": [
		...
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  ...
  "plugins": [
    ...
    "prettier"
  ],
  "rules": {
    ...
		"prettier/prettier": "error"
  },
  ...
}

Crie um prettier.config.js e adicione:

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

Configurando Debug do VSCode

Aperte CTRL + SHIFT + D no VSCode.

Clique ona opção create a launch.json file. e coloque código abaixo no arquivo criado:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "protocol": "inspector",
            "restart": true,
            "name": "Debug",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

Descrevendo arquitetura do software

• Repositórios, services & patterns.

Configurando Docker

• Configurando docker

Instale a dependencia do postgres

yarn add pg

Configurando TypeORM

• TypeORM-Configuration