Ein neuer Blick auf den Codestil

Wie können Kenntnisse der Neuropsychologie einem Programmierer helfen, Code zu formatieren? Bevor ich mit dem Programmieren anfing, habe ich sehr lange Neuropsychologie studiert. Dieses Wissen hat mir später geholfen, in kurzer Zeit hohe Entwicklungsergebnisse zu erzielen.

In diesem Artikel möchte ich meine Erfahrungen und Herangehensweisen an das Code-Styling teilen. Wir werden die Stilisierung auf der Programmierseite betrachten und dann die Neuropsychologie ansprechen, um ein tieferes Verständnis des Prozesses und seiner Bedeutung für den Entwickler zu erhalten. Letztes Jahr habe ich bei Secreate gearbeitet, wo ich mobile Anwendungen mit dem React Native-Framework entwickle. Die Codebeispiele in diesem Artikel sind daher in Javascript. Das in diesem Artikel gewonnene Wissen kann problemlos auf jede Programmiersprache angewendet werden. Am Ende des Artikels finden Sie nützliche Beispiele für das Code-Styling. Viel Spaß beim Lesen!

Was ist Stilisierung?

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
}

Trennen Sie Schlüsselwörter durch eine Leerzeile.

Beispiel:

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

  return result
}

Oder:

if (condition) {
  do this

} else {
  do that
}

 

switch (value) {
  case someCase:
    do this

    break

  case anotherCase:
    do that

    break
}

Trennen Sie Funktionsdeklarationen und Aktionen verschiedener Typen durch eine Leerzeile

Beispiel:

function someFunction() {
  do something
}

function anotherFunction() {
  do another thing
}

Oder:

function someFunction() {
  const someConst
  const anotherConst

  let someLet
  let anotherLet

  if (condition) {
    do something
  }

  this.function()
  this.anotherFunction()
}

Reihenfolge der Elemente

Befolgen Sie eine strikte Abfolge von Elementen.

Ein Beispiel für eine Erweiterungsklasse React.Component:

1. Statisch.
2. Klassenfelder.
3. Konstrukteur
4. Zustand.
5. Lebenszyklusfunktionen.
6. Sekundärfunktionen.
7. Aktionshandler.
8. Hilfsprogramme zum Rendern.
9. Machen.

Trennen Sie das selbstschließende Tag durch ein Leerzeichen.

Beispiel:

<View style={styles.underline} />

Übertragen Sie Requisiten in die nächste Zeile, wenn mehr als eine vorhanden ist

Beispiel:

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

Lange Bedingungen

Teilen Sie lange Bedingungen in mehrere Zeilen auf und beginnen Sie jede Zeile mit einem bedingten Zeichen.

Beispiel:

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

Oder:

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

Trennen Sie bedingte Zeichen durch Leerzeichen

Beispiel:

const sum = a + b

Oder:

return a < b ? a : b

Oder:

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