Novatics Style Guide - React

Melhores práticas

Guia de estilo do Airbnb React / JSX Uma abordagem bastante razoável para React e JSX

Este guia de estilo é baseado principalmente nos padrões que prevalecem atualmente em JavaScript, embora algumas convenções possam variar adotamos e estendemos o guia de estilo do Airbnb e aplicamos algumas regras que achamos mais interessante trazendo para o contexto de projetos e aplicações amplas.

Instalação

Para instalar e salvar em suas dependências package.json, execute:

1
2npm i @novatics-tools/eslint-config-react
3
4ou
5
6yarn add @novatics-tools/eslint-config-react
7

Eslint

1// .eslintrc.js
2module.exports = {
3  extends: ["@novatics-tools/eslint-config-react"],
4};

Prettier

Porque utilizamos o prettier?

• Você pressiona salvar e o código é formatado
• Não há necessidade de discutir o estilo na revisão do código
• Economiza tempo e energia

1// prettier.config.js
2module.exports = {
3  printWidth: 100,
4  tabWidth: 2,
5  singleQuote: true,
6  arrowParens: "avoid",
7  semi: false,
8};

Extenções

1"airbnb"; // https://www.npmjs.com/package/eslint-config-airbnb
2"airbnb/hooks"; // https://www.npmjs.com/package/eslint-config-airbnb
3"plugin:import/recommended"; // https://www.npmjs.com/package/eslint-plugin-import
4"plugin:react/recommended"; // https://www.npmjs.com/package/eslint-plugin-react
5"plugin:prettier/recommended"; // https://github.com/prettier/eslint-plugin-prettier
6"plugin:react-hooks/recommended"; // https://www.npmjs.com/package/eslint-plugin-react-hooks

Regras

1"react/jsx-filename-extension"; // Arquivos que podem usar o conceito de JSX
2"react/jsx-props-no-spreading"; // Desabilita a regra de não fazer spread em props exemplo: <div {...props} /> agora é aceito.
3"react/react-in-jsx-scope"; // React 17 não precisamos mais ter a React importado no arquivo.
4"space-infix-ops"; // Embora as preferências de formatação sejam muito pessoais, vários guias de estilo exigem espaços ao redor dos operadores, como: let sum = 1 + 2;
5"prefer-spread"; // No ES2015, pode-se usar a sintaxe de propagação para chamar funções variáveis. Math.max(...args);
6"no-multi-spaces"; // Esta regra visa proibir vários espaços em branco em torno de expressões lógicas, expressões condicionais, declarações, elementos de array, propriedades de objeto, sequências e parâmetros de função.
7"class-methods-use-this"; // Se um método de classe não usar this, às vezes pode ser transformado em uma função estática.
8"arrow-parens"; // Esta regra impõe o uso consistente de parênteses nas arrow functions.
9"import/prefer-default-export"; // Quando houver apenas uma exportação de um módulo, prefira usar a exportação padrão em vez da exportação nomeada.
10"import/no-unresolved"; // Por padrão, apenas as importações ES6 serão resolvidas
11"consistent-return"; // Remove obrigatoriedade de sempre ter um retorno nas funções
12"no-var"; // Não é possível usar var
13"quotes"; // Aspas simples
14"semi"; // Ponto e virgular sempre
15"complexity"; // Máximo de complexidade em uma função ou arquivo
16"import/extensions"; // Proíbe a importação com a extensão exemplo: home.jsx
17"max-lines"; // Máximo de 200 linhas por arquivo