Табы или пробелы? ➡️ Почему мы повернули не туда и как табы помогают 

00:00 Интро 00:27 Типы отступов 00:58 В чём разница 01:27 Пример в редакторе 02:29 Настройка таба 04:05 Настройка пробела 04:38 Личный опыт 06:09 Польза при выводе 07:56 Доступность отступов 09:04 Табы на Гитхабе 10:20 Выводы 11:11 Аутро

Ну наконец-то, кто-то заступился за несправедливо униженные табы!

Всегда был сторонником табов, а потом увидел что в редакторе у меня, оказывается, все это время стояли пробелы))

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

"Самая неконфликтная тема" "табы или пробелы" оценили масштаб иронии?

А ещё от длины отступа может зависеть степень усталости (или сосредоточенность) от прочтения кода. Например, если некоторым удобнее отступ в 4 символа, а в их проекте принято 2, то так и сидят, мучаются... пьют больше кофе... курят больше сигарет... портят глаза... ну, вы поняли ;)

На github ещё можно использовать ?ts=8 в URL, если нет возможности свой .editorconfig закоммитить 🤔

Точно, вот реально же удобнее. Я раньше стремился именно табы использовать. Давайте вернем все взад 🤗

Спс, из видео про табы узнал про decimal-leading-zero для counter. Жить стало легче, жить стало веселей.

Никогда на задумывался про преимущество доступности табов перед пробелами. Было познавательно и заставило задуматься. Спасибо, Вадим.

Вадим сделал невозможное. Записал видео про табы vs пробелы, которое собрало за 3 недели всего 31 дизлайк за 13,5 тысяч просмотров. Гений! Ну а если совсем серьезно, то впервые вижу объективный взгляд на этот вопрос, а не столкновение мнений о вкусах.

- Пробелы лучше чем табы - Чем лучше? - Чем табы

Очень крутой выпуск, перевернул мне сознание )

Спасибо за видео! У меня не так много опыта работы в разных проектах и командах, и мне не приходилось выбирать - пробелы или табы, всегда было два пробела :) Согласен с тем, что табы удобнее и более гибкие! Буду пробовать перейти на них в своих проектах. Но думаю, что рано всё равно на двух стульях не усидишь, и придётся выбирать что-то одно.

Понравилось видео. Всегда использовал пробелы, и даже не задумывался над табами. Сейчас задумаюсь

очень хорошие, современные, ламповые и тем не менее важнейшие рассуждения в выпусках!

Здравствуйте! Благодарю за видео и за упоминание про проблемы слабовидящих разработчиков!

Спасибо за очень полезное видео. Надо будет поэкспериментировать с табами )

вот это вклад в тему!!! супер аргументация

Отличное видео, не задумывался, что у использования табов есть такие детали

Когда врывался в АЙТИ программистом на Си, везде использовали табы и это было круто. Потом перешёл в Питон, а там пробельчики и я такой meh, но привык. Потом ушёл на фронт, пробелы сохранились автоматически и тут я такой ВАУ, ТОЧНО, ТАБЫ ЭТО ЖЕ БЫЛО ТАК КРУТО! Пойду переведу на них все свои пет проджекты Спасибо, Вадим!

Как всегда очень круто и аргументированно. Всегда юзал табы, но большинство меня победило =(

Спасибо, за информацию. Очень интересно

Вообще табы изначально были придуманы для табуляции. Выравнивания по горизонтали в стиле таблицы. Формат CSV построен на их использовании. В Microsoft Word и других текстовых процессорах можно задавать конкретные места, куда будет переводить Таб. Очень удобно использовать для выравнивания, не громоздя лишние таблицы. В статье Википедии «Табуляция» приведён прекрасный пример (интересно, отобразится ли он тут правильно): «Если отправить на печать текст (символ табуляции обозначен стрелкой) один→два→три→четыре 1→2→3→4 5→6→7→8 9→10→11→12 получим такую распечатку: один два три четыре 1 2 3 4 5 6 7 8 9 10 11 12» Табы никогда не предназначались для отбивки строк. Однако, как и многие другие ASCII-символы их стали использовать как подручное средство не по своему прямому предназначению. Именно поэтому с ними много проблем. Например, место ошибки в стек-трейсе выдаёт позицию символа, по которой можно перейти на нужное место в редакторе. Но если используются табы, она не будет соответствовать номеру колонки в редакторе. Где-то это можно настроить, но настраивать надо специально. Кому-то неудобен даже тот факт, что курсор сбивает позицию при перемещении между строк, так как он не может быть «посередине» таба. Бывают и более специфичные ошибки в среде линуксовых-инструментов. Да, если у вас всё настроено, и вы не сталкиваетесь с такими проблемами, то с табами вполне можно жить. Но пробелы же просто работают. Поэтому и получили повсеместное употребление.

блин какие крутые ролики, никакой банальщины, каждый раз узнаю что-то новое, хоть сам в вебе уже давно...

классное ненапряжное пятничное видео :) Идея для следующего: делать табы по-фэншую, которые на сайте

Красава! Переходим на табы!)

Спасибо тебе, очень полезно

Спасибо за видео, лайк

Вадим, спасибо большое за твою работу и полезные видео. Интересно было бы услышать от тебя про настройку проекта с ESLint + Prettier

Спасибо большое! Про гитхаб не знал. Пошел конфиг сделаю

Табы - классная штука. Kогда только начинал работать, не обращал на это внимание. Но давно заметил что табы удобнее. Все хочу сделать глобальный editorconfig, да руки не доходят. Как всегда лайк и спасибо)

было полезно, спасибо!

Здравствуйте, тёзка! Поделюсь своей болью. Пишу код на 13" дисплее ноута. Для удобства всегда делю редактор на два окна: один для index.html, другой для стилей. Чтобы все грамотно помещалось, приходится часто менять размер отступов. И иногда приходится делать их очень маленькими... Жду, когда смогу приобрести большой монитор! p.s. Спасибо за интересные разборы важных, простых и сложных тем. Механические лайвы всегда по-детски развлекают :)

Именно поэтому на каждом проекте юзаю табы, чтобы каждому было удобно. И именно эти примеры привожу в пример. Еще проблема в том, что большая часть разработчиков не увидит разницы, у многих отступы выключены. Отступы обычно включены у тех, кто пишет на языках без скобок.

Спасибо, Вадим, по крайней мере меня ты убедил: табы - недооценивают! P.S.: Принт на футболке прикольный!

Убедительно. Я поверил.)

Тоже изначально верстал с табами, до тех пор пока не познакомился с препроцессорами stylus, затем sass, pug, yaml. Часто были проблемы при компиляции таких языков, пришлось перейти на пробелы. Вадим вот вы затронули доступность для разработчиков, заметил у разработчиков восточно-азиатских стран(возможно и арабских) в классах css, в переменных и функциях js используется раскладка на их родных языках. У нас же дошло до того, что даже комментарии пишут на английском.

Если начинаю проект я, то придерживаюсь стандартов, у js например 2 пробела, у питона и пхп читал что 4 . Главное, чтобы был эдитор конфиг с принудительной настройкой всех редакторов в единый стиль проекта, а так пофиг, всё равно жать клавишу таб для любых отступов.

Очень информативно. Позиция моя по вопросу отступов пошатнулась...

tab настроенный с двумя проблемами, визуально удобно, а что еще нужно

Всецело поддерживаю. Устал бороться по этой части со своими программистами.

Не разбирался с этим вопросом фундаментально. Для меня - это вопрос комфорта чтения кода. Поэтому я использую Tab.

Работаю с разного рода кодом лет 20 и до сих пор использую табы и ненавижу пробелы. Так и не понял, почему пробелы исторически одержали верх, очень надеюсь что постепенно все вернутся в использованию табов. Это ж как минимум для кода на 3 символа экономнее!

Я тоже за табы, но такие как мы проиграли просто потому, что в VS Code по умолчанию именно пробелы и никто не меняет. И чтобы избежать мусора в оформлении и проблем в GIT я сдался и тоже использую пробелы.

Понял что давно не парюсь над тем что выбрать там или пробел. В проектах над которыми работал всегда настроен Prettier

gofmt принудительно ставит отступы при сохранении и за несколько лет даже не задумывался что там (оказались табы). Хотя в настройках редактора стоит 4 spaces (так получилось). Кажется это неплохое решение. Смотреть можно как хочешь, но при сохранении или коммите в архив уйдет канонический вариант, который может быть настроен для просмотра по-разному.

Все беды из-за того, что люди используют не подходящие решения для задач. Пробел - интервал обозначающий границы слов. Табуляция - символ для горизонтального выравнивания текста. "Двойные" кавычки - парные знаки для выделения текста. Апостроф' - знак, использующийся для чего угодно, но не выделения текста. Верь wiki. Эти же проблемы и в другой "любимой" Вадимом теме: семантика вёрстки, диватоз. Если делать - как задумано, часто получается лучше.

При виде заголовка сразу вспомнил эпизод из “Silicon Valley” 😁

Я использую пробелы. Причиной перехода на пробелы использование в проекте самых различных редакторов и языков, включая языки не программирования. Проблема в том, что табы в разных редакторах интерпретируются по-разному, а иногда и приводят к ошибкам. А еще некоторые редакторы вообще не воспринимают табов. Так что пришлось. Табы используются, но только там, где это действительно необходимо (у нас это зачастую конфиги и таблицы).

Спасибо

Вадим красава

Оставил 667-ой лак, не хотел его сначала ставить, но результат важнее визуальных ценностей)

Комментарий немного не в тему: крутая футболка!

Хороший канал. Я бекенд-разработчик и обычно на каналы фронтенд-разработке не подписываюсь.... Для вашего канала сделал исключение

Чтобы вывести на экран код, для пробелов и табов в коде, переданного как текст через переменную нужно писать исключения для метода .trim(), чтобы он их не стирал. Так что пробелы и табы находятся в равном положении как минимум по одной этой задаче. Пока не возникнет существенная разница во многих бытовых задачах из-за стремления сообщества его создать, всегда будет побеждать ленивый вариант.

таб в 4 пробела для меня оч удобно)

Да, табы удобнее, потому что можно настраивать их ширину. К сожалению, есть языки где обязательно использование пробелов. Мне нравится, когда инструменты решают эту проблему или выбор за нас. Так, в go есть утилита gofmt, которая форматирует код единственным способом, в том числе заменяет отступы на табы. Это исключает ситуации, когда по ошибке или по незнанию разработчик отформатировал лишнее или отформатировал не так как принято на проекте. Если современные текстовые редакторы с легкостью могут заменить одни пробельные отступы на другие, то почему они не дают возможность задавать ширину отображения пробельных символов, если они форматируют отступы.

Дааа.. Наконец то кто то об этом сказал. Поэтому я всегда использую табы.

Я для заметок использую onenote, и чтобы в нем код сворачивался нужны табы. Да и в редаторе как-то больше по душе отображение табов, а не этих точек

Сразу вспоминается язык Вайтспейс, где пробел и таб это конструкции языка en.wikipedia.org/wiki/Whitespace_(programming_language)

Добавлю ещё одно: клавиша Backspace стирает либо 1 таб, либо 1 пробел, либо 2/4 пробела (как настроено). Это смущает, когда на проекте пробелы, и приходится жать Shift + Tab вместо Backspace, будто я не с символами работаю, а кодогенерацией пользуюсь чаще. всегда пишу на табах таб таб таб таб таб таб шифт-таб

Крутая футболка, Вадим!

До этого момента не задумывался, но работаю в редакторе с отступами как с табами, а он уже сам их конвертирует в пробелы.

Спасибо, Вадим. Никогда на это не обращал внимания и не задумывался. А оно вот оно чё =) Действительно, табы выглядят удобнее

Было бы неплохо иметь инструмент похожий на auto CR LF, тогда в репозиторий все попадало бы строго в определенном виде, независимо от личных предпочтений каждого разработчика.

Вадим ты единственный в своём роде на ютубе . Пожалуйста продолжай !

Про отображение в браузере и подстройку под себя очень круто, но... Причина перехода на пробелы в командах в частности кроется в разности восприятия/форматирования общего кода. Проблема тут в том, что это не просто отображение (внешний вид) кода, оно влияет и на другие момент. Например: допустим, в кодстайле проекте есть ограничение длины строки в 100 символов. У людей с tab=8 и tab=2 при вложенности даже хотя бы 4, не говоря уже про 8 (что сплошь и рядом в html) разница получающейся длине строки будет огромной (24 и 48 символов соответственно). Поэтому и вставлять переносы такие люди будут в разных местах. У одного всё будет уходить за край экрана, у другого - почему-то переносы будут в середине экрана за километр до ограничения. В итоге - неудобно всем. А так да, табы, конечно, более гибкие.

в обоих случаях используешь одну и ту же кнопку tab или shift+tab при написании кода. Остается лишь вопрос отображения - из-за чего в "древние времена" и появился этот спор. К тому же на это всё накладывает свой отпечаток "стандарт" написания кода на том либо другом языке ("Наше сообщество решило что нужно писать так, и нам всё равно как пишут в вашем сообществе"). Кто-то ставит фигурные скобки на той же строке, кто-то переносит на новую, кто-то предпочитает не ставить фигурные скобки, а кто-то считает, что фигурные скобки должны быть всегда. Единого "стандарта" для всех языков не существует :(

Ох, Вадим, не люблю я комментарии писать (либо лень, либо и сказать-то нечего), но вот посмотришь ваше видео и так и прёт сказать спасибо! :) Всё как всегда на высоте и как обычно глубоко и с тонкостями. Ну прям кайфую от получения подобной информации в подобной подаче! Успехов вам и дальше!

Пробелы используют эгоисты. Скрежещу зубами каждый раз, когда возникает необходимость разобраться в исходниках какого-нибудь проекта на гитхабе, код которого написан с использованием двух пробелов. Мне, например, тяжело воспринимать такой код, все сливается в одну стену текста. Приходится конвертировать каждый файл в четыре пробела.

Полностью поддерживаю табы, я за функциональность vs отображение, в конце концов, кому какая разница, каким образом выглядит их код у меня в IDE.

Порядок предложить легко, совсем просто: пробел и табуляция должны быть одним символом, а отображение может зависеть от настроек, как уже было сказано в видео. Выравнивание блока объявления переменных и присваивания значений, выравнивание даже вложенных функций, выравнивание переносов «хвостов» на строку ниже и так далее должны делать сами редакторы кода. Достаточно пробела, чтобы текст сдвигался, как надо.

Понравился раздел "Польза при выводе". А можно сделать что-то подобное для отображения кода в VS Code? Чтобы, например, когда я разворачиваю vscode на пол-экрана таб с 4 менялся на 2 и обратно

В ядре linux отступы 8 пробелов для того, чтобы не раздували код и не уходили в большую вложенность

Использую стандарт языка, как завелось - пробелами. Но всегда не понимал зачем использовать 2,4,8 байта для отступа, если можно обойтись 1 байтом. Может в нынешних реалиях такой размер не имеет значения. Но кажется есть переформатировать весь гитхаб в табы (где нет четких различий в языке использования таба или пробела как языковой конструкции), он станет сууущественно меньше по размеру) Может, я в чем-то и ошибся, поправьте меня)

тоже когда то табами болел. спасибо за поднятую тему, но тема полностью не раскрыта. вот например код var b = 1, a = 2; тут смысл в том что переменные выравнивают в столбик. или другой пример, когда значения выравнивают в столбик a = [ 'a': => 'test', 'varname' => 'test2', ] в обоих случаях надо будет где то использовать табы, а где то пробелы и следить за этим. но тогда чтобы контролировать это надо включать показ пробельных символов, а они визуально загрязняют код.

Это еще не всё. Вот захотел я навести красоту и делать в коде не только отступы, но и выравнивания. Например, в CSS после «-webkit-property: 1px» в следующей строке написал дополнительные 8 пробелов перед «property: 1px». Так я компенсироввл количество символов в префиксе «-webkit-», и оба правила поравнялись друг к другу (так легче увидеть, что значения свойств одинаковы). Если использовать для отступов табы, а для выравнивания - пробелы, то выравнивание сохранится при любых настройках ширины таба. А если для отступов использовать тоже пробелы, а потом проехаться автозаменой, чтобы поменять отступы, то всё выравнивание заруинится.

Вадим, NGINX уже настраивали, а планируется ли показать как настроить по феншую webpack для верстальщика? Без всяких реактов и тайпскриптрв, как-то скромно: бабель, отслеживание и перезагрузка страницы, стриминг на локальный ip для доступа со всех устройств в локальной сети(browser sync), чтобы postcss и autoprefixer, imagemin и может еще какие-то полезности для верстки

Я тоже сторонник табов. И тоже вынужденно перешёл на пробелы... С удовольствием бы вернулся обратно. Но есть вопрос - как быть с некоторыми типами файлов, в которых исторически сложились отступы, например, в два пробела - JSON? Значит нужно, чтобы во всех остальных файлах у нас были отступы табами = 4 пробела. А в файлах JSON - табы в 2 пробела или просто 2 пробела... Это тоже можно реализовать в эдиторконфиге?

всегда стараюсь юзать табы

Убедительно. Логично. Но... оставляем пробелы.

всегда юзал и буду юзать табы

О господи, Вадим. Вы развезли врата ада

Я не знал, что табы такие удобные. Всегда раньше топил за пробелы.

Настраиваем ESLint на табы и никто не сможет сохранить файл с пробелами. Да он и сам при коммите все пофиксит автоматически. Топлю за табы, все конфики настроены на табы, они намного удобнее для всего. Например, мне нравится в js отступ в 4 символа, но все привыкли к двум. Не вопрос, у меня отображается 4, у них 2, все довольны

Насколько я понял единственный довод это то что пробелы не распознаются как табы, почему бы не добавить в редакторы возможность определять табы на основе editorconfig и далее менять на соответствующие. То есть сказать редактору что мне нужно отступ в 4 пробела, если нужно будет открыть проект в котором 8 пробелов отступ (и это описано в конфиге проекта) редактор на лету конвертирует 8 -> tab -> 4 и ничего не надо сохранять при этом, более того можно также конвертировать назад сохраняя то как настроен проект. А проблем с табами больше чем указанная выше (в комментариях уже описали) так что только пробелы и "виртуальная" конвертация в табы.

У пробелов есть один плюс по сравнению с табами - курсор ввода можно поставить на любую позицию, и при перемещении курсор движется с одинаковой скоростью вместо того чтобы проскакивать 2-4-8 визуальных позиций за раз

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

Предпочитаю tab, но в приоритете уже сформированные требования команды. Уже привык, что невежество берёт верх над здравым смыслом и зачастую не вступаю в битвы tab VS space.

Забавно что Вадим предложил похоливарить в комментариях, но в самом видео так всё изложил что и сказать то особо теперь нечего 😃

Tab Tab Tab... Я люблю Tab

мне кажется, что аудио чуть-чуть тормозит за картинкой, надо бы засинхронить)

Неужели - это действительно так важно, а? По работе порой сталкиваюсь с вообще не форматированным кодом и даже форматированным так, что вложенность съехала. Кто-то копипастил, а может специально, не знаю. Поправил когда видишь такое и всё. Конечно TABами.

Хочу такую майку )

Я конечно извиняюсь, и это дело каждого, как писать код, но например по стандартам PHP отступы должны быть выполнены в пробелах и в количестве 4-х символов. И имхо стандарты далеко не дураки писали, и свои "предпочтения" нужно подстраивать под них, это даёт более эффективную работу в команде. Хотя если брать пример из видео - может быть это удобно. P.S.: На счёт консольных редакторов - сам использую neovim и могу сказать, что его возможности по работе с отступами аналогичны VSc.

получается, что если в кодстайле команды можно прописать "отступы - пробелы, табуляция = 4 пробела", то почему нельзя аналогично написать "отступы - табы, табуляция = 4 пробела". как я понимаю, проблема будет возникать с "поехавшими" отступами только в том случае, если нужно разбить например длинный перечень аргументов функции на несколько строк и выровнять это. но опять же... соблюдая кодстайл в любой альтернативе ты не получишь проблем. но с пробелами наверное просто меньше нужно отвлекаться на это с меньшем риском получить характерные проблемы (и не получить характерные преимущества).

Есть кейс с выравниванием атрибутов тега в HTML/XML по положению первого атрибута, который написан на той же строке, что и само имя тега. Текст В js/java/etc некоторые редакторы (например, IDEA) умеют выравнивать параметры функции по первому параметру, который написан на той же строке, что и название функции. class MyClass { public void myMethod(String stringParam1, String stringParam2, Integer integerParam3) { // ...method body... } } В этих случаях корректно отработают только пробелы.

Использую tab, так как это один символ вместо нескольких. Поскольку во всех объявлениях пишет "у нас молодой колектив до 30 лет", то буду показывать пальцем в их сторону. Не знаю откуда все эти новые движения, но не вижу никакого прогресса в целом. Чего только не придумали - язык в языке, но от этого ничего ни быстрей не становится и не лучше и не проще. Молодые люди доказывать что одно лучше другого не имея никакого понятия об двух технологиях одновременно. Каждая технология имеет свои плюсы и минусы и предназначение.

проблема почему от табов отказались - это что некоторые их использовали даже для выравнивания кода, уже после отступа, в результате код читаем только на одном размере таба