Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adrianomonteiroweb/eslint-config
Como configurar o ESLint em um projeto e adicionar regras lint para adequar as necessidades da aplicação. Contém algumas opções de estilo, mas contém regras melhor adequadas ao ESLint Airbnb.
https://github.com/adrianomonteiroweb/eslint-config
airbnb eslint eslint-airbnb eslint-config eslint-config-airbnb eslint-google eslint-rules eslintrc
Last synced: 2 months ago
JSON representation
Como configurar o ESLint em um projeto e adicionar regras lint para adequar as necessidades da aplicação. Contém algumas opções de estilo, mas contém regras melhor adequadas ao ESLint Airbnb.
- Host: GitHub
- URL: https://github.com/adrianomonteiroweb/eslint-config
- Owner: adrianomonteiroweb
- Created: 2021-11-01T16:44:32.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-14T02:22:02.000Z (over 2 years ago)
- Last Synced: 2023-03-10T18:33:31.024Z (almost 2 years ago)
- Topics: airbnb, eslint, eslint-airbnb, eslint-config, eslint-config-airbnb, eslint-google, eslint-rules, eslintrc
- Language: JavaScript
- Homepage:
- Size: 333 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ESLint-config: Como configurar o ESLint em um projeto + regras lint para adequar as necessidades da aplicação.
*Antes de começar*
- [ ] Garanta que seu NPM está ok em sua máquina para seguir a instalação.
*Instalação*
- [ ] Use o comando abaixo para instalar o ESLint.
```
npm install eslint --save-dev
```
*Configurando*
- [ ] Use o comando abaixo para iniciar a configuração de seu ESLint.
```
npx eslint --init
```
### Aqui começam as configurações do eslint e vou mostrar também a forma como costumo configurar:
*How would you like to use ESLint? / Como você gostaria de usar o ESLint?*
- [ ] To check syntax only / Verificar apenas a sintaxe.
- [ ] To check syntax and find problems / Verificar a sintaxe e encontrar problemas.
- [x] To check syntax, find problems and enforce code style / Verificar a sintaxe, encontrar problemas e aplicar o estilo do código.
*What type of modules does your project use? / Que tipo de módulos seu projeto usa?*
- [x] JavaScript modules (import/export).
- [ ] JCommonJS (require/exports).
*Which framework does your project use? / Qual framework seu projeto usa?*
*OBS: Para um projeto sem framework, basta escolher a opção: None of these.*
- [x] React.
- [ ] Vue.js.
- [ ] None of these / Nenhum desses.
*Does your project use TypeScript? / Seu projeto usa TypeScript?*
- [x] No.
- [ ] Yes.
*Where does your code run? / Onde seu código é executado?*
- [x] Browser.
- [ ] Node.
*How would you like to define a style for your project? / Como você gostaria de definir um estilo para seu projeto?*
- [x] Use a popular style guide / Use um guia de estilo popular.
- [ ] Answer questions about your style / Responda perguntas sobre o seu estilo.
- [ ] Inspect your JavaScript file(s) / Inspecione seus arquivos JavaScript.
### OBS: Caso as opções de estilo do ESLint a seguir não apareça, prossiga com a instalação até o fim e reinicie a configuração com o comando: "npx eslint --init".
*Which style guide do you want to follow? / Qual guia de estilo você deseja seguir?*
- [x] Airbnb: https://github.com/airbnb/javascript
- [ ] Standard: https://github.com/standard/standard
- [ ] Google: https://github.com/google/eslint-config-google
- [ ] XO: https://github.com/xojs/eslint-config-xo
*What format do you want your config file to be in? / Em que formato você deseja que seu arquivo de configuração esteja?*
- [x] JavaScript.
- [ ] YAML.
- [ ] JSON.
*Would you like to install them now with npm? / Gostaria de instalar agora com o npm?*
- [ ] No.
- [x] Yes.
*Ao exibir a mensagem a seguir, seu ESLint foi configurado corretamente!*
Sua configuração já gerou, se tudo deu certo, um arquivo ".eslintrc.js" no diretório raiz de seu projeto. E essa configuração já apresentará aplicação de regras em seu código. Porém, caso queira aplicar regras que irão forçar ainda mais uma melhor escrita de código. Abra o arquivo e aplique suas rules ou siga para a próxima instrução para adicionar as rules desse repositório.
No arquivo oculto chamado ".eslintrc.js" que se encontra neste repositório, você encontrará as rules: {}. Regras para um ESLint que irá melhorar seu código e que você pode alterar como quiser. Aconselho que copie todo o seu conteúdo e substitua pelo gerado na configuração, no caso de uma aplicação ReactJS e ESLint Airbnb ou copie e cole as rules e edite de acordo as suas necessidades.
Dica de extensão no VScode:
Você pode utilizar junto a essa configuração as extensões ESLint e/ou Error Lens. Sim, é possível usar as duas sem conflitos, porém, para alguns projetos a extensão Prettier pode conflitar com a ESLint. Atenção para esse detalhe.
Pesquise a extensão ESLint na sessão de extensões em seu VScode ou clique Aqui
Pesquise a extensão Error Lens na sessão de extensões em seu VScode ou clique Aqui
