Лучший стиль кода для ваших проектов TS/React

Эта статья об основных правилах кода, которым следует следовать при написании своих проектов. Вы можете расширить и изменить их в соответствии с вашим проектом и вашими потребностями.

Наслаждайся чтением!

1. Не использовать экспорт по умолчанию

Вы можете прочитать больше информации об этом в этой статье

// bad 👎
export default formatUserName
// good 👍
export { formatUserName }

2. Используйте правильное соглашение об именах

Не называйте свои переменные непонятными именами и старайтесь придерживаться одного шаблона для каждого типа переменных. Например, классы всегда начинаются с заглавной буквы, константы всегда пишутся в верхнем регистре.

// bad 👎
const HOURS_IN_DAY = 24
const minutesInHours= 60

const songs = ["Ophelia", "Drag", "Pieces"]
const Artists = ["The Lumineers", "Day Wave", "Sum 41"]

function savePassword() {}
function restore_password() {}

class transport {}
class Car {}
// good 👍
const HOURS_IN_DAY = 24
const MINUTES_IN_HOURS = 60

const SONGS = ["Ophelia", "Drag", "Pieces"]
const ARTISTS = ["The Lumineers", "Day Wave", "Sum 41"]

function savePassword() {}
function restorePassword() {}

class Transport {}
class Car {}

3. Используйте Boolean() вместо !!

Между ними нет никакой разницы. Но, на мой взгляд, Boolean() более удобочитаем и понятен при просмотре кода.

// bad 👎
const isVisible = !!counter
// good 👍
const isVisible = Boolean(counter)

4. Нулевой порядок

Если есть какая-то функция/компонент/и т.д., возвращающая null, ее нужно писать в самом начале для лучшей читабельности и понимания логики той или иной части кода, чтобы не было ситуации, в которой мы читаем функцию и в конце оказывается, что в нашем случае она возвращает null. В результате было потрачено гораздо больше времени, чем было бы, если бы функция была написана в самом начале.

// bad 👎
const formatPrice = (price) => {
  ...
 if (!price) return null
 ...
}
// good 👍
const formatPrice = (price) => {
  if (!price) return null

  ...
}

5. Ад аргументов

Не превращайте свои функции в функции с большим количеством аргументов, это может привести к ошибкам и плохим последствиям. Вместо этого передайте аргументы как объект.

// bad 👎
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

createMenu("Foo", "Bar", "Baz", true)
// good 👍
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
})

6. Используйте сокращенное значение свойства

Используйте функции ES6, они облегчают вам и другим разработчикам понимание и написание самого кода.

const spiderman= 'Peter Parker'

// bad 👎
const superhero = {
  spiderman: spiderman,
}
const spiderman = 'Peter Parker'

// good 👍
const superhero = {
  spiderman,
}

7. Используйте деструктуризацию объекта при доступе и использовании нескольких свойств объекта.

Возможности ES6 упрощают код :)

// bad 👎
const getFullName = (user) => {
  const firstName = user.firstName
  const lastName = user.lastName

  return `${firstName} ${lastName}`
}
// good 👍
const getFullName = (user) => {
  const { firstName, lastName } = user

  return `${firstName} ${lastName}`
}

// best 👍👍👍
const getFullName = ({ firstName, lastName }) => {
  return `${firstName} ${lastName}`
}

8. Используйте осмысленные и произносимые имена переменных

Думаю, у всех были случаи, когда начинаешь просматривать код и видишь такие переменные, как «v», «i», «tgd» и не можешь понять, за что они отвечают. Итак, чтобы избежать такой ситуации ни с вами, ни с людьми, которые будут читать ваш код — называйте свои переменные и функции в соответствии с их назначением.

// bad 👎
const yyyymmdstr = moment().format("YYYY/MM/DD")

// What the heck is 60000 for?
setTimeout(turnOff, 60_000);

function addToDate(date, month) {
  ...
}

const date = new Date()

// It's hard to tell from the function name what is added
addToDate(date, 1)
// good 👍
const currentDate = moment().format("YYYY/MM/DD")

// Declare them as capitalized named constants.
const MILLISECONDS_PER_MINUTE = 60 * 1000; //60_000;

setTimeout(turnOff, MILLISECONDS_PER_MINUTE);

function addMonthToDate(month, date) {
  ...
}

const date = new Date()
addMonthToDate(1, date)

9. Опустите значение реквизита, если оно явно истинно.

Это улучшит читаемость и понимание реквизита.

// bad 👎
<Component isVisible={true} />
// good 👍
<Component isVisible />

10. Используйте правильную типизацию для свойств компонента

Используйте типы, которые команда React дает вам для типов. Они помогают писать код точнее

// bad 👎
const Component = ({ title, isVisible }: Props) => {

  return ...
}

// very bad 👎👎👎
const Component = ({
  title,
  isVisible,
}: {
  title: string;
  isVisible: boolean;
}) => {
  return ...
};
// good 👍
const Component: FC<Props> = ({ title, isVisible }) => {

  return ...
}

11. Разрушение реквизита в аргументах

// bad 👎
const Component = (props) => {
  const { title, isVisible } = props

  return ...
}
// good 👍
const Component = ({ title, isVisible }) => {

  return ...
}

Заключение

Эти базовые правила написания чистого JS-кода можно бесконечно дополнять и изменять. Буду рад вашим отзывам, а также, если у вас есть дополнения к правилам, поделитесь ими. Пишите код правильно!