User Guide Cancel

Format code

Last updated on Apr 25, 2024

Dreamweaver

Open app

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

Format code manually

Open a supported file.
Select Edit > Code > Apply Source Formatting.

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

Format selected code in a file manually

Open the code.
Select any part of the code.
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 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.

Create a new file in the site root with filename as .jsbeautifyrc

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 
 
    } 
 
}

Edit the default rules to change the default code formatting rules as per below table and save the changes.
Relaunch Dreamweaver and apply code formatting for a CSS, JS, and PHP file.

Code is formatted as per the updated formatting rules.

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

}

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

Get help faster and easier

New user?

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
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Format code

Format code manually

Format selected code in a file manually

Edit default rules for code formatting

More like this

Get help faster and easier

Ask the Community

Contact Us