Format code

Set preferences that control the format of your code whenever you create or edit a file.

Format code manually

  1. Open a supported file.

  2. Select Edit > Code > Apply Source Formatting.

    Or, select Apply Source Formatting from Common Toolbar > Format Source Code.

Format selected code in a file manually

  1. Open the code.

  2. Select the code.

  3. Select Edit > Code > Apply Source Formatting To Selection.

    Or, select Apply Source Formatting to selection from Common toolbar-> Format Source Code.

    Note:

    If you select a code in between of any tag and apply source formatting to the selection, then formatting is applied till the parent tag.

Edit default rules for code formatting

You can customize the CSS, JS, and PHP code formatting by adding formatting rules in .jsbeautifyrc file that is in your site root folder.

To add the .jsbeautifyrc file, follow the steps:

Note:
  • The following instructions are applicable only for CSS, JS, and PHP documents.
  • HTML tags in a PHP document are formatted as per preferences in tag libraries.  You can format the code within PHP blocks with below instructions.
  1. Create a new file in the site root with filename as .jsbeautifyrc

  2. Copy paste below default formatting rules for CSS, JS, and PHP in .jsbeautifyrc and save the file.

    { 
     
        "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 
     
        } 
     
    }
  3. Edit the default rules to change the default code formatting rules as per below table and save the changes.

Note:

If you want to customize the code formatting for PHP, CSS, and JS files in other Dreamweaver sites then you need to place the customized file .jsbeautifyrc in the site root folder.

Rules for CSS, JS, and PHP formatting:

CSS Rules Default values in Dreamweaver Description
  preserve_newlines false Whether to preserve empty lines.
selector_separator_newline false

Whether to put a newline between comma-separated selectors.

For Example: ".div, .P"

end_with_newline false Whether to end the file with an empty line.
newline_between_rules false Whether to add a new line after every CSS rule.
space_around_selector_separator true

To ensure space around selector separators:  '>', '+', '~'

For Example: "a>b" would become "a > b" on applying source formatting.

JS Rules Default values in Dreamweaver Description
  "eol" "\n" Character used to represent end of line.
preserve_newlines true Whether to preserve empty lines.
max_preserve_newlines 3

For "max_preserve_newlines": N, 

N-1 empty lines are preserved on applying formatting, when more than N-1 empty lines are present in the JS file.

Note: max_preserve_newlines is only applicable if preserve_newlines is set to true.

space_after_anon_function true

Whether to add space before an anonymous function's parenthesis.

For Example:"function()" would become "function ()" on applying source formatting.

keep_array_indentation false Allow or preserve newline inside array body.
space_before_conditional true

Whether to add a space before a conditional statement

For Example:  "if(true)"  would become "if (true)" on applying formatting.

break_chained_methods false

Allow or preserve newline between chained functions.

For Example:

`foobar().baz()`

unescape_strings false

Should printable characters in strings encoded in \xNN notation be unescaped.

For Example:

"\x65\x78\x61\x6d\x70\x6c\x65" would become "example" on applying source formatting.

wrap_line_length 0 Lines should wrap at next opportunity after these number of characters.
end_with_newline true

To ensure a newline is added at the end of file.

comma_first false While breaking a line at comma, this flag is used to ensure comma is the first char of line.
operator_position after-newline

If a long conditional expression is broken into multiple lines then this flag is used to define the position of  operators in the lines.

You can edit the flag with below values:

  • before-newline
  • after-newline
  • preserve-newline
Note:

The rules for PHP formatting are same as for JS formatting (described in above table) with two additional rules given below:

PHP Rules Default values in Dreamweaver Description
  brace_style collapse

You can control curly brackets position with this option:

For Example:

function f() {

// code

}

or 

function f()

{

// Code

}

You can assign below values:

  • "collapse" - put curly brackets on the same line as control statements
  • "expand" - put curly brackets on own line (Allman / ANSI style)
  • "end-expand" - put end curly brackets on own line
  • "none" - attempt to keep them where they are
  • any of the former + ",preserve-inline"- preserve-inline tries to preserve inline blocks of curly brackets
space_in_paren true

Whether to add spaces inside the parenthesis.

For Example:

include('header.php')

would become

include( 'header.php' ) on applying formatting

More like this

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online