Node.js + Express + ES6 + ESLint + Prettier + Sucrase de forma simples e rápida

Image for post
Image for post

Livros

ESLint vs Prettier

ESLint

Prettier

Propósitos diferentes que se complementam

O ESLint também consegue identificar quebra de estilos. Então não preciso do Prettier, correto?
Instalar o ESLint e o Prettier não vai gerar conflito? Tipo, o ESLint definir que deve usar aspas duplas e o Prettier que às aspas devem ser simples?
Então devo configurar as regras de formatação estética somente no Prettier?

Pré-requisitos

Passos

Crie um diretório; e
Acesse este diretório
yarn init -y
yarn add express cors dotenv
yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier sucrase nodemon -D
yarn eslint --init
Image for post
Image for post
Imagem 1: define como o ESLint irá funcionar, verificando a sintaxe e rastreando problemas.
Image for post
Image for post
Imagem 2: define como será feito o import/export de módulos.
Image for post
Image for post
Imagem 3: especifica que não serão utilizados frameworks.
Image for post
Image for post
imagem 4: questiona se iremos utilizar TypeScript
Image for post
Image for post
Imagem 5: define que o código irá rodar sobre o Node, ou seja, no back-end.
Image for post
Image for post
Imagem 6: especifica que o arquivo de configurações do ESLint seguirá o formado JSON.
{
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
}
}
{
"env": {
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"prettier"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
PORT=3000
import 'dotenv/config'
import cors from 'cors'
import express from 'express'
const app = express()// Permite acesso externo
app.use(cors())
// Desativa o X-Powered-By: Express
app.disable('x-powered-by')
// Criamos uma rota raiz com o texto Hello World!
app.get('/', (req, res) => {
res.send('Hello World!')
})
// Passamos a porta onde o servidor ficará ouvindo
app.listen(process.env.PORT || 3000, () => {
console.log(`Listening on port: ${process.env.PORT}`)
})
{
"name": "teste",
"version": "1.0.0",
"main": "./src/index.js",
"license": "MIT",
"scripts" : {
"dev": "nodemon --exec sucrase-node ./src/index.js"
},
"dependencies": {
//...
yarn dev

Até o momento

Image for post
Image for post
Imagem 7: exemplo de uso do ESLint e Prettier
Image for post
Image for post
Imagem 8: código corrigido automaticamente pelo ESLint e Prettier

ESLint: autoFixOnSave e validate

"editor.codeActionsOnSave": {},
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
Image for post
Image for post
Imagem 9: visualização em formato json das configurações do VSCode
Image for post
Image for post
Imagem 10: prompt de comandos do VSCode.

ESLint Command Line Interface

Image for post
Image for post
Imagem 11: ESLint sendo utilizado no terminal
yarn eslint index.js
npx eslint index.js
yarn eslint --fix --ext .js src/

Sugestão de leitura

Recomendações para ambiente produtivo

Links alternativos

Palestrante, analista de sistemas e webmaster. Apaixonado pelo universo da tecnologia e um profundo admirador da filosofia do software livre.

Get the Medium app