Эта статья об основных правилах кода, которым следует следовать при написании своих проектов. Вы можете расширить и изменить их в соответствии с вашим проектом и вашими потребностями.
Наслаждайся чтением!
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-кода можно бесконечно дополнять и изменять. Буду рад вашим отзывам, а также, если у вас есть дополнения к правилам, поделитесь ими. Пишите код правильно!