В данном кодовом руководстве представлены рекомендации по стилю написания кода.
Установите всё необходимое для eslint через yarn:
yarn add -D eslint @feature-sliced/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-next eslint-config-prettier eslint-plugin-boundaries eslint-plugin-prettier eslint-plugin-unicorn prettier└────
├── pages
│ ├── _app.tsx
│ ├── index.tsx
│ ├── **/*.tsx
│ └── *.tsx
├── public
│ ├── fonts
│ │ └── *.woff2
│ ├── sprites
│ │ └── *.svg
│ ├── favicon.svg
├── src
│ ├── app
│ │ └── styles
│ │ └── providers
│ │ └── HOCs
│ │ ├── index.tsx
│ ├── processes
│ │ └── **/*.ts
│ ├── pages
│ │ └── **/*.tsx
│ ├── widgets
│ │ └── **/*.tsx
│ ├── features
│ │ └── **/*.tsx
│ ├── entities
│ │ └── **/*.tsx
│ ├── shared
│ │ └── api
| | └── lib
| | └── ui
| | └── config
Используйте нейминг файлов или папок только в стиле kebab-case, Все буквы маленькие, слова разделены дефисом. https://developers.google.com/style/filenames
src
└── pages
├── home
│ ├── ui.tsx
│ ├── styles.module.scss
│ └── index.ts
└── about-us
├── ui.tsx
├── styles.module.scss
└── index.ts
Используйте 2 пробела, чтобы сделать отступ в коде, и поклянитесь никогда не смешивать табуляции и пробелы, иначе вас ждет ад 👹.
Ограничьте свои строки до 120 символов. Да, за последние несколько лет экраны стали намного больше, но не ваш мозг. Используйте дополнительную комнату для разделения экрана, ваш редактор поддерживает это, верно?
Плохо: ❌
//This is a comment with no whitespace at the beginning
/*This is a comment with no whitespace at the beginning */Хорошо: ✔️
// This is a comment with no whitespace at the beginning
/* This is a comment with no whitespace at the beginning */Плохо: ❌
"Hello ${name}!";
'Hello ${name}!';
"Time: ${12 * 60 * 60 * 1000}";Хорошо: ✔️
`Hello ${name}!`;
`Time: ${12 * 60 * 60 * 1000}`;
someFunction(`Hello ${name}`);Плохо: ❌
import Name from "file/path";
const foo = "bar";Хорошо: ✔️
import Name from 'file/path';
const foo = 'bar';Плохо: ❌
<input type='text' />Хорошо: ✔️
<input type="text" />Плохо: ❌
<area {...props} />
<img {...props} />
<input type="img" {...props} />Хорошо: ✔️
<area alt="This is descriptive!" />
<img alt="This is descriptive!" {...props} />
<input type="img" alt="This is descriptive!" {...props} />Плохо: ❌
const user_name = "John";Хорошо: ✔️
const userName = "John";
/* ignore destructuring */
const { some_property, ...rest } = obj;Плохо: ❌
import {isUndefined} from 'lodash';
const user = { name: 'John', age: 25 };
const { ...otherProperties } = obj;Хорошо: ✔️
import { isUndefined } from "lodash";
const user = { name: "John", age: 25 };
const { ...otherProperties } = obj;Плохо: ❌
var user_name = 'John';Хорошо: ✔️
const foo = "foo";
let bar = "bar";To avoid errors, remove unused variables.
Во избежание ошибок удалите неиспользуемые переменные.
Плохо: ❌
const arr = [1, 2, 3];
const someVar = "bla.com"
const items = arr.map((item, index) => `Counter: ${index}`);Хорошо: ✔️
const arr = [1, 2, 3];
const items = arr.map((_, index) => `Counter: ${index}`);Плохо: ❌
window.eval("var a = 0");
global.eval("var a = 0");Хорошо: ✔️
class A {
foo() {
// This is a user-defined method.
this.eval("var a = 0");
}
eval() {}
static {
// This is a user-defined static method.
this.eval("var a = 0");
}
static eval() {}
}Программирование — это не запоминание [дурацких правил][операторов сравнения]. Используйте оператор тройного равенства, так как он будет работать так, как ожидалось.
Плохо: ❌
const a = 0;
if (a == '') {
console.log('losing');
}Хорошо: ✔️
const a = 0;
if (a !== '') {
console.log('winning');
}Плохо: ❌
if (foo === 1) {
// 1
} else if (foo === 2) {
// 2
} else if (foo === 3) {
// 3
} else {
// default
}Хорошо: ✔️
if (foo === 1) {
// 1
} else if (foo === 2) {
// 2
}switch (foo) {
case 1: {
// 1
break;
}
case 2: {
// 2
break;
}
case 3: {
// 3
break;
}
default: {
// default
}
}- Используйте осмысленные имена переменных, функций и классов. Имена должны ясно описывать их назначение и использование.
- Используйте camelCase для именования переменных и функций (первое слово со строчной буквы, каждое следующее слово с заглавной).
- Используйте PascalCase для именования классов (каждое слово с заглавной буквы).
- Избегайте слишком общих имен, таких как data, value, temp, которые могут привести к путанице.
Если вы не знаете тип переменной, используйте Generic или unknown.
Плохо: ❌
interface User {
name: any
}
interface Users {
data: any[]
}Хорошо: ✔️
interface User {
name: string
}
interface Users {
data: Array<User> | User[]
}
*Плохо:* ❌
```js
const x = 5;
function func(a, b) {
// ...
}Хорошо: ✔️
const age = 25;
function calculateSum(num1, num2) {
// ...
}
class Customer {
// ...
}Рекомендуется следовать этим принципам для создания понятного и консистентного кода.
В языках программирования, где интерфейсы являются отдельным типом, префикс "I" (от "Interface") ранее использовался для именования интерфейсов, например, IMyInterface. Однако, в современных практиках разработки такое именование стало менее распространенным. Рекомендуется использовать более конкретные и описательные названия для интерфейсов, без префикса "I". Например, вместо IMyInterface лучше использовать MyService или MyContract.
Когда создаете базовый класс, которым будут пользоваться другие классы в иерархии, можно добавить префикс "Base" к его имени. Например, если у вас есть класс Musor, и вы хотите создать базовый класс, от которого будут наследоваться другие классы, то можно назвать его BaseMusor.
Когда вы работаете с объектами передачи данных (Data Transfer Objects, DTO) или моделями, которые используются для передачи данных через API или другие механизмы связи, рекомендуется добавлять суффикс "Dto" к их именам. Например, если у вас есть класс, представляющий продукт, который передается через API, то можно назвать его ProductDto.