Formatage du code

Vous pouvez définir des préférences qui contrôlent la mise en forme de votre code chaque fois que vous créez ou modifiez un fichier.

Formatage manuel de code

  1. Ouvrez un fichier pris en charge.

  2. Sélectionnez Modifier > Code > Appliquer le format source.

    Ou, sélectionnez Appliquer le format source à partir de Barre d’outils Commun > Mise en forme du code source.

Formatage manuel de code sélectionné dans un fichier

  1. Ouvrez le code.

  2. Sélectionnez le code.

  3. Sélectionnez Modifier > Code > Appliquer le format source à la sélection.

    Ou, sélectionnez Appliquer le format source à la sélection à partir de Barre d’outils Commun > Mise en forme du code source.

    Remarque :

    Si vous sélectionnez un code entre des balises et appliquez le formatage source à la sélection, le formatage est appliqué jusqu’à la balise parent.

Modification des règles par défaut pour le formatage du code

Vous pouvez personnaliser les formats de code CSS, JS et PHP en y ajoutant des règles de formatage.Fichier jsbeautifyrc situé dans le dossier racine de votre site.

Pour ajouter le fichier .jsbeautifyrc, procédez comme suit :

Remarque :
  • Les instructions suivantes s’appliquent uniquement pour les documents CSS, JS et PHP.
  • Les balises HTML dans un document PHP sont formatées selon les préférences dans les bibliothèques de balises. Vous pouvez formater le code dans des blocs PHP à l’aide des instructions ci-dessous.
  1. Créez un nouveau fichier à la racine du site avec le nom de fichier .jsbeautifyrc.

  2. Copiez-collez les règles de formatage par défaut ci-dessous pour le code CSS, JS ou PHP dans le fichier .jsbeautifyrc et enregistrez le fichier.

    { 
     
        "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. Modifiez les règles par défaut pour modifier les règles de formatage du code par défaut conformément au tableau ci-dessous et enregistrez les modifications.

Remarque :

Si vous souhaitez personnaliser le formatage du code pour les fichiers PHP, CSS ou JS dans d’autres sites Dreamweaver, vous devez placer le fichier personnalisé .jsbeautifyrc dans le dossier racine du site.

Règles de formatage CSS, JS et PHP :

CSS Règles Valeurs par défaut dans Dreamweaver Description
  preserve_newlines false Pour conserver des lignes vides.
selector_separator_newline false

Pour placer une nouvelle ligne entre des sélecteurs séparés par une virgule.

Par exemple : « .div, .P »

end_with_newline false Pour terminer le fichier avec une ligne vide.
newline_between_rules false Pour ajouter une nouvelle ligne après chaque règle CSS.
space_around_selector_separator true

Pour garantir un espace autour de séparateurs de sélecteur : >, +, ~

Par exemple : « a>b » deviendrait « a > b » lors de l’application du formatage source.

JS Règles Valeurs par défaut dans Dreamweaver Description
  « eol » « \n » Caractère utilisé pour représenter une fin de ligne.
preserve_newlines true Pour conserver des lignes vides.
max_preserve_newlines 3

Pour « max_preserve_newlines » : N, 

N-1 lignes vides sont conservées lors de l’application du formatage lorsque plus de N-1 lignes vides sont présentes dans le fichier JS.

Remarque : max_preserve_newlines n’est applicable que si preserve_newlines est défini sur true.

space_after_anon_function true

Pour ajouter un espace avant une parenthèse de fonction anonyme.

Par exemple : « function() » deviendrait « function () » lors de l’application du formatage source.

keep_array_indentation false Autorise ou conserve une nouvelle ligne dans le corps du tableau.
space_before_conditional true

Pour ajouter un espace avant une instruction conditionnelle.

Par exemple : « if(true) » deviendrait « if (true) » lors de l’application du formatage.

break_chained_methods false

Autorise ou conserve une nouvelle ligne entre des fonctions concaténées.

Par exemple :

`foobar().baz()`

unescape_strings false

Si des caractères imprimables dans des chaînes codées en notation \xNN doivent être sans caractères d’échappement.

Par exemple :

« \x65\x78\x61\x6d\x70\x6c\x65 » deviendrait « exemple » lors de l’application du formatage source.

wrap_line_length 0 Les lignes doivent se terminer à la prochaine occasion après ce nombre de caractères.
end_with_newline true

Pour garantir qu’une nouvelle ligne est ajoutée à la fin du fichier.

comma_first false Lors de la rupture d’une ligne à la virgule, cet indicateur est utilisé pour garantir que la virgule est le premier caractère de la ligne.
operator_position after-newline

Si une expression conditionnelle longue est divisée en plusieurs lignes, cet indicateur est utilisé pour définir la position des opérateurs dans les lignes.

Vous pouvez modifier l’indicateur avec les valeurs ci-dessous :

  • before-newline
  • after-newline
  • preserve-newline
Remarque :

Les règles pour le formatage PHP sont les mêmes que pour le formatage JS (décrit dans le tableau ci-dessus) avec deux règles supplémentaires données ci-dessous :

PHP Règles Valeurs par défaut dans Dreamweaver Description
  brace_style collapse

Vous pouvez contrôler la position des accolades avec cette option :

Par exemple :

function f() {

// code

}

ou 

function f()

{

// Code

}

Vous pouvez affecter les valeurs ci-dessous :

  • « collapse » - placer les accolades sur la même ligne que les instructions de contrôle
  • « expand » - placer les accolades sur leur propre ligne (style Allman / ANSI)
  • « end-expand » - placer les accolades aux extrémités sur leur propre ligne
  • « none » - essayer de les garder où elles sont
  • n’importe laquelle des valeurs précédentes + « ,preserve-inline » - la valeur preserve-inline tente de conserver les blocs d’accolades intégrés
space_in_paren true

Pour ajouter des espaces à l’intérieur des parenthèses.

Par exemple :

include(’header.php’)

deviendrait

include( ’header.php’ ) lors de l’application du formatage

Autres ressources similaires

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne