Giter VIP home page Giter VIP logo

eslint-config-rocketseat's Introduction

Rocketseat ESLint config

Whats included?

  • Standard config base;
  • React plugin;
  • React Hooks plugin;
  • JSX a11y plugin;
  • Prettier;

Setup

React (with Next.js)

Install dependencies:

npm i -D eslint @rocketseat/eslint-config

Inside .eslintrc.json

{
  "extends": [
    "@rocketseat/eslint-config/next", 
    "next/core-web-vitals"
  ]
}

React (without Next.js)

Install dependencies:

npm i -D eslint @rocketseat/eslint-config

Inside .eslintrc.json

{
  "extends": "@rocketseat/eslint-config/react"
}

Node.js

Install dependencies:

npm i -D eslint @rocketseat/eslint-config

Inside .eslintrc.json

{
  "extends": "@rocketseat/eslint-config/node"
}

eslint-config-rocketseat's People

Contributors

cleisonmp avatar diego3g avatar josepholiveira avatar ldgmaia avatar ranierimarques avatar yagoinacio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

eslint-config-rocketseat's Issues

Não formata

Olá tudo bem.
Engraçado do nada parou de formatar

.eslintrc.json
{
"extends": "@rocketseat/eslint-config/node"
}

tentei usar o comando
yarn eslint --fix src --ext .ts

ESLint couldn't find the config "@rocketseat/eslint-config/react" to extend from. Please check that the name of the config is correct.

The config "@rocketseat/eslint-config/react" was referenced from the config file in "/home/felipe/Desktop/treinamento/app/.eslintrc.json".

Vlw gente.

Lint Error

info Linting and checking validity of types ...- error ESLint: Cannot read properties of undefined (reading 'parsers') Occurred while linting /home/delanhese/Documents/ecode-projects/gazin/portal-respresentante-gazin/src/app/(auth)/layout.tsx:1 Rule: "prettier/prettier"

Error when running the linter, apparently the Prettier settings for the latest version of the linter are incorrect.

(React Native): Não acusou erro após seguir os passos de instalação (Mesmo com os arquivos fora do padrão)

Nesse caso, mesmo após seguir os passos de instalação

npm i -D @rocketseat/eslint-config eslint

e criar um arquivo ".eslintrc.json" na raiz do projeto com as seguintes informações:

{ "extends": "@rocketseat/eslint-config/react" }

Os arquivos do projeto não estavam sendo afetados pelo lint. Para isso, precisei rodar, além dos comandos da doc o seguinte:

npm i -D eslint-plugin-prettier

Logo após isso, começou a funcionar tranquilamente.

react hooks rules

I created a project from scratch with Vite + Typescript and I've added the eslint-config-rocketseat to it.

It's working fine for everything but the react hooks rules.

For example, I have a useEffect without declaring its dependencies and it's not throwing any red lines there.

Is there an additional config that I need to make in order to have it working?

This is my .eslintrc.json

{
  "extends": ["@rocketseat/eslint-config/react"]
}

No Useless Constructor

Description

I'm using the eslint-config for nextjs and I'm having some issues when using constructor shorthand while creating my module classes. I would like to know if is it possible to add the rules above to the lint setup

How to reproduce the error:

1- Create a nextjs project with typescript
2- add rocketseat eslint config on your .eslintrc
3- create a typescript class like the example bellow:

export class ExampleClass {
  constructor(private foo:string) {}
}

4- view an error similar to this one:

Useless constructor.eslint[no-useless-constructor](https://eslint.org/docs/latest/rules/no-useless-constructor)

Possible solution:

I've bypassed this error by adding thoose rules bellow:

{
  // note you must disable the base rule as it can report incorrect errors
  "no-useless-constructor": "off",
  "@typescript-eslint/no-useless-constructor": ["error"]
}

NextJS lint not working

I installed the package and followed README instructions for Next.js and eslint did not work. I realized it was because I didn't have eslint-config-next installed. The next linting package should be included by default as all others are.

image

Adaptação para o eslint v9

O modelo do config como .eslintrc.json não é mais aceito.
Agora temos o eslint.config.js, porém, no formato flat.

Na versão 8x o eslintrc ainda funcionava apesar de estar deprecated, mas agora ele não é mais reconhecido.

Sugiro que defina a versão 8.56 fixo nas dependências, ou, que seja efetuada a adaptação para o modelo flat.

Ou até mesmo deixe como 8.56 paliativamente até que seja efetuada a adaptação. Porém, do jeito que está, ele está baixando a versão 9.x e dando erros no output do eslint.

Plugin "react-hooks" was conflicted

A versão 1.3.0 da tendo conflito com eslint-config-next/core-web-vital no Next.JS

Captura de tela 2023-07-09 213407

Minha importação no eslint.json

Captura de tela 2023-07-09 213714

Acabei resolvendo o problema apagando o plugin react-hoocks/recommended no react.js do pacote.

Captura de tela 2023-07-09 214211 Captura de tela 2023-07-09 214246

rule "prettier/prettier": [ "error", { "semi": false }] com bug de formatação

Notei um comportamento estranho durante o uso da biblioteca e está representado em um exemplo na imagem abaixo.

Isso acontece quando tem um arquivo que pode ser: classe, classe abstrata ou função de corpo vazio,

  • Se o arquivo utiliza uma única linha de importação, a autocorreção do eslint remover os ; do final da linha, e algum conflito de formatador fica devolvendo o mesmo.
  • Se o arquivo utiliza duas ou mais linhas de importação, o eslint consegue resolver sem nenhum problema.

image

  • estou usando o vscode no ubuntu versão 1.89.1
  • a extensão do eslint na versão 2.4.4
  • não tenho instalado a extensão do prettier
  • o projeto está usando o eslint na versão 8.57.0

meu arquivo settings.json tem essa configuração

{
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },
}

Configure tab width

I normally use the property tabWidth configurated in 4 spaces in VS Code. So I'm getting prettier/prettier error forcing me to use 2 spaces.

How do I configure this (and prettier options in general).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.