eslint.md

ESLint

Ferramenta para identificar e relatar padrões em JavaScript.

Documentação

Clique aqui para ver a documentação.

Instalação

Clique aqui para fazer a instalação.

Instalar como dependência de desenvolvimento:

npm install eslint --save-dev | yarn add eslint --dev

É necessário setar um arquivo de configuração com o comando:

npx eslint --init | yarn eslint --init

Se instalar o ESLint com o Yarn, ele criará o arquivo package-lock.json, então depois que terminar a instalação e configuração, delete o arquivo e execute o comando abaixo para instalar as dependências com o yarn:

yarn

Instalação no projeto Node.js

Para um projeto Node.js, as configurações são:

_{How would you like to use ESLint? To check syntax, find problems, and enforce code style}

Se estiver utilizando o Sucrase:
_{What type of modules does your project use? JavaScript modules (import/export)}
Senão estiver:
_{What type of modules does your project use? CommonJS (require/exports)}

_{Which framework does your project use? None of these}

_{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 (https://github.com/airbnb/javascript)}

_{What format do you want your config file to be in? JavaScript}

_{Would you like to install them now with npm? (Y/n) Y}

Instalação no projeto ReactJS sem Create React

Para um projeto ReactJS sem Create React App, as configurações são:

_{How would you like to use ESLint? To check syntax, find problems, and enforce code style}

_{What type of modules does your project use? JavaScript modules (import/export)}

_{Which framework does your project use? React}

_{Does your project use TypeScript? No}

_{Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection) Browser}

_{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 (https://github.com/airbnb/javascript)}

_{What format do you want your config file to be in? JavaScript}

_{Would you like to install them now with npm? (Y/n) Y}

Instalação no projeto ReactJS com Create React App

Para um projeto ReactJS com Create React App, o ESLint já vem instalado.

Então, precisa instalar somente o eslint-config-airbnb e suas dependências: eslint-plugin-import, eslint-plugin-jsx-a11y e eslint-plugin-react.

E criar o arquivo .eslintrc manualmente.

Instalação no projeto React-Native

_{How would you like to use ESLint? To check syntax, find problems, and enforce code style}

_{What type of modules does your project use? JavaScript modules (import/export)}

_{Which framework does your project use? React}

_{Does your project use TypeScript? No}

_{Where does your code run? Não selecionar nenhuma das opções}

_{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 (https://github.com/airbnb/javascript)}

_{What format do you want your config file to be in? JavaScript}

_{Would you like to install them now with npm? (Y/n) Y}

Comandos

Para realizar um fix em vários arquivos de uma pasta:

npx eslint --fix <pasta> --ext <extensao> | yarn eslint --fix <pasta> --ext <extensao>

Onde:

• <pasta> - pasta onde vai ocorrer o fix. Ex: src
• <extensao> - extensão dos arquivos que vão ocorrer o fix. Ex: .js