How to set HTML Auto Indent format on Sublime Text 3

Question

I have a question while I m writing HTML code on Sublime Text 3  I just want to set auto indent format of HTML  For example  when I write p tag like under code  the indentation works like that    lt p gt  Hello world   lt  p gt    But I want to write like under code instead of above    lt p gt    Hello world   lt  p gt    And not only p tag also ul  ol and etc   How can I set auto indent format of HTML on Sublime Text 3

User · Answer

Create a Keybinding

To auto indent on Sublime text 3 with a key bind try going to

Preferences > Key Bindings - users

And adding this code between the square brackets

{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}

it sets shift + alt + f to be your full page auto indent.

Source here

Note: if this doesn't work correctly then you should convert your indentation to tabs. Also comments in your code can push your code to the wrong indentation level and may have to be moved manually.

User · Answer

This was bugging me too  since this was a standard feature in Sublime Text 2  but somehow automatic indentation no longer worked in Sublime Text 3 for HTML files   My solution was to find the Miscellaneous tmPreferences file from Sublime Text 2  found under  AppData  Roaming Sublime Text 2 Packages HTML  and copy those settings to the same file for ST3   Now package handling has been made more difficult for ST3  but luckily you can just add the files to your  AppData  Roaming Sublime Text 3 Packages folder and they overwrite default settings in the install directory  Just save this file as   AppData  Roaming Sublime Text 3 Packages HTML Miscellaneous tmPreferences  and auto indent works again like it did in ST2    lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE plist PUBLIC  -  Apple Computer  DTD PLIST 1 0  EN   http   www apple com DTDs PropertyList-1 0 dtd  gt   lt plist version  1 0  gt   lt dict gt       lt key gt name lt  key gt       lt string gt Miscellaneous lt  string gt       lt key gt scope lt  key gt       lt string gt text html lt  string gt       lt key gt settings lt  key gt       lt dict gt           lt key gt decreaseIndentPattern lt  key gt               lt string gt   x                s                amp lt     html                 A-Za-z0-9   b   amp gt    amp gt               -- amp gt                amp lt    php   s  else if   end if for each   while                                 lt  string gt           lt key gt batchDecreaseIndentPattern lt  key gt               lt string gt   x                s                amp lt     html                 A-Za-z0-9   b   amp gt    amp gt               -- amp gt                amp lt    php   s  else if   end if for each   while                                 lt  string gt           lt key gt increaseIndentPattern lt  key gt               lt string gt   x                s               amp lt       area base br col frame hr html img input link meta param    amp gt     amp gt                   A-Za-z0-9       s  amp gt   b   amp gt    amp gt       amp lt   1 amp gt                 amp lt  --     -- amp gt                 amp lt   php    b if else   if   for   each   while  b        end 1                                       lt  string gt           lt key gt batchIncreaseIndentPattern lt  key gt               lt string gt   x                s               amp lt       area base br col frame hr html img input link meta param    amp gt     amp gt                   A-Za-z0-9       s  amp gt   b   amp gt    amp gt       amp lt   1 amp gt                 amp lt  --     -- amp gt                 amp lt   php    b if else   if   for   each   while  b        end 1                                       lt  string gt           lt key gt bracketIndentNextLinePattern lt  key gt            lt string gt  amp lt  DOCTYPE      amp gt   lt  string gt       lt  dict gt   lt  dict gt   lt  plist gt

User · Answer

This is an adaptation of the above answer  but should be more complete   To be clear  this is to re-introduce previous auto-indent features when HTML files are open in Sublime Text  So when you finish a tag  it automatically indents for the next element   Windows Users  Go to C  Program Files Sublime Text 3 Packages extract HTML sublime-package as if it is a zip file to a directory    Open Miscellaneous tmPreferences and copy this contents into the file        lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE plist PUBLIC  -  Apple Computer  DTD PLIST 1 0  EN   http   www apple com DTDs PropertyList-1 0 dtd  gt   lt plist version  1 0  gt   lt dict gt       lt key gt name lt  key gt       lt string gt Miscellaneous lt  string gt       lt key gt scope lt  key gt       lt string gt text html lt  string gt       lt key gt settings lt  key gt       lt dict gt           lt key gt decreaseIndentPattern lt  key gt               lt string gt   x                s                amp lt     html                 A-Za-z0-9   b   amp gt    amp gt               -- amp gt                amp lt    php   s  else if   end if for each   while                                 lt  string gt           lt key gt batchDecreaseIndentPattern lt  key gt               lt string gt   x                s                amp lt     html                 A-Za-z0-9   b   amp gt    amp gt               -- amp gt                amp lt    php   s  else if   end if for each   while                                 lt  string gt           lt key gt increaseIndentPattern lt  key gt               lt string gt   x                s               amp lt       area base br col frame hr html img input link meta param    amp gt     amp gt                   A-Za-z0-9       s  amp gt   b   amp gt    amp gt       amp lt   1 amp gt                 amp lt  --     -- amp gt                 amp lt   php    b if else   if   for   each   while  b        end 1                                       lt  string gt           lt key gt batchIncreaseIndentPattern lt  key gt               lt string gt   x                s               amp lt       area base br col frame hr html img input link meta param    amp gt     amp gt                   A-Za-z0-9       s  amp gt   b   amp gt    amp gt       amp lt   1 amp gt                 amp lt  --     -- amp gt                 amp lt   php    b if else   if   for   each   while  b        end 1                                       lt  string gt           lt key gt bracketIndentNextLinePattern lt  key gt            lt string gt  amp lt  DOCTYPE      amp gt   lt  string gt       lt  dict gt   lt  dict gt   lt  plist gt      Then re-zip the file as HTML sublime-package and replace the existing HTML sublime-package with the one you just created   Close and open Sublime Text 3 and you re done

User · Answer

One option is to type  command     shift     p   or the equivalent  and then type  indentation   The top result should be  Indendtation  Reindent Lines   Press  enter  and it will format the document    Another option is to install the Emmet plugin  http   emmet io    which will provide not only better formatting  but also a myriad of other incredible features  To get the output you re looking for using Sublime Text 3 with the Emmet plugin requires just the following   p  tab  enter  Hello world    When you type p  tab  Emmet expands it to    lt p gt  lt  p gt    Pressing  enter  then further expands it to    lt p gt    lt  p gt    With the cursor indented and on the line between the tags  Meaning that typing text results in    lt p gt      Hello  world   lt  p gt

[html] How to set HTML Auto Indent format on Sublime Text 3?

Create a Keybinding

Examples related to html

Examples related to indentation

Examples related to sublimetext3