Tampilan baru pada gaya kode

Bagaimana pengetahuan neuropsikologi dapat membantu seorang programmer untuk mendesain kode? Sebelum saya mulai pemrograman, saya belajar neuropsikologi untuk waktu yang sangat lama. Selanjutnya, pengetahuan ini membantu saya mencapai hasil tinggi dalam pengembangan dalam waktu singkat.

Pada artikel ini saya ingin berbagi pengalaman dan pendekatan saya untuk styling kode. Kami akan mempertimbangkan gaya bahasa di sisi pemrograman, dan kemudian menyentuh neuropsikologi untuk pemahaman yang lebih dalam tentang proses dan tingkat pentingnya bagi pengembang. Tahun lalu, saya telah bekerja di Secreate, tempat saya mengembangkan aplikasi seluler menggunakan kerangka kerja React Native, jadi contoh kode dalam artikel ini adalah dalam Javascript. Pengetahuan yang diperoleh dari artikel ini dapat dengan mudah diterapkan pada bahasa pemrograman apa pun. Pada akhir artikel Anda akan menemukan contoh-contoh styling kode yang berguna. Selamat membaca!

Apa itu stilisasi?

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
}

Pisahkan kata kunci dengan baris kosong.

Contoh:

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

  return result
}

Atau:

if (condition) {
  do this

} else {
  do that
}

 

switch (value) {
  case someCase:
    do this

    break

  case anotherCase:
    do that

    break
}

Pisahkan deklarasi fungsi dan aksi dari tipe yang berbeda dengan garis kosong

Contoh:

function someFunction() {
  do something
}

function anotherFunction() {
  do another thing
}

Atau:

function someFunction() {
  const someConst
  const anotherConst

  let someLet
  let anotherLet

  if (condition) {
    do something
  }

  this.function()
  this.anotherFunction()
}

Urutan elemen

Ikuti urutan elemen yang ketat.

Contoh kelas ekstensi React.Component:

1. Statis.
2. Bidang Kelas.
3. Konstruktor
4. Negara.
5. Fungsi siklus hidup.
6. Fungsi sekunder.
7. Penangan aksi.
8. Membantu membuat fungsi.
9. Memberikan.

Pisahkan tag penutup diri dengan spasi.

Contoh:

<View style={styles.underline} />

Transfer alat peraga ke baris berikutnya jika ada lebih dari satu

Contoh:

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

Kondisi panjang

Break kondisi panjang menjadi beberapa baris, mulai setiap baris dengan karakter bersyarat.

Contoh:

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

Atau:

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

Pisahkan karakter bersyarat dengan spasi

Contoh:

const sum = a + b

Atau:

return a < b ? a : b

Atau:

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