Uma nova visão do estilo do código

Como o conhecimento de neuropsicologia pode ajudar um programador a estilizar códigos? Antes de começar a programar, estudei neuropsicologia por muito tempo. Posteriormente, esse conhecimento me ajudou a alcançar altos resultados no desenvolvimento em um curto período de tempo.

Neste artigo, quero compartilhar minha experiência e abordagem ao estilo de código. Consideraremos a estilização no lado da programação e, em seguida, abordaremos a neuropsicologia para uma compreensão mais profunda do processo e seu grau de importância para o desenvolvedor. No ano passado, trabalhei na Secreate, onde desenvolvo aplicativos para dispositivos móveis usando a estrutura React Native. Portanto, os exemplos de código deste artigo estarão em Javascript. O conhecimento adquirido neste artigo pode ser facilmente aplicado a qualquer linguagem de programação. No final do artigo, você encontrará exemplos úteis de estilo de código. Gostar de ler!

O que é estilização?

code style. — , : , , , . , -. .

:

import {SomeClass} from ‘some/file’

:

import { SomeClass } from ‘some/file’

:

import {SomeClass, someFunction, someConst, AnotherClass       } from ‘some/file’

:

import {
  SomeClass,
  somefunction,
  someConst,
  AnotherClass,
       
} from ‘some/file’

:

function foo() {
  some code...
}

:

function foo ()
{
  some code…
}

:

condition ?
some very long long long long long expression :
another expression

:

condition
  ? some very long long long long long expression
  :  another expression

. , , , .

. , . . , . , , , . . , . . . , . — !

? , . . , , . ? , , .

, . . . , , . . , ( ).

. , . . , . . : , , . . , . , .

. , , . , . , ( ). ( ). , , . , , .

. , — , , . - . — . , , . - , , . , . .

, . , , . , , , . , “ ”.

, . , , . - , code style.

, . , , . , , . . , . , . .

, . , .

. , . ( ) .

2 . , .

:

<View>
  <Text>Some text</Text>
  <TouchableOpacity>
    <Text>Title</Text>
  <TouchableOpacity/>
</View>

Animated.timing(
  animatedValue,
  {
    toValue: someValue,
    duration: someDuration,
    anotherOptions,
  },
)

, .

const object = { field: value, anotherField: value }

, , .

const object = {
  field: value,
  anotherField: value,
  moreFields,
}

. .

:

function someFunction() {
  some code
}

Separe as palavras-chave com uma linha em branco.

Exemplo:

function sum(a, b) {
  const result = a + b

  return result
}

Ou:

if (condition) {
  do this

} else {
  do that
}

 

switch (value) {
  case someCase:
    do this

    break

  case anotherCase:
    do that

    break
}

Declarações de função e ações separadas de diferentes tipos com uma linha em branco

Exemplo:

function someFunction() {
  do something
}

function anotherFunction() {
  do another thing
}

Ou:

function someFunction() {
  const someConst
  const anotherConst

  let someLet
  let anotherLet

  if (condition) {
    do something
  }

  this.function()
  this.anotherFunction()
}

Sequência de elementos

Siga uma sequência estrita de elementos.

Um exemplo de uma classe de extensão React.Component:

1. Estático.
2. Campos de classe.
3. Construtor
4. Estado.
5. Funções do ciclo de vida.
6. Funções secundárias.
7. Manipuladores de ação.
8. O auxiliar processa funções.
9. Render.

Separe a tag de fechamento automático com um espaço.

Exemplo:

<View style={styles.underline} />

Transfira adereços para a próxima linha, se houver mais de um

Exemplo:

<TouchableOpacity
  style={styles.button}
  onPress={this.handlePress}
>
  <Text>Title</Text>
</TouchableOpacity>

Condições longas

Divida as condições longas em várias linhas, iniciando cada linha com um caracter condicional.

Exemplo:

if (
  condition
  && anotherCondition
  && (
    value < anotherValue
    || someCondition
  )
) {
  do something
}

Ou:

<View>
  {
    this.state.isButtonVisible
      ? (
        <TouchableOpacity>
          <Text>Title</Text>
        </TouchableOpacity>
      )
      : null
  }
</View>

Separe caracteres condicionais com espaços

Exemplo:

const sum = a + b

Ou:

return a < b ? a : b

Ou:

const object = {
  field: value,
  ...value > 0 ? { value } : {},
}