In this example, I have copied all of the code from the Learn HTML by Building a Cat Photo App project and removed all of the indentation to show you what poor code formatting looks like. A large part of readability is properly indenting your HTML. When you are writing code, it is important to write code that is readable by other developers. ĭrive 1.2 miles and turn left on Cherry laneĭrive 4.5 miles and turn right on Sycamore Rd. The ol element is the parent of the li elements. The li elements are indented two spaces to the right and nested inside the ol element. The ul element is the parent of the li elements. The li elements are indented two spaces to the right and nested inside the ul element. Commonly Used Examples of Indentation in HTML Unordered lists The h2 and p elements are children of the main element. īut if I edit the code by moving the h2 and p elements two spaces to the right, now we have proper indentation. In this next example, I have an h2 and p element nested inside a main element without indentation. Now we can see that the p element is nested inside its parent element which is the div. This is considered best practice and will make your code more readable by other developers. This is what indentation looks like for HTML To indent the p element, I will move it two spaces to the right. In this example, I have a p element nested inside a div element. Nested elements are known as children of their parent element. Whenever you have HTML elements nested inside other HTML elements, it's best to use indentation. In this article, I will show you how to properly indent your HTML files and explain why it is important to properly format your code. But how do you do that in HTML and why is it important? The K&R style (Kernighan & Ritchie Style) keeps open braces on the same line for control structures, types, functions and methods.When you are building out HTML files, it's really important to indent your code. This applies to all control statements and declarations. This style puts the braces on the next line. The Allman style is named after Eric Allman. Subsequent lines are indented one level deeper than the initial lineīody of a declarations starts on a new line, while control flow block starts on the same line as the construct This formatting style is compliant with PSR-1 and PSR-2 standards. This formatting style is compliant with PSR-12 which expands and replaces PSR-2, and requires adherence to PSR-1. The formatting rules which override the selected code style The code style that formatter is going to follow. Number of spaces that represent a single tab, this value is used only when editor.insertSpaces is trueĮnables or disables automatic formatting of code block upon typing or }. Spaces are used to indent code if true, tabs are used otherwise. All the relevant settings and their effects are summed up in the following table. The formatting behavior is set in settings.json. editor.formatOnPaste to true triggers format when pasting.editor.formatOnSave to true instructs the formatter to run when saving the document.editor.formatOnType to true which enables the editor to format code blocks and statements upon typing and }.Or it can be triggered based on specific user actions, such as typing, saving or pasting. Format Selection ( Ctrl+K Ctrl+F) - Format the selected text.Format Document ( Shift+Alt+F) - Format the entire active file. The formatting can be triggered explicitly by two actions: The code formatting normalizes whitespaces, line endings, opening and closing braces, indentation, adds or removes new lines when necessary and pretty print spaces. Note: In order to format the document, it must be syntax-error free. The integrated formatter helps you keep the code looking clean and maintain the selected code style (e.g.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |