Un nouveau regard sur le style de code

Comment la connaissance de la neuropsychologie peut-elle aider un programmeur à styliser le code? Avant de commencer la programmation, j'ai étudié la neuropsychologie pendant très longtemps. Par la suite, cette connaissance m'a aidé à obtenir des résultats de développement élevés en peu de temps.

Dans cet article, je veux partager mon expérience et mon approche du style de code. Nous considérerons la stylisation du côté de la programmation, puis aborderons la neuropsychologie pour une compréhension plus approfondie du processus et de son degré d'importance pour le développeur. L'année dernière, je travaillais chez Secreate, où je développe des applications mobiles en utilisant le framework React Native, donc les exemples de code de cet article seront en Javascript. Les connaissances acquises dans cet article peuvent être facilement appliquées à n'importe quel langage de programmation. À la fin de l'article, vous trouverez des exemples utiles de style de code. Bonne lecture!

Qu'est-ce que la stylisation?

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
}

Séparez les mots clés par une ligne vierge.

Exemple:

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
}

Déclarations de fonctions et actions distinctes de différents types avec une ligne vierge

Exemple:

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()
}

Séquence d'éléments

Suivez une séquence stricte d'éléments.

Un exemple de classe d'extension React.Component:

1. Statique.
2. Champs de classe.
3. Constructeur
4. Etat.
5. Fonctions du cycle de vie.
6. Fonctions secondaires.
7. Gestionnaires d'actions.
8. Fonctions de rendu auxiliaires.
9. Rendre.

Séparez la balise à fermeture automatique par un espace.

Exemple:

<View style={styles.underline} />

Transférez les accessoires sur la ligne suivante s'il y en a plusieurs

Exemple:

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

Conditions longues

Divisez les conditions longues en plusieurs lignes, en commençant chaque ligne par un caractère conditionnel.

Exemple:

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

Ou:

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

Séparez les caractères conditionnels par des espaces

Exemple:

const sum = a + b

Ou:

return a < b ? a : b

Ou:

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