Очень полезная штука этот Editor Config. Учусь на курсах (фронтенд), в прошлом году у нас ввели .editorconfig и сразу отпала куча вопросов новичковых по настройкам редактора. Теперь просто в каждый проект домашки кидаешь файлик в корень и спокойно работаешь. Красота!
Как раз попал в компанию и работая над 1 проектом у нескольких разработчиков в редакторах разные отступы и нету файла .editconfig . Моё чувство перфекционизма постоянно напрягал тот факт, что редактируя файлы после других людей часто отступы у них и у меня разные и код превращается в хаотическую поломанную лестницу. Очень тебе благодарен за то, что ты рассказал про данную возможность нормализовать этот беспорядок и про редактирование прямо в гитхабе😉 Спасибо!
Пересмотрел документацию Prettier'а, он умеет все то же что и editorConfig. Думаю если уже работаешь с Prettier то переходить особого смысла нет, а так для расширения кругозора очень даже, буду знать что такое есть)
Prettier поддерживает десяток форматов файлов и зачастую навязывает вам форматирование. EditorConfig поддерживает любые текстовые файлы и меняет настройки редактора под каждый. Форматированием вы занимаетесь сами. Не обязательно выбирать, можно использовать оба или хотя бы EditorConfig.
Доброго времени суток! К сожалению довольно поздно посмотрел видео... Всё понятно, но скажите, как редактировать этот файл .editconfig? Где он лежит изначально? Его необходимо отредактировать в расширении EditorConfig for Visual Code?
Отбой! Понял как! Надо самому создать файл ".editorconfig" и в нем прописать необходимые инструкции. Потом это файл "забросить" в корень проекта. Спасибо! Отличное видео.
Да, EditorConfig про универсальные настройки редактора (это его буквальное название). Расположение фигурных скобок нужно настроить в линтерах: ESLint, Stylelint, Prettier и так далее.
На самом деле в .editorconfig так же можно добавлять и кастомные правила. Например, PHPStorm (подозреваю, что и остальные продукты JetBrains) понимает правила, которые начинаются с `ij_`. Таких правил огромное множество, они фактически отражают все, что умеет настраивать сама IDE. Если вся команда использует IDE от JetBrains (как в моем случае), то у всех все отлично работает, а сам файл можно сгенерировать прямо на экране настроек "Code Style". Про совместимость с другими IDE и наличие других видов кастомных правил ничего сказать не могу.
Современные редакторы делают разницу незаметной, а EditorConfig помогает придерживаться стиля кода. Но подробнее расскажу в отдельном видео :) Есть нюансы.
@@pepelsbey Тогда жду подробное видео) Спасибо за то, что рассказываете не только как закодить что-то, но и как это сделать удобно и быстро на уровне редактора
А еще можно использовать гит хуки, и прогонять тесты перед попыткой закоммитить. Если измененный код не проходит тесты - нельзя сделать коммит, а соответственно и запушить код, который не соответствует критериям. Профит, использовал такую схему когда в команде работали джуны. Был бы рад видео которое объясняет как подружить Приттиер и ЕСЛинт. Я никак не могу понять как они должны работать в связке. Много опций пересекается.
Мне не очень нравятся хуки на Git, которые кидают ошибки - они нарушают простой и понятный интерфейс коммита или пуша. То есть это стресс, проблема и возня туда-сюда. Если нет автофикса (это тоже странно, но понятне), то такое лучше вешать в пулреквесте в виде тест-экшенов. Тогда ты спокойно напишешь и отправишь код, а потом тебе интерфейс вежливо скажет, что нужно кое-что поправить, прежде чем код попадёт в мастер.
Я видел несколько рецептов как соединить ESLint и Prettier и ни один не показался простым. Мне кажется, что среди них лучше выбрать один и спокойно жить дальше со своим выбором.
@@pepelsbey Согласен, но воркфлоу работы в прошлой компании, где мы это практиковали, не предусматривал Пуллреквесты. А джуны частенько писали очень слабый откровенный говнокод, такие проверки приучали их по крайней мере следовать стайлгайду.
Вадим! Как привыкнуть к тому, что на VSCode пока не так хорошо с автокомплитом имен функций из других файлов, как в phpstorm? Вводишь что-то, он предлагает сразу совпадение или переменные из других файлов. Или там есть такое? Может надо какой-то плагин донастроить, ну чтобы так же автокомплит делал.. наверно я только поэтому использую медленный phpstorm
VS Code - это не IDE, хотя иногда кажется, что он туда стремится. Вряд ли вы сможете докрутить VS Code до состояние WebStorm с помощью плагинов, это всё-таки лёгкий тестовый редактор, у него другие цели.
Меня тоже немного корежит последняя пустая строка, чем обсуловлена её необходимость? Типа чтобы не нужно было вручную переводить каретку если хочешь что-то дописать в конец?
11:42 Если бы вы сейчас использовали indent_style = tab величину отступа задавали бы через indent_size? Зачем нужен tab_width? Понятно что он делает, но никогда не видел чтоб он применялся, даже с табуляцией обычно ставят indent_size.
@@pepelsbey @Vadim Makeev indent_size работает и с пробелами и с табами, indent_size = 4 отрисует таб шириной четыре пробела. Но если указан indent_style = tab и одновременно indent_size и tab_width с разными значениями применится tab_width так как он для табов приоритетнее. На официальной странице написано "tab_width: a whole number defining the number of columns used to represent a tab character. This defaults to the value of indent_size and doesn't usually need to be specified.", зачем, в таком случае нужен tab_width, если есть универсальный indent_size я не понял и ни разу не видел его в .editorconfig. Но всегда было интересно зачем это свойство.
Ну так я и сказал: это пары, их используют в зависимости от того, что в проекте принято. Если их использовать одновременно, то возникает путаница. Значит не нужно так делать :)
8 он не видел... www.kernel.org/doc/html/v4.10/process/coding-style.html 1) Indentation Tabs are 8 characters, and thus indentations are also 8 characters. There are heretic movements that try to make indentations 4 (or even 2!) characters deep, and that is akin to trying to define the value of PI to be 3.
Есть люди, которые так делают. Но это скорее экзотика. Наверное, потому что 2 или 4 более распространено. Тут ещё удобство зависит от настроек шрифта и отображения. Кто-то любит поплотнее, а кто-то, как я, интерлиньяж побольше. Чем больше высота строки, тем желательно больше давать отступ.
Вы не с той стороны смотрите: для парсера, компилятора, интерпретатора - всё равно, есть ли у вас пробелы. Но это исходный код, который хранится в системе контроля версий и в такой ситуации важно, чтобы правки были по делу. Если автор пришёл коммитить фичу, но заодно поменял пробелы на табы или удалил пробелы в конце строки - это плохой коммит. Поэтому этот конфиг настаивает ваш редактор под проект и вы не делаете лишнего. Вы можете отключить стирание пробелов, суть не в этом.
У меня в VSCode .editorconfig не перекрывает все настройки редактора: если размер отступа он регулирует отлично, то, например, чтобы определить вставку последней строки - нужно обязательно отключить её в редакторе. То есть, чтобы нормально работать с .editorconfig, нужно сбросить некоторые настройки редактора
@@pepelsbey а, вон про какую говорилось))) а я по контексту подумал, что про vs code который в начале видео имелось ввиду)) думал может там какой-то кастомный vs codium с поддержкой editorconfig😁😁😁
Хотя бы потому, что ESLint работает только с JS, а в типичном проекте есть, как минимум, ещё и CSS, а также конфиги, маркдаун, YAML, shell-скрипты и так далее. Как их писать всем одинаково? С помощью EditorConfig.
Могут ли быть конфликты с другими "линтерами", если их использовать параллельно? Их зона ответственности иногда пересекается (например tabWidth в .prettierrc и тд) Eslint, Prettier, Stylelint
Преимущества в том, что он не навязывает стиль форматирования и отвечает только за те параметры, про которые я рассказал в видео. А ещё он поддерживает не 10 типов файлов, а любые текстовые файлы. Но вам не нужно выбирать, их можно использовать вместе.
Убедитесь, что у вас есть нужное расширение или настройка в редакторе, файл в корне проекта и назван .editorconfig. Почитайте внимательно editorconfig.org/
А может не надо пробелов? Какой в них смысл? Показывать вложенность? Современные редакторы подсветят вам скобки. Проблема решена. А если большая вложенность? Значит неверно спроектирован код. Принцип единственной ответственности, декомпозиция, кип ит симпл стьюпид и т.д. Нет - мучаемся в 21 веке, думаем а сколько ставить абсолютно ненужных символов перед языковыми конструкциями. Это болезнь, господа.
@@pepelsbey за визуальную часть должны отвечать редакторы. Мы не пишем, не можем написать красную скобку, не можем выделить красным цветом метод, синим аргументы, и т.д. PhpStorm, как и куча IDE может. Он анализирует код, понимает и подсвечивает, облегчая нам понимание. Надеюсь, когда ни будь он будет отображать код с отступами, которые будут реализованы движком, а не как сейчас авто форматированием и пробелами. Пробелы не нужны в коде. Это лишние символы. Это лишняя работа и лишние мысли. И вот уже появляются...плагины. Первый шаг сделан. Но и это шаг немного не туда. Дело в том, что на практике не существует стандартов форматирования кода. Те же PHP PSR не исполняются, много крупных компаний отказались от стандарта. И в каждой компании есть свой код стайл. Увлеченность форматированием кода доходит до весьма неоднозначных решений - дать разработчикам относительную свободу в плане форматирования (ставь хоть сколько пробелов). А при закачке кода в репозиторий, там стоит специальный сервис, форматирующий код в единый код стайл компании. В общем у того что субъективно, нет решений. Надо просто чтобы код работал, а как его форматировать должна решать IDE, а не символы в коде.
00:00 Интро
00:52 Четыре пробела в CSS
02:12 Два пробела в JSON
02:52 Почему так
03:55 Обзор конфига
05:35 Принцип работы
06:15 Настройка редактора
08:13 Автоматизация
10:35 Конфиг на Гитхабе
12:30 Выводы
12:57 Аутро
Давно не было такого полезного контента. Очень заходит подробное разбирательство каких-то мелочей, важных и незаметных.
видно что есть сценарий, ничего лишнего, все лаконично-понятно. и главное - полезно. спасибо вам!
так интересно рассказывает)
Не знал что гитхаб уважает editorconfig, спасибо, ждем механических посиделок)
После фразы "вы наверняка знаете..." (0:09) хочется сказать, что, если бы я знал, я бы и про editconfig не гуглил))
хорошее видео, только для подготовленных зрителей
Искал кого-то кто в двух словах объяснит что это и зачем. Супер! Теперь всё ясно. Спасибо, большое.
Вадим, что не видос, то открытие я даже не знал такого)
Очень полезная штука этот Editor Config. Учусь на курсах (фронтенд), в прошлом году у нас ввели .editorconfig и сразу отпала куча вопросов новичковых по настройкам редактора. Теперь просто в каждый проект домашки кидаешь файлик в корень и спокойно работаешь. Красота!
Вадим лучший !
Я уже в каком-то выпуске подкаста у вас слышал про эту тему, но как-то немного пропустил это мимо ушей. А сейчас посмотрел, попробовал, удобно. :)
новичкам приходиться изучать много чего.
хороший спикер
Годные вещи в массы! 👍
Удобная штука! Спасибо
Спасибо!!
Как раз попал в компанию и работая над 1 проектом у нескольких разработчиков в редакторах разные отступы и нету файла .editconfig . Моё чувство перфекционизма постоянно напрягал тот факт, что редактируя файлы после других людей часто отступы у них и у меня разные и код превращается в хаотическую поломанную лестницу.
Очень тебе благодарен за то, что ты рассказал про данную возможность нормализовать этот беспорядок и про редактирование прямо в гитхабе😉
Спасибо!
Спасибо за полезный ролик!
Прикольно, вчера как раз удалил этот файл так как не понял откуда он взялся))
Возвращайте теперь )
Вадим, спасибо за видео! Когда выпуск с it бородой?
Сам жду! @ITBEARD, когда уже? )
Класс 👍
Спасибо, добавлю в свой проект
Норм видео.Хоть кто то обьяснил нормально что ето такое
Пересмотрел документацию Prettier'а, он умеет все то же что и editorConfig. Думаю если уже работаешь с Prettier то переходить особого смысла нет, а так для расширения кругозора очень даже, буду знать что такое есть)
Prettier поддерживает десяток форматов файлов и зачастую навязывает вам форматирование. EditorConfig поддерживает любые текстовые файлы и меняет настройки редактора под каждый. Форматированием вы занимаетесь сами. Не обязательно выбирать, можно использовать оба или хотя бы EditorConfig.
@@pepelsbey Спасибо, приму к сведению
@@pepelsbeyа конфликтовать они не будут?
Доброго времени суток! К сожалению довольно поздно посмотрел видео... Всё понятно, но скажите, как редактировать этот файл .editconfig? Где он лежит изначально? Его необходимо отредактировать в расширении EditorConfig for Visual Code?
Отбой! Понял как! Надо самому создать файл ".editorconfig" и в нем прописать необходимые инструкции. Потом это файл "забросить" в корень проекта. Спасибо! Отличное видео.
А чем можно урегулировать положение открывающей фигурной скобки - с новой строки или нет?
EditorConfig как я понял только про отступы, да?
Да, EditorConfig про универсальные настройки редактора (это его буквальное название). Расположение фигурных скобок нужно настроить в линтерах: ESLint, Stylelint, Prettier и так далее.
На самом деле в .editorconfig так же можно добавлять и кастомные правила. Например, PHPStorm (подозреваю, что и остальные продукты JetBrains) понимает правила, которые начинаются с `ij_`. Таких правил огромное множество, они фактически отражают все, что умеет настраивать сама IDE. Если вся команда использует IDE от JetBrains (как в моем случае), то у всех все отлично работает, а сам файл можно сгенерировать прямо на экране настроек "Code Style".
Про совместимость с другими IDE и наличие других видов кастомных правил ничего сказать не могу.
А что лучше использовать табы или пробелы? И есть ли ощутимая разница?
Лучше использовать пробелы, так как в зависимости от системы табы могут быть разного размера
Современные редакторы делают разницу незаметной, а EditorConfig помогает придерживаться стиля кода. Но подробнее расскажу в отдельном видео :) Есть нюансы.
@@pepelsbey Тогда жду подробное видео) Спасибо за то, что рассказываете не только как закодить что-то, но и как это сделать удобно и быстро на уровне редактора
Как мы с вами поняли из этого видео, ширина табов управляется с помощью EditorConfig во всех нужных местах.
th-cam.com/video/SsoOG6ZeyUI/w-d-xo.html
Можно ли настроить свой редактор чтоб он сохранял файлы в соответствии .editorconfig, а отображал как мне нравиться. Например в vs code
Не знаю таких настроек, к сожалению. Это ещё может работать с табами, но с пробелами точно нужно переформатировать всё заново.
@@pepelsbey спасибо за ответ, с табами лучше, но мир почему то больше любит пробелы((
А еще можно использовать гит хуки, и прогонять тесты перед попыткой закоммитить. Если измененный код не проходит тесты - нельзя сделать коммит, а соответственно и запушить код, который не соответствует критериям. Профит, использовал такую схему когда в команде работали джуны.
Был бы рад видео которое объясняет как подружить Приттиер и ЕСЛинт. Я никак не могу понять как они должны работать в связке. Много опций пересекается.
Мне не очень нравятся хуки на Git, которые кидают ошибки - они нарушают простой и понятный интерфейс коммита или пуша. То есть это стресс, проблема и возня туда-сюда. Если нет автофикса (это тоже странно, но понятне), то такое лучше вешать в пулреквесте в виде тест-экшенов.
Тогда ты спокойно напишешь и отправишь код, а потом тебе интерфейс вежливо скажет, что нужно кое-что поправить, прежде чем код попадёт в мастер.
Я видел несколько рецептов как соединить ESLint и Prettier и ни один не показался простым. Мне кажется, что среди них лучше выбрать один и спокойно жить дальше со своим выбором.
@@pepelsbey Согласен, но воркфлоу работы в прошлой компании, где мы это практиковали, не предусматривал Пуллреквесты. А джуны частенько писали очень слабый откровенный говнокод, такие проверки приучали их по крайней мере следовать стайлгайду.
Вадим! Как привыкнуть к тому, что на VSCode пока не так хорошо с автокомплитом имен функций из других файлов, как в phpstorm? Вводишь что-то, он предлагает сразу совпадение или переменные из других файлов. Или там есть такое? Может надо какой-то плагин донастроить, ну чтобы так же автокомплит делал.. наверно я только поэтому использую медленный phpstorm
VS Code - это не IDE, хотя иногда кажется, что он туда стремится. Вряд ли вы сможете докрутить VS Code до состояние WebStorm с помощью плагинов, это всё-таки лёгкий тестовый редактор, у него другие цели.
эта штука с претьером дружит? или что-то одно должно быть
Вполне дружит, если там не конфликтующие настройки. Более того, Prettier поддерживает EditorConfig prettier.io/blog/2017/12/05/1.9.0.html
Здравствуйте Вадим, хотелось бы узнать, какую тему вы используете для vscode ?)
GitHub marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
@@pepelsbey понел, спасибо за ответ, ждём новые видео и стримы))
Меня тоже немного корежит последняя пустая строка, чем обсуловлена её необходимость? Типа чтобы не нужно было вручную переводить каретку если хочешь что-то дописать в конец?
Знаете, не гуглится сходу. Так себя ведут по умолчанию некоторые консольные текстовые редакторы. Вероятно, что причины чисто исторические.
11:42 Если бы вы сейчас использовали indent_style = tab величину отступа задавали бы через indent_size? Зачем нужен tab_width? Понятно что он делает, но никогда не видел чтоб он применялся, даже с табуляцией обычно ставят indent_size.
Это группы настроек: indent_size работает только с пробелами (сколько их вставить), tab_width работает только с табами (какой ширины их отрисовать)
@@pepelsbey @Vadim Makeev indent_size работает и с пробелами и с табами, indent_size = 4 отрисует таб шириной четыре пробела. Но если указан indent_style = tab и одновременно indent_size и tab_width с разными значениями применится tab_width так как он для табов приоритетнее.
На официальной странице написано "tab_width: a whole number defining the number of columns used to represent a tab character. This defaults to the value of indent_size and doesn't usually need to be specified.", зачем, в таком случае нужен tab_width, если есть универсальный indent_size я не понял и ни разу не видел его в .editorconfig. Но всегда было интересно зачем это свойство.
Ну так я и сказал: это пары, их используют в зависимости от того, что в проекте принято. Если их использовать одновременно, то возникает путаница. Значит не нужно так делать :)
+
8 он не видел... www.kernel.org/doc/html/v4.10/process/coding-style.html
1) Indentation
Tabs are 8 characters, and thus indentations are also 8 characters. There are heretic movements that try to make indentations 4 (or even 2!) characters deep, and that is akin to trying to define the value of PI to be 3.
Почему не принято использовать 3 пробела, когда 4 кажется много, а 2 - мало?!
Использую 3 пробела, удобно, думаю стоит ли переходить на 2.
Сложно ответить на вопрос «почему не принято» :) Просто так сложилось.
За вами уже выехала dev-инквизиция
Есть люди, которые так делают. Но это скорее экзотика. Наверное, потому что 2 или 4 более распространено. Тут ещё удобство зависит от настроек шрифта и отображения. Кто-то любит поплотнее, а кто-то, как я, интерлиньяж побольше. Чем больше высота строки, тем желательно больше давать отступ.
На что влияет наличие пробела в конце строки? Не понял. Место в памяти?
Вы не с той стороны смотрите: для парсера, компилятора, интерпретатора - всё равно, есть ли у вас пробелы. Но это исходный код, который хранится в системе контроля версий и в такой ситуации важно, чтобы правки были по делу. Если автор пришёл коммитить фичу, но заодно поменял пробелы на табы или удалил пробелы в конце строки - это плохой коммит. Поэтому этот конфиг настаивает ваш редактор под проект и вы не делаете лишнего. Вы можете отключить стирание пробелов, суть не в этом.
Можно подробней, что за тесты проекта?
Вы можете настроить так, чтобы пакет editorconfig-checker проверял все файлы по этому файлу www.npmjs.com/package/editorconfig-checker
У меня в VSCode .editorconfig не перекрывает все настройки редактора: если размер отступа он регулирует отлично, то, например, чтобы определить вставку последней строки - нужно обязательно отключить её в редакторе. То есть, чтобы нормально работать с .editorconfig, нужно сбросить некоторые настройки редактора
Звучит подозрительно, перепроверю
7:13 а что значит "та visual studio была другая"?
Есть Visual Studio IDE, а есть лёгкий Visual Studio Code visualstudio.microsoft.com/
@@pepelsbey а, вон про какую говорилось))) а я по контексту подумал, что про vs code который в начале видео имелось ввиду)) думал может там какой-то кастомный vs codium с поддержкой editorconfig😁😁😁
editorconfig вообще не про линтеры, линтер может докапаться вплоть до того как проверяются переменная в if
Почему нельзя использовать только еслинт, без притиера и эдиторконфига? Он же все умеет и не нужно 25 разных инструментов.
Хотя бы потому, что ESLint работает только с JS, а в типичном проекте есть, как минимум, ещё и CSS, а также конфиги, маркдаун, YAML, shell-скрипты и так далее. Как их писать всем одинаково? С помощью EditorConfig.
Кто ставит дизлайки, вы в своем уме?
Зато это честно :) Можно прийти и сказать: нравится или нет, понял или нет. Вы тоже не стесняйтесь.
Могут ли быть конфликты с другими "линтерами", если их использовать параллельно?
Их зона ответственности иногда пересекается (например tabWidth в .prettierrc и тд)
Eslint, Prettier, Stylelint
Если настройки не конфликтуют, то конфликтов не будет. Некоторые линтеры умеют видеть этот конфиг и учитывать его.
@@pepelsbey добрый день! Т.е., по сути, аналогичный prettier инструмент? Или у него есть какие-то преимущества?
Преимущества в том, что он не навязывает стиль форматирования и отвечает только за те параметры, про которые я рассказал в видео. А ещё он поддерживает не 10 типов файлов, а любые текстовые файлы. Но вам не нужно выбирать, их можно использовать вместе.
@@ИгорьБарбашов-т7ц линтеры меняют и проверяют исходные файлы. EditorConfig же меняет настройки редактора на лету в зависимости от открытого файла.
Не видит файл и форматирование не работает
Убедитесь, что у вас есть нужное расширение или настройка в редакторе, файл в корне проекта и назван .editorconfig. Почитайте внимательно editorconfig.org/
Пора бы переименовать master в main
Уже переименовал
А может не надо пробелов? Какой в них смысл? Показывать вложенность?
Современные редакторы подсветят вам скобки. Проблема решена.
А если большая вложенность? Значит неверно спроектирован код.
Принцип единственной ответственности, декомпозиция, кип ит симпл стьюпид и т.д.
Нет - мучаемся в 21 веке, думаем а сколько ставить абсолютно ненужных символов перед языковыми конструкциями. Это болезнь, господа.
Визуальный отступ «сильнее» цветового, так что нет, не получится
@@pepelsbey за визуальную часть должны отвечать редакторы.
Мы не пишем, не можем написать красную скобку, не можем выделить красным цветом метод, синим аргументы, и т.д.
PhpStorm, как и куча IDE может. Он анализирует код, понимает и подсвечивает, облегчая нам понимание.
Надеюсь, когда ни будь он будет отображать код с отступами, которые будут реализованы движком, а не как сейчас авто форматированием и пробелами.
Пробелы не нужны в коде. Это лишние символы. Это лишняя работа и лишние мысли. И вот уже появляются...плагины. Первый шаг сделан.
Но и это шаг немного не туда. Дело в том, что на практике не существует стандартов форматирования кода. Те же PHP PSR не исполняются, много крупных компаний отказались от стандарта. И в каждой компании есть свой код стайл.
Увлеченность форматированием кода доходит до весьма неоднозначных решений - дать разработчикам относительную свободу в плане форматирования (ставь хоть сколько пробелов). А при закачке кода в репозиторий, там стоит специальный сервис, форматирующий код в единый код стайл компании.
В общем у того что субъективно, нет решений. Надо просто чтобы код работал, а как его форматировать должна решать IDE, а не символы в коде.
Как исключить папки? [folder/**.ext] - не работает. Как только задаёшь путь - файлы не проверяются
Мне помогли примеры на editorconfig.org, исключение - !
@@pepelsbey уже открыл багрепорт, проблема в плагине и в определении путей, он попросту не работает на винде. Автор подтвердил.
Полезное видео, огромное спасибо!