You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/02-coding-style/article.md
+15-15
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
Наш код повинен бути настільки зрозумілим та читабельним, наскільки це можливо.
4
4
5
-
Насправді, мистецтво програмування — це брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді.
5
+
Насправді мистецтво програмування — це брати складну задачу і писати код, який одночасно і розв'язує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у пригоді.
6
6
7
7
## Синтаксис
8
8
@@ -42,7 +42,7 @@ if (n < 0) {
42
42
43
43
### Фігурні дужки
44
44
45
-
У більшості JavaScript проєктів фігурні дужки написані у так званому "Єгипетському" стилі, де відкриваюча дужка знаходиться не на новому рядку, а на тому ж, що й відповідне ключове слово. Також потрібно додавати пробіл перед відкриваючою дужкою, наприклад:
45
+
У більшості JavaScript проєктів фігурні дужки написані у так званому "Єгипетському" стилі, де дужка що відкриває блок знаходиться не на новому рядку, а на тому ж, що й відповідне ключове слово. Також потрібно додавати перед нею пробіл. Наприклад:
46
46
47
47
```js
48
48
if (condition) {
@@ -56,7 +56,7 @@ if (condition) {
56
56
57
57
Нижче наведені різні варіанти розташування дужок з коментарями, щоб ви змогли самостійно вирішити який варіант є найбільш читабельним.
58
58
59
-
1. 😠 Початківці іноді викорустовують таку конструкцію. Це поганий приклад, фігурні дужки не потрібні:
59
+
1. 😠 Початківці іноді використовують таку конструкцію. Це поганий приклад, фігурні дужки не потрібні:
60
60
```js
61
61
if (n <0) *!*{*/!*alert(`Степінь ${n} не підтримується`);*!*}*/!*
62
62
```
@@ -76,7 +76,7 @@ if (condition) {
76
76
}
77
77
```
78
78
79
-
Для дуже короткого коду один рядок є прийнятним, наприклад `if (cond) returnnull`. Але блок коду (останній варінт) зазвичай є більш читабельним.
79
+
Для дуже короткого коду один рядок є прийнятним, наприклад `if (cond) returnnull`. Але блок коду (останній варіант) зазвичай є більш читабельним.
80
80
81
81
### Довжина рядка
82
82
@@ -112,7 +112,7 @@ if (
112
112
113
113
- **Горизонтальні відступи: 2 або 4 пробіли.**
114
114
115
-
Горизонтальний відступ робиться за допогою двох або чотирьох пробілів, або за допомогою табуляції (клавіша `key:Tab`). Який відступ вибирати - вирішувати вам. Відступ з пробілам більш поширений на сьогодні.
115
+
Горизонтальний відступ робиться за допомогою двох або чотирьох пробілів, або за допомогою табуляції (клавіша `key:Tab`). Який відступ вибирати - вирішувати вам. Відступ з пробілами більш поширений на сьогодні.
116
116
117
117
Однією з переваг пробілів є те, що пробіли дозволяють більш гнучку конфігурацію відступів, ніж табуляція.
118
118
@@ -129,9 +129,9 @@ if (
129
129
}
130
130
```
131
131
132
-
- **Вертикальні відступи: пусті рядки для розподілу коду на "логічні блоки".**
132
+
- **Вертикальні відступи: пусті рядки для розподілу коду на "логічні блоки".**
133
133
134
-
Навіть окрема фунція може бути розподілена на логічні блоки. У наведенному нижче прикладі, ініціалізація змінних, основний цикл та повернення результату розподілені вертикально:
134
+
Навіть окрема функція може бути розподілена на логічні блоки. У наведеному нижче прикладі, ініціалізація змінних, основний цикл та повернення результату розподілені вертикально:
135
135
136
136
```js
137
137
functionpow(x, n) {
@@ -145,13 +145,13 @@ if (
145
145
}
146
146
```
147
147
148
-
Вставляйте додатковий рядок в тому випадку, коли це робить код зрозумілішим. Не повинно бути більше дев'яти рядків коду підряд без вертикального розподілу.
148
+
Вставляйте додатковий рядок в тому випадку, коли це робить код зрозумілішим. Не повинно бути понад дев'яти рядків коду підряд без вертикального розподілу.
149
149
150
150
### Крапка з комою
151
151
152
152
Крапку з комою треба ставити після кожного виразу, навіть тоді, коли є можливість їх пропустити.
153
153
154
-
Є мови програмування, у яких крапка з комою є дійсно необов'язковими і рідко використовуються. Проте у JavaScript є ситуації коли перенос строки не інтерпретується як крапка з комою, залишаючи код вразливим до помилок. Більше детально про це знайдете у розділі <info:structure#semicolon>.
154
+
Є мови програмування, у яких крапка з комою є дійсно необов'язковими та рідко використовуються. Проте у JavaScript є ситуації коли перенесення строки не інтерпретується як крапка з комою, залишаючи код вразливим до помилок. Більше детально про це знайдете у розділі <info:structure#semicolon>.
155
155
156
156
Якщо ви досвідчений JavaScript програміст, ви можете обрати стиль коду без крапки з комою, наприклад [StandardJS](https://standardjs.com/). Інакше, краще використовувати крапку з комою для того, щоб уникнути підводних каменів. Більшість розробників використовують крапку з комою.
157
157
@@ -281,7 +281,7 @@ function pow(x, n) {
281
281
282
282
Коли всі члени команди використовують посібник зі стилю, код виглядає однаковим, незалежно від того, хто з команди його написав.
283
283
284
-
Звичайно, кожна команда може завжди створити свій посібник зі стилю, але зазвичай в цьому не має потреби. Є багато посібників, серед яких можна вибрати найбільш підходящий.
284
+
Звичайно, кожна команда може завжди створити свій посібник зі стилю, але зазвичай в цьому не має потреби. Є багато посібників, серед яких можна вибрати найбільш відповідний.
285
285
286
286
Деякі популярні посібники:
287
287
@@ -291,7 +291,7 @@ function pow(x, n) {
291
291
- [StandardJS](https://standardjs.com/)
292
292
- (і ще багато інших)
293
293
294
-
Якщо ви початківець, почніть зі шпаргалки наведеної в початку цього розділу. Потім ви зможете обрати один з існуючих посібників, щоб визначити ті правила, які вам більше підходять.
294
+
Якщо ви початківець, почніть зі шпаргалки наведеної в початку цього розділу. Потім ви зможете обрати один з чинних посібників, щоб визначити ті правила, які вам більше підходять.
295
295
296
296
## Автоматичні засоби перевірки (лінтери)
297
297
@@ -307,14 +307,14 @@ function pow(x, n) {
307
307
308
308
Всі вони роблять свою справу. Автор використовує [ESLint](https://eslint.org/).
309
309
310
-
Більшість лінтерів інтегровані в популярні редактори: просто увімкніть відповідний плаґін в редакторі і налаштуйте стиль.
310
+
Більшість лінтерів інтегровані в популярні редактори: просто увімкніть відповідний плагін в редакторі й налаштуйте стиль.
311
311
312
312
Наприклад, для ESLint вам потрібно зробити наступне:
313
313
314
314
1. Встановіть [Node.js](https://nodejs.org/).
315
315
2. Встановіть ESLint, використовуючи команду `npm install -g eslint` (npm – це менеджер JavaScript пакетів (модулів)).
316
316
3. Створіть файл конфігурації `.eslintrc` в корні вашого JavaScript проєкту (у директорії, що містить всі ваші файли).
317
-
4. Встановіть/увімкніть плаґін для вашого редактора, який інтегрується з ESLint. Більшість редакторів мають такий плаґін.
317
+
4. Встановіть/увімкніть плагін для вашого редактора, який інтегрується з ESLint. Більшість редакторів мають такий плагін.
318
318
319
319
Ось приклад файлу `.eslintrc`:
320
320
@@ -337,12 +337,12 @@ function pow(x, n) {
337
337
338
338
Крім того, можна завантажити набори правил з мережі та розширити їх. Дивіться <https://eslint.org/docs/user-guide/getting-started> для отримання більш детальної інструкції зі встановлення.
339
339
340
-
Також, деякі середовища розробки (IDE) мають вбудовані засоби первірки коду, що є зручним, але не таким гнучким в налаштуванні рішенням, як ESLint.
340
+
Також, деякі середовища розробки (IDE) мають вбудовані засоби перевірки коду, що є зручним, але не таким гнучким в налаштуванні рішенням, як ESLint.
341
341
342
342
## Підсумки
343
343
344
344
Всі правила синтаксису, які описані у даному розділі (і в посиланнях на посібники зі стилю коду) мають на меті поліпшити читабельність вашого коду. Всі вони є дискусійними.
345
345
346
-
Коли ми прагнемо писати код "краще", ми повинні задати собі наступні питання: "Що робить код більш читабельним та зрозумілим?" і "Що нам допоможе уникнути помилок?". Це головні моменти, що треба брати до уваги, коли ви вибираєте та дискутуєте з приводу стилю коду.
346
+
Коли ми прагнемо писати код "краще", ми повинні задати собі наступні питання: "Що робить код більш читабельним та зрозумілим?" і "Що нам допоможе уникнути помилок?". Це головні моменти, що треба брати до уваги, коли ви вибираєте та дискутуєте з приводу стилю коду.
347
347
348
348
Читання популярних посібників зі стилю коду дозволить вам бути в курсі найкращих практик та останніх ідей щодо стилю коду.
0 commit comments