Code
Quality

Automatizando a Revisão do Código

Monica Lent

?

O que?

O Problema?

Como Melhorar?

Andrei Calazans

@AndreiCalazans

@Andrei_Calazans

g2i.co

O QUE VOCÊ REVISA?

Google's Engineering Practices

Design

Functionality

Complexidade

Testes

Nomeclatura

Comentários & Documentação

Linha por linha & Contexto & Boas coisas

  1. Testes
  2. Legibilidade & Complexidade
  3. Errors
  4. Regras & Padrões
 

Qual o Problema?

Emocional

Lento

Fragil

Informação do codebase retrista à pessoas.

1

TESTES

Cobertura

coverageThreshold

coverageThreshold: {
    global: {
      branches: 100,
      functions: 100,
      lines: 100,
      statements: -10
    }
  },

2

LEGIBILIDADE & COMPLEXIDADE

Thomas J. McCabe’s Cyclomatic Complexity - 1976

Sonar JS

  1. Cognitive Complexity of functions should not be too high (cognitive-complexity)
  2. "switch" statements should not have too many "case" clauses (max-switch-cases)
  3. Collapsible "if" statements should be merged (no-collapsible-if)
  4. String literals should not be duplicated (no-duplicate-string)
  5. Two branches in a conditional structure should not have exactly the same implementation (no-duplicated-branches)
  6. Functions should not have identical implementations (no-identical-functions)
  7. Boolean checks should not be inverted (no-inverted-boolean-check)
  8. Boolean literals should not be redundant (no-redundant-boolean)
  9. "switch" statements should have at least 3 "case" clauses (no-small-switch)
  10. "catch" clauses should do more than rethrow (no-useless-catch)
  11. Local variables should not be declared and then immediately returned or thrown (prefer-immediate-return) (🔧 fixable)
  12. Object literal syntax should be used (prefer-object-literal)
  13. Return of boolean expressions should not be wrapped into an "if-then-else" statement (prefer-single-boolean-return)
  14. A "while" loop should be used instead of a "for" loop (prefer-while) (🔧 fixable)

Sonar JS - No Identical functions

Sonar JS

Cognitive complexity

Cognitive complexity

Declarative code

No loops?

Enforce Functional Style?  (eslint-plugin-functional)

// eslint-disable-next-line no-loops/no-loops
for (let i = 0; i < arr.length; i++) {
  // ...
}

Spell Checking

eslint-plugin-spellchecker

JSDOC

Docz

StoryBook

3

ERRORS

ESLINT

STATIC TYPER

Impact Surface

4
REGRAS & PADRÕES

Testando Arquitetura

Estrutura & Nome

Forbidden Dependecy test

{
  "name": "from-svod-to-avod",
  "comment": "we can not import from avod when in svod",
  "severity": "error",
  "from": {
    "path": "svod"
  },
  "to": {
    "path": "avod"
  }
},

dependency-cruiser

Dependency Graph

Reutilizando & Duplicação

JSCP

jscpd apps/svod/src/mobile

ACABOU?

INDO ALÉM

ESLINT CUSTOM PLUGINS

AST

function foo(d) {
  d += 3;
    return d+999
}
function bar(d) {
    return d*100
}

ESTREE

ESPREE-BASED AST

ESLINT =

ESPREE + ESTRAVERSE

ASTEXPLORER

Custom Plugin

ESLINT SIMPLE 

ONDE TEM MAIS?

ESLINT Architecture

How linting and ESLint improve code quality

O que o programa não pega?

  1. Over-engineering
  2. Otimização prematura
  3. É uma mudança necessária?
  4. Está completo? 
  5. Esta bem feito?

Referências

  1. Kent writing custom Babel and ESLint plugins with ASTs(Open West 2017).
  2. Yonatan Mevorach's Master the Art of the AST and Take Control of Your JS.
  3. SonarJS: How To Build a Static Code Analyzer - Elena Vilchik & Carlo Bottiglieri
  4. Automated Code Analysis in Salesforce
  5. eslint-plugin-spellcheck
  6. Verfication vs validation
  7. eslint-simple-rule 
  8. Static versus Dynamic code analysis
  9. JSCPD
  10. JSINSPECT
  11. What color is your function?

Referências

12. AST picture: https://sites.psu.edu/robertbcolton/tag/abstract-syntax-tree/

13. https://www.reddit.com/r/typescript/comments/aofcik/38_of_bugs_at_airbnb_could_have_been_prevented_by/

14. Parser API: https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API

15. estree https://github.com/estree/estree 

16. eslint simple https://github.com/humanwhocodes/eslint-simple-rule#readme

 

Obrigado!

Code Quality: Automatizando a revisão do código.

By Andrei Calazans

Made with Slides.com

Code Quality: Automatizando a revisão do código.

  • 1,686

More from Andrei Calazans