@labeg/code-style 6.2.0 → 6.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +135 -135
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,135 +1,135 @@
|
|
|
1
|
-
# CodeStyle
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
В этом репозитории я собираю файлы стилей для облегчения синхронизации между проектами.
|
|
6
|
-
|
|
7
|
-
## Подключение
|
|
8
|
-
|
|
9
|
-
Для подключения необходимо установить пакет командой:
|
|
10
|
-
|
|
11
|
-
```Bash
|
|
12
|
-
npm i -D @labeg/code-style
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Далее в ваш файл eslint config необходимо добавить следующую
|
|
16
|
-
|
|
17
|
-
```Javascript
|
|
18
|
-
module.exports = {
|
|
19
|
-
extends: ["./node_modules/@labeg/code-style/.eslintrc.js"],
|
|
20
|
-
rules:{
|
|
21
|
-
// Override here
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
Версия для NextJS:
|
|
27
|
-
|
|
28
|
-
```Javascript
|
|
29
|
-
module.exports = {
|
|
30
|
-
extends: ["next/core-web-vitals", "./node_modules/@labeg/code-style/.eslintrc.js"],
|
|
31
|
-
rules: {
|
|
32
|
-
// Override here
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
## Рекомендации
|
|
38
|
-
|
|
39
|
-
### Не заканчивать строку ничем
|
|
40
|
-
|
|
41
|
-
Строка всегда должна заканчиваться знаком конца строки или оператором, например ; или +. Делается это для
|
|
42
|
-
|
|
43
|
-
```Typescript
|
|
44
|
-
/**
|
|
45
|
-
* Оператор в конце строки
|
|
46
|
-
*/
|
|
47
|
-
|
|
48
|
-
// Плохо. Глядя на первую
|
|
49
|
-
let sample = sample.sample.sample
|
|
50
|
-
+ sample.sample.sample;
|
|
51
|
-
|
|
52
|
-
// Хорошо. Глядя на первую
|
|
53
|
-
let sample = sample.sample.sample +
|
|
54
|
-
sample.sample.sample;
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Знак конца строки
|
|
58
|
-
*/
|
|
59
|
-
|
|
60
|
-
// Плохо. Выведет 2,2 хотя ожидается 0,2
|
|
61
|
-
var a = 1, b = 0
|
|
62
|
-
if(a>b) a=b
|
|
63
|
-
-b > 0 ? b=1 : b=2;
|
|
64
|
-
alert([a,b])
|
|
65
|
-
|
|
66
|
-
// Плохо, выдаст ошибку исполнения
|
|
67
|
-
var i,s
|
|
68
|
-
s="here is a string"
|
|
69
|
-
i=0
|
|
70
|
-
/[a-z]/g.exec(s)
|
|
71
|
-
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
###
|
|
75
|
-
|
|
76
|
-
Даже если после блока if идет всего
|
|
77
|
-
Во-первых, вы сэкономите время себе же в
|
|
78
|
-
Во-вторых, очень часто люди не
|
|
79
|
-
|
|
80
|
-
```Typescript
|
|
81
|
-
// Плохо
|
|
82
|
-
if (n > 10) alert("Плохо");
|
|
83
|
-
|
|
84
|
-
// Плохо
|
|
85
|
-
if (n > 10)
|
|
86
|
-
alert("Плохо");
|
|
87
|
-
|
|
88
|
-
// Хорошо
|
|
89
|
-
if (n > 10) {
|
|
90
|
-
alert("Хорошо");
|
|
91
|
-
}
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### Используйте двойные кавычки
|
|
95
|
-
|
|
96
|
-
Изначально в более взрослых языках используются " для написания строк, в JS для более простого
|
|
97
|
-
|
|
98
|
-
```Typescript
|
|
99
|
-
const message = "булочек";
|
|
100
|
-
const count = 5;
|
|
101
|
-
|
|
102
|
-
// Плохо
|
|
103
|
-
const data = 'Отправляю "бабушке" ' + count * 5 + ' ' + message + '.';
|
|
104
|
-
|
|
105
|
-
// Хорошо
|
|
106
|
-
const data = `Отправляю "бабушке" ${count * 5} ${message}.`;
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Длина строки 120 символов и отступ 4 пробела
|
|
110
|
-
|
|
111
|
-
У всех разработчиков разные
|
|
112
|
-
|
|
113
|
-
Для вдохновения предлагаю взглянуть на [ядро Linux](https://github.com/torvalds/linux/blob/master/kernel/acct.c).
|
|
114
|
-
|
|
115
|
-
```Typescript
|
|
116
|
-
export class Tabs extends Base {
|
|
117
|
-
// ...
|
|
118
|
-
private onTabClick(tab: Tab): void {
|
|
119
|
-
|
|
120
|
-
if (tab.active) {
|
|
121
|
-
|
|
122
|
-
if (!this._slotElement
|
|
123
|
-
.assignedNodes()
|
|
124
|
-
.some((node: Node) => node instanceof Tab && node.active === true)) {
|
|
125
|
-
|
|
126
|
-
const offset = tab.offsetLeft - tab.parentElement!.offsetLeft;
|
|
127
|
-
const width = tab.offsetWidth;
|
|
128
|
-
this._lineElement.style.marginLeft = `${offset + width / 2}px`;
|
|
129
|
-
this._lineElement.style.width = `0`;
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
```
|
|
1
|
+
# CodeStyle
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
В этом репозитории я собираю файлы стилей для облегчения синхронизации между проектами.
|
|
6
|
+
|
|
7
|
+
## Подключение
|
|
8
|
+
|
|
9
|
+
Для подключения необходимо установить пакет командой:
|
|
10
|
+
|
|
11
|
+
```Bash
|
|
12
|
+
npm i -D @labeg/code-style
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Далее в ваш файл eslint config необходимо добавить следующую строку:
|
|
16
|
+
|
|
17
|
+
```Javascript
|
|
18
|
+
module.exports = {
|
|
19
|
+
extends: ["./node_modules/@labeg/code-style/.eslintrc.js"],
|
|
20
|
+
rules:{
|
|
21
|
+
// Override here
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Версия для NextJS:
|
|
27
|
+
|
|
28
|
+
```Javascript
|
|
29
|
+
module.exports = {
|
|
30
|
+
extends: ["next/core-web-vitals", "./node_modules/@labeg/code-style/.eslintrc.js"],
|
|
31
|
+
rules: {
|
|
32
|
+
// Override here
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Рекомендации
|
|
38
|
+
|
|
39
|
+
### Не заканчивать строку ничем
|
|
40
|
+
|
|
41
|
+
Строка всегда должна заканчиваться знаком конца строки или оператором, например ; или +. Делается это для того, чтобы, глядя всего на одну строку, знать, есть ли у команды продолжение на следующей строке или нет. Тем самым для понимания надо прочитать всего одну строку вместо двух, что экономит время. А отсутствие ; в конце команды может привести к ошибкам исполнения.
|
|
42
|
+
|
|
43
|
+
```Typescript
|
|
44
|
+
/**
|
|
45
|
+
* Оператор в конце строки
|
|
46
|
+
*/
|
|
47
|
+
|
|
48
|
+
// Плохо. Глядя на первую строку, не понятно, это конец команды или надо искать продолжение
|
|
49
|
+
let sample = sample.sample.sample
|
|
50
|
+
+ sample.sample.sample;
|
|
51
|
+
|
|
52
|
+
// Хорошо. Глядя на первую строку, видно, что команда не заканчивается, и стоит искать продолжение на следующей
|
|
53
|
+
let sample = sample.sample.sample +
|
|
54
|
+
sample.sample.sample;
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* Знак конца строки
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
// Плохо. Выведет 2,2, хотя ожидается 0,2
|
|
61
|
+
var a = 1, b = 0
|
|
62
|
+
if(a>b) a=b
|
|
63
|
+
-b > 0 ? b=1 : b=2;
|
|
64
|
+
alert([a,b])
|
|
65
|
+
|
|
66
|
+
// Плохо, выдаст ошибку исполнения
|
|
67
|
+
var i,s
|
|
68
|
+
s="here is a string"
|
|
69
|
+
i=0
|
|
70
|
+
/[a-z]/g.exec(s)
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Фигурные скобки в if
|
|
75
|
+
|
|
76
|
+
Даже если после блока if идет всего одна команда, фигурные скобки все равно ставить обязательно.
|
|
77
|
+
Во-первых, вы сэкономите время себе же в будущем, когда понадобится срочно дополнить условие.
|
|
78
|
+
Во-вторых, очень часто люди не замечают, что строка относится к условию if, и при рефакторинге или удалении строки забывают про if, из-за чего if начинает влиять на другую строку кода.
|
|
79
|
+
|
|
80
|
+
```Typescript
|
|
81
|
+
// Плохо
|
|
82
|
+
if (n > 10) alert("Плохо");
|
|
83
|
+
|
|
84
|
+
// Плохо
|
|
85
|
+
if (n > 10)
|
|
86
|
+
alert("Плохо");
|
|
87
|
+
|
|
88
|
+
// Хорошо
|
|
89
|
+
if (n > 10) {
|
|
90
|
+
alert("Хорошо");
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Используйте двойные кавычки
|
|
95
|
+
|
|
96
|
+
Изначально в более взрослых языках используются " для написания строк, в JS для более простого экранирования было принято писать '. Так было проще для JS-разработчиков. Но теперь существуют шаблонные строки, которые справляются с этой задачей намного лучше. К тому же коллегам с бэкенда будет проще понимать ваш код в случае необходимости.
|
|
97
|
+
|
|
98
|
+
```Typescript
|
|
99
|
+
const message = "булочек";
|
|
100
|
+
const count = 5;
|
|
101
|
+
|
|
102
|
+
// Плохо
|
|
103
|
+
const data = 'Отправляю "бабушке" ' + count * 5 + ' ' + message + '.';
|
|
104
|
+
|
|
105
|
+
// Хорошо
|
|
106
|
+
const data = `Отправляю "бабушке" ${count * 5} ${message}.`;
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Длина строки 120 символов и отступ 4 пробела
|
|
110
|
+
|
|
111
|
+
У всех разработчиков разные мониторы: у кого-то большие, у кого-то маленькие, а кто-то вообще через консоль работает. Поэтому оптимальным размером строки является 120 символов. А использование 4 пробелов для отступа является оптимальным решением для определения уровня вложенности. Некоторые предпочитают использовать 2 пробела для того, чтобы на одну строку больше влезло, но это является плохой практикой, т.к. увеличивает нагрузку на глаза при определении уровня вложенности. Вместо того чтобы впихивать на одну строку больше кода, лучше использовать более удачное форматирование, например, писать более простые функции и использовать "функциональный" стиль для цепочек методов объекта.
|
|
112
|
+
|
|
113
|
+
Для вдохновения предлагаю взглянуть на [ядро Linux](https://github.com/torvalds/linux/blob/master/kernel/acct.c). Посмотрите, как просто написан такой огромный и сложный продукт, а длина строки всего 80 символов.
|
|
114
|
+
|
|
115
|
+
```Typescript
|
|
116
|
+
export class Tabs extends Base {
|
|
117
|
+
// ...
|
|
118
|
+
private onTabClick(tab: Tab): void {
|
|
119
|
+
|
|
120
|
+
if (tab.active) {
|
|
121
|
+
|
|
122
|
+
if (!this._slotElement
|
|
123
|
+
.assignedNodes()
|
|
124
|
+
.some((node: Node) => node instanceof Tab && node.active === true)) {
|
|
125
|
+
|
|
126
|
+
const offset = tab.offsetLeft - tab.parentElement!.offsetLeft;
|
|
127
|
+
const width = tab.offsetWidth;
|
|
128
|
+
this._lineElement.style.marginLeft = `${offset + width / 2}px`;
|
|
129
|
+
this._lineElement.style.width = `0`;
|
|
130
|
+
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@labeg/code-style",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.1",
|
|
4
4
|
"author": "Eugene Labutin",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://github.com/LabEG/code-style#readme",
|
|
@@ -29,27 +29,27 @@
|
|
|
29
29
|
"typescript": ">=5.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@eslint/js": "^9.
|
|
32
|
+
"@eslint/js": "^9.24.0",
|
|
33
33
|
"@stylistic/eslint-plugin": "^4.2.0",
|
|
34
34
|
"@stylistic/eslint-plugin-migrate": "^4.2.0",
|
|
35
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
36
|
-
"@typescript-eslint/parser": "^8.
|
|
37
|
-
"eslint": "^9.
|
|
35
|
+
"@typescript-eslint/eslint-plugin": "^8.29.1",
|
|
36
|
+
"@typescript-eslint/parser": "^8.29.1",
|
|
37
|
+
"eslint": "^9.24.0",
|
|
38
38
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
39
|
-
"eslint-plugin-react": "^7.37.
|
|
39
|
+
"eslint-plugin-react": "^7.37.5",
|
|
40
40
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
41
41
|
"globals": "^16.0.0",
|
|
42
|
-
"typescript-eslint": "^8.
|
|
42
|
+
"typescript-eslint": "^8.29.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@commitlint/cli": "^19.8.0",
|
|
46
46
|
"@commitlint/config-conventional": "^19.8.0",
|
|
47
47
|
"@favware/cliff-jumper": "^6.0.0",
|
|
48
|
-
"@types/react": "^19.0
|
|
48
|
+
"@types/react": "^19.1.0",
|
|
49
49
|
"husky": "^9.1.7",
|
|
50
50
|
"lint-staged": "^15.5.0",
|
|
51
|
-
"react": "^19.
|
|
52
|
-
"typescript": "^5.8.
|
|
51
|
+
"react": "^19.1.0",
|
|
52
|
+
"typescript": "^5.8.3"
|
|
53
53
|
},
|
|
54
54
|
"keywords": [
|
|
55
55
|
"code style",
|