setup-node-app-win.md

Setup de projeto Node.js em Windows (resumo)

1. Instalação:

Instalar os seguintes programas:

• Node.js;
• Visual Studio Code;

Instalar os seguintes plugins do visual studio:

• ESLint
• EditorConfig for VS Code

2. Inicializar o diretório

Abrir um prompt, executar o script abaixo (tem que ser o CMD.exe - não funciona no powershell ou CMDER.):

del /f /s /q node-app 1>nul & ^
rmdir /s /q node-app & ^
mkdir node-app && ^
cd node-app && ^
npm init -y && ^
echo console.log('hello world!'); > index.js && ^
npm install eslint prettier --save-dev && ^
code . && ^
exit

3. Definir as configurações do Editor

No VSCode:

1. Clicar com o botão direito no Explorer (painel da direita);
2. Escolher a opção: "Generate .editorconfig";
3. Será criado um arquivo .editorconfig;
4. Substitua o conteúdo por:

root = true

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

4. Configuração do ESLint

Abrir o prompt integrado do VS Code (CTRL + ').
Digitar o comando:

npx eslint --init

Escolher as opções:

? How would you like to use ESLint?                       To check syntax, find problems, and enforce code style 
? What type of modules does your project use?             CommonJS (require/exports)
? Which framework does your project use?                  None of these 
? Does your project use TypeScript?                       No 
? Where does your code run?                               Node 
? How would you like to define a style for your project?  Use a popular style guide 
? Which style guide do you want to follow? Airbnb:        standard 
? What format do you want your config file to be in?      json 

5. Configurar integração do ESLint com o Prettier

Seguir os procedimentos do link abaixo:
https://prettier.io/docs/en/integrating-with-linters.html

Testar com o comando abaixo:

npx eslint './**/*.js'

6. Criar um arquivo de configuração para o Prettier

Criar um arquivo .prettierrc.js.
Substituir o conteúdo do arquivo por:

module.exports = {
  singleQuote: true,
  trailingComma: 'none',
  endOfLine: 'auto'
}

7. Testar modo FIX

Digitar o comando:

npx eslint './**/*.js' --fix

8. Configurar auto-save no Visual Studio Code

Incluir as linhas no arquivo de configuração do usuário no Visual Studio Code (settings.json) :

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

9. Inserir scripts no arquivo Package.json

Inserir linha no package.json:

"lint": "eslint \"./**/*.js\""

Testar o comando:

npm run lint