Как отформатировать код
Код должен выглядеть аккуратно и оформляться, как принято. Почему? Ну потому, что другой человек, который будет смотреть твой код, вряд ли обрадуется, когда ему придется разбирать слипшиеся строчки, разбросанные в беспорядке скобки и написанные русскими словами названия переменных. Особенно плохо будет если это, например, код тестового задания, которое ты сделал, чтобы устроиться на работу. Если он будет неряшливым, это будет большой минус.
Не бойся, сделать код аккуратным совсем не сложно. Самый универсальный способ — вставить его на сайт http://phpformatter.com и нажать кнопку Format. Робот сам выровняет твой код в лучших традициях.
Если ты используешь для редактирования кода IDE, то все еще проще (а если не используешь, то почему бы не начать?):
- Eclipse PDT — жми Ctrl + Shift + F для автоматического форматирования кода.
- Netbeans for PHP — жми Alt + Shift + F
- Zend Studio — жми Ctrl + A (выделить все), затем Ctrl + Shift + F
- PhpStorm — жми Ctrl + Alt + L
- PHPDesigner — поищи нужную опцию в меню, она там есть. Или жми Ctrl + Shift + F1
- Komodo IDE — правая кнопка -> Format Using.
Вот так IDE упрощает жизнь (еще в них есть автодополнение, автоматическая проверка кода и подсветка ошибок, навигация по файлам и функциям и много чего еще).
Если ты используешь Sublime Text 3, ставь расширение https://github.com/akalongman/sublimetext-codeformatter , но с ним придется повозиться, устанавливая и настраивая нужные компоненты, подойдет только для опытных пользователей.
Основные правила
Если ты вдруг решил выровнять код вручную, запомни эти правила:
- переменные и функции пишутся с маленькой буквы, подчеркивание не используется, используется camelCase, пример: $x, $numberOfPeople, printResults()
- название функции начинается с глагола, в стиле «сделайЧтоТо»: findUserByEmail
- не знаешь английский (неужели такое бывает?) Не беда, в 21 веке есть решение этой проблемы. Не пиши транслитом, открой лучше Гугл Транслейт и найди название для переменной там
- в именах классов используется CamelCase, первая буква большая, «_» может использоваться
- мы предпочитаем подстановку переменных вместо конкатенации строк: «I am $age years old» — хорошо, ‘I am ‘ . $age . ‘ years old’ — плохо
- мы используем для отступов 4 пробела, а не табы (нужно настроить редактор, чтобы при нажатии Tab он вставлял 4 пробела), так как с пробелами код выглядит одинаково на любом сайте и устройстве
- скобки в for и if/else ставятся так (египетские скобки):
if (...) < ... > else < ... > for (...) < . . >
- у определений функций и классов так:
function doWorkForMe(. ) < ... >
- стоит ставить тайп-хинты для аргументов функций, результатов функций, свойств классов (если версия PHP ≥ 7.4):
class PersonRegistry < private array $registry; public function findByEmail(string $email): Person .
Рекомендации
Более подробно и с примерами правила описаны в рекомендациях PSR. Бывают и другие стили оформления кода, но PSR — наиболее распространенные и популярные:
- PSR-1 – Базовый стандарт оформления кода
- PSR-12 Extended Coding Style Guide (англ.)
Форматирование кода
Задайте предпочтительные настройки, которые можно применять для форматирования кода каждый раз при создании или изменении файла.
Форматирование кода вручную
Откройте поддерживаемый файл.
Выберите Редактировать > Код > Применить исходное форматирование.
Или выберите Применить исходное форматирование в разделе Общая панель инструментов > Форматировать исходный код.
Форматирование выделенного кода в файле вручную
Откройте код.
Выделите код.
Выберите Редактировать > Код > Применить исходное форматирование к выделенному.
Или выберите Применить исходное форматирование к выбранному в разделе Общая панель инструментов > Форматировать исходный код.
Примечание.
При выделении кода в любом теге и применении исходного форматирования к выделенному фрагменту форматирование применяется к родительскому тегу.
Изменение стандартных правил форматирования кода
Вы можете регулировать форматирование кода CSS, JS и PHP путем добавления правил форматирования в файл .jsbeautifyrc, который расположен в корневой папке сайта.
Чтобы добавить файл .jsbeautifyrc, выполните следующие шаги.
Примечание.
- Следующие инструкции относятся только к документам CSS, JS и PHP.
- HTML-теги в документе PHP форматируются в соответствии с установками в библиотеках тегов. Вы можете форматировать код внутри блоков PHP в соответствии с нижеуказанными инструкциями.
Создайте новый файл в корневой папке сайта с именем .jsbeautifyrc.
Скопируйте нижеприведенные стандартные правила форматирования для CSS, JS и PHP в .jsbeautifyrc и сохраните файл.
< "js": < "eol": "\n", "preserve_newlines": true, "max_preserve_newlines": 3, "space_after_anon_function": true, "keep_array_indentation": false, "space_before_conditional": true, "break_chained_methods": false, "unescape_strings": false, "wrap_line_length": 0, "end_with_newline": true, "comma_first": false, "operator_position": "after-newline" >, "css": < "preserve_newlines": false, "selector_separator_newline" : false, "end_with_newline": false, "newline_between_rules": false, "space_around_selector_separator": true >, "php": < "eol": "\n", "preserve_newlines": true, "max_preserve_newlines": 3, "space_after_anon_function": true, "brace_style": "collapse", "keep_array_indentation": false, "space_before_conditional": true, "break_chained_methods": false, "unescape_strings": false, "wrap_line_length": 0, "end_with_newline": false, "comma_first": false, "space_in_paren":true >>
Скорректируйте стандартные правила по изменению правил форматирования кода согласно нижеприведенной таблице и сохраните изменения.
Примечание.
Если вы хотите настроить форматирование кода для файлов PHP, CSS и JS на других сайтах Dreamweaver, то необходимо разместить настроенный файл .jsbeautifyrc в корневую папку сайта.
Правила форматирования CSS, JS и PHP:
Возможность поместить новую строку между инструментами выбора, разделенными запятыми.
Возможность оставить пробелы вокруг разделителей инструмента выбора: «>», «+», «~».
Например: «a>b» становится «a > b» при применяемом исходном форматировании.
Для «max_preserve_newlines»: N,
пустые строки (N-1) сохраняются при применении форматирования, если в файле JS имеется более N-1 пустых строк.
Примечание. max_preserve_newlines применимо только в том случае, если preserve_newlines имеет значение true.
Возможность добавить пробел перед скобкой анонимной функции.
Например: «function()» становится «function ()» при применяемом исходном форматировании.
Добавление пробела перед условным оператором.
Например: «if(true)» становится «if (true)» при применении форматирования.
Возможность разрешить или сохранить новую строку между последовательными функциями.
Ниже приведен пример.
Возможность сделать печатные символы в строках, зашифрованные в выражении \xNN, неэкранированными.
Ниже приведен пример.
«\x65\x78\x61\x6d\x70\x6c\x65» становится «example» при применении исходного форматирования.
Возможность вставить новую строку в конце файла.
Если длинное условное выражение делится на несколько строк, то этот флажок используется для определения положения операторов в строках.
Можно редактировать флажок с помощью нижеприведенных значений.
Примечание.
Правила форматирования PHP такие же, как и для форматирования JS (описано в приведенной выше таблице) с двумя дополнительными правилами, указанными ниже.
Можно управлять положением фигурных скобок с помощью этого параметра:
Ниже приведен пример.
Можно назначить значения ниже.
- collapse: поместить фигурные скобки на ту же строку, что и операторы управления.
- expand: поместить фигурные скобки на исходную строку (стиль Allman/ANSI).
- end-expand: поместить фигурные скобки на исходную строку.
- none: стараться сохранить их в месте расположения.
- Любое предыдущее значение + «,preserve-inline»: вложенный объект пытается сохранить встроенные блоки фигурных скобок.
Добавление пробелов в скобки.
Ниже приведен пример.
include( ‘header.php’ ) при применении форматирования.
Справки по другим продуктам
Форматирование кода и комментарии к коду — руководство для начинающих
В этой статье мы рассмотрим лучшие практики форматирования и комментирования исходного кода в HTML, CSS, PHP и JavaScript. Вы узнаете для чего они нужны и как правильно их использовать.
Зачем документировать код?
Форматирование и комментирование исходного кода не влияет на его работоспособность. Компьютеры вполне способны правильно выполнять код и без них.
Устройствам все равно, выглядит ли исходный код красиво, до тех пор, пока он является корректным и не выдает ошибок. Но правильное форматирование и комментирование делает программные исходники более понятными для человека.
Поэтому были созданы правила комментирования кода, которые делают исходный код более понятным для сторонних разработчиков. Это помогает им устранять возникающие проблемы и упрощает обслуживание программного обеспечения.
Основные аспекты форматирования кода
Общие правила форматирования исходного кода включают в себя:
- Отступы.
- Разрывы строк.
- Конвенции об использовании заглавных букв и имен.
- Стиль и написание функций, переменных.
- Использование и стиль комментариев.
Как отформатировать код — основы
Далее мы приведем несколько советов по поводу того, как правильно форматировать код.
Отступы, разрывы строк и форматирование
Использование форматирования помогает идентифицировать части исходного кода, которые связаны друг с другом. Для этого используются отступы, разрывы строк и другие элементы.
HTML
В HTML-разметке отступы добавляются перед элементами, чтобы показать, что они вложены друг в друга.
Отступы добавляются с помощью табуляции или нескольких пробелов.
CSS
Вот несколько примеров правильного форматирования CSS-кода:
.search-submit
Обратите внимание, что между операторами, фигурными скобками и свойствами есть пробел, они расположены в алфавитном порядке и на отдельной строке. В том числе и закрывающая скобка.
Также, чтобы сделать CSS-код более понятным, можно использовать сокращение. Сравните эти два фрагмента кода:
.footer < margin-bottom: 10px; margin-left: 5px; margin-right: 5px; margin-top: 10px; >.footer
Благодаря использованию сокращенной формы свойства margin второе правило CSS намного короче.
При использовании медиазапросов убедитесь в том, что вложили в них правила и правильно указали отступ.
@media screen and (min-width: 56.875em) < .site-header < padding-right: 4.5455%; padding-left: 4.5455%; >>
PHP
Аналогичные правила форматирования применяются и в PHP. Вот пример файла functions.php из темы оформления Twenty Nineteen:
function twentynineteen_widgets_init() < register_sidebar( array( 'name' =>__( 'Footer', 'twentynineteen' ), 'id' => 'sidebar-1', 'description' => __( 'Add widgets here to appear in your footer.', 'twentynineteen' ), 'before_widget' => '', 'after_widget' => ' ', 'before_title' => '', 'after_title' => '', ) ); > add_action( 'widgets_init', 'twentynineteen_widgets_init' );
Обратите внимание на отступы, переносы строк? Также обратите внимание, что все операторы => размещены на одном уровне. Это еще больше повышает читаемость кода.
JavaScript
Пример правильно отформатированного JavaScript- кода:
const HeadingColorUI = memo( function( < textColorValue, setTextColor, >) < return ( initialOpen= < false >colorSettings=< [ < value: textColorValue, onChange: setTextColor, label: __( 'Text Color' ), >, ] > /> ); > );
Конвенция об именовании
При именовании переменных, методов и функций важно, чтобы их имена отражали назначение каждого элемента кода. Вот несколько советов по поводу того, как это правильно реализовать.
Давайте осмысленные имена
Имена функций и методов должны объяснять, что делает этот фрагмент кода.
unregister_sidebar( 'header-right' );
Следуйте нормам конвенции
Языки программирования используют разные конвенции, и их нужно придерживаться.
В HTML и CSS все имена элементов, атрибутов, значений, селекторов, свойств, классов HTML и идентификаторов пишутся с маленькой буквы. Но в коде PHP и JavaScript встречаются следующие имена: camelCase , under_scores или with-hyphens.
Что правильно?
Сначала нужно изучить правила конвенции, которую использует программная платформа. Например, WordPress поощряет использование подчеркивания в PHP и camelCase в JavaScript. Поэтому, если вы работаете с платформой WordPress, рекомендуется придерживаться этих конвенций, тем более что многие существующие переменные и методы уже определены именно в этом формате.
Комментарии к коду
Но это только первый шаг. Также для повышения читаемости кода нужно добавить к нему комментарии.
Узнайте, как включить комментарии
Примеры добавления комментариев в различных языках программирования:
- HTML — . Если комментарий разбивается на несколько строк, используйте открывающие и закрывающие скобки и размещаете комментарии с отступом между ними.
- CSS — все, что находится между /* и */ является комментарием. Комментарии могут размещаться на нескольких строчках.
- PHP — поддерживает два типа комментариев: однострочные (отмечены // или #) и многострочные (создаются с помощью /* . */ из CSS).
- JavaScript — однострочные комментарии создаются с помощью //. Многострочные работают так же, как в CSS и PHP.
Хорошим примером комментирования кода является заголовок дочерней темы WordPress.
/* Theme Name: Twenty Seventeen Theme URI: https://wordpress.org/themes/twentyseventeen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device. Version: 2.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyseventeen Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
Используйте комментарии, чтобы уточнить разметку
Опишите, что делает конкретная функция или блок кода, к какому элементу относится фрагмент CSS и т. д. Например:
//* Добавляем новый размер изображений add_image_size( 'blog', 700, 300, TRUE );
Многие разработчики также используют комментарии для создания перечня CSS-стилей.
/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Normalize 2.0 Accessibility 3.0 Alignments 4.0 Clearings 5.0 Typography 6.0 Forms 7.0 Formatting 8.0 Lists 9.0 Tables 10.0 Links 11.0 Featured Image Hover 12.0 Navigation 13.0 Layout 13.1 Header 13.2 Front Page 13.3 Regular Content 13.4 Posts 13.5 Pages 13.6 Footer 14.0 Comments 15.0 Widgets 16.0 Media 16.1 Galleries 17.0 Customizer 18.0 SVGs Fallbacks 19.0 Media Queries 20.0 Print --------------------------------------------------------------*/
Инструменты форматирования кода
Чтобы упростить форматирование кода, можно воспользоваться инструментами автоматизации:
Форматирование кода онлайн
Вот несколько онлайн-сервисов для автоматического форматирования кода:
- HTML Formatter .
- PHP Formatter .
- CSS Formatter and Beautifier .
- JavaScript Beautifier .
Плагины для редактирования кода
Также есть плагины, которые могут автоматически делать подобные вещи.
- Atom Beautify .
- HTML-CSS-JS Prettify for Sublime Text .
- io (работает с Atom, Espresso, Sublime Text, WebStorm и другими).
Руководства по стилю
- Google Style Guides .
- Mozilla Coding Style Guide .
Форматирование кода в двух словах
Форматирование кода и комментарии облегчают понимание кода и поддержку. Из этого руководства вы узнали основные способы их реализации для улучшения рабочего процесса.
Вадим Дворников автор-переводчик статьи « Code Formatting and Code Comments – A Beginner’s Guide to Do It Right »
Как сделать отступ / форматировать выделенный код в visual studio code?
Как сделать отступ в строках, форматировать теги? Курс HTML/CSS ADVANCED. В уроке 37 говорятся про корректность кода / форматирование, но как это сделать, не сказали.
Заранее благодарю.
2 years ago
Похожие вопросы
- Слово киномонстр так и остается подчеркнуто и в синем цвете, как исправить?
- Все как в уроке сделано, а браузер не отображает изменений, как исправить?
- Укажите где именно я сделал ошибку и в чем она заключается?
- Не игнорте 42 урок (пробывал скачать исходник) не работает?
- Кнопка смотреть исчезает после стилизации, как исправить?
- Почему не подключается css к html?
- Не могу установить Footer
- Не изменяется страница, что делать?
- В уроке по html не пропускает задание с футером?
- Зависит ли от разрешения экрана то как потом будет выглядеть сайт?
2 ответов
Нужно нажимать на tab при каждом новом уровне вложенности, например:
EXAMPLE 2 years ago
Нужно выделить в Visual Studio Code участок кода который нужно отформатировать, потом нажать правой кнопкой мыши по выделенному участку и в этом меню выбрать Format Selection. Или можно весь документ отформатировать, для этого тоже самое сделать и выбрать Format Document.
2 years ago
Ваш ответ
- Создается структура файлов в visual studio code, не так как в уроке, как решить эту проблему?
- Не работает emmet в visual studio code?
- Не проходит оплата россия карта mastercard и есть возможность узнать цену в рублях?
- Здраствуйте у меня вопрос такой как мы можем получить только name с помощью цикл foreach?
- Как в sublime text открыть 2 папки в одном окне? открывается еще одно окно sublime text?
- Хочу изучить javascript для работы с nodejs, какой минимальный уровень знаний нужен?
- Есть ли готовые коды к урокам?
- Как открыть исходный код веб-страницы на mac в браузере?
- Не добавляется запись из xml в бд, что делаю неправильно?
- Позиционирование логотипа по центру хедера как сделать?
- Какой правильный синтаксис медиа запросов css?
- Как установить xampp на windows 32-bit?
- Как задать фоновое изображение для шапки (header) в bootstrap 3?
- Как прижать footer к низу в bootstrap 3?
- Xampp или open server?
- Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.
Русский —>
- Отзывы о курсах FructCode
- Политика конфиденциальности
- Условия использования
- Цены и оплата
- Все курсы
- Партнерская программа
- Комьюнити
- HTML/CSS Advanced
- Bootstrap 4
- VueJS Фреймворк
- Yii2 Фреймворк
- Modern Javascript
- Javascript/jQuery
- Все курсы