Novatics Style Guide - React Typescript

Melhores práticas

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

Este guia de estilo é baseado principalmente nos padrões que prevalecem atualmente em Typescript, 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-typescript
3
4ou
5
6yarn add @novatics-tools/eslint-config-react-typescript
7

Eslint

1// .eslintrc.js
2module.exports = {
3  parserOptions: {
4    project: "./tsconfig.json",
5  },
6  extends: ["@novatics-tools/eslint-config-react-typescript"],
7};

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};

Extends

Extends do @novatics-tools/eslint-config-react são utilizadas.

1...@novatics-tools/eslint-config-react
2'airbnb-typescript'; // https://www.npmjs.com/package/eslint-config-airbnb
3'plugin:@typescript-eslint/recommended'; // https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

Rules

Rules do @novatics-tools/eslint-config-react são utilizadas.

1...@novatics-tools/eslint-config-react
2'@typescript-eslint/no-unused-vars'; // Variáveis ​​que são declaradas e não usadas em nenhum lugar do código são provavelmente um erro devido à refatoração incompleta.
3'@typescript-eslint/no-explicit-any'; // Usar o any tipo anula o propósito de usar o TypeScript. Quando any é usado, todas as verificações de tipo de compilador em torno desse valor são ignoradas.
4'@typescript-eslint/explicit-function-return-type'; // Isso garante que o valor de retorno seja atribuído a uma variável do tipo correto
5'@typescript-eslint/explicit-member-accessibility'; // Deixar de lado o modificador de acessibilidade e tornar tudo público pode tornar sua interface difícil de usar por outras pessoas.
6'@typescript-eslint/no-namespace'; // Módulos TypeScript personalizados ( module foo {}) e namespaces ( namespace foo {}) são considerados formas desatualizadas de organizar o código TypeScript.
7'@typescript-eslint/explicit-module-boundary-types'; // Tipos explícitos para valores de retorno de função e argumentos tornam claro para qualquer código de chamada qual é a entrada e saída do limite do módulo.
8'react/prop-types'; // Remove regras de prop-types
9