עיצוב קוד

ניתן לקבוע העדפות השולטות בעיצוב של קוד CSS בכל פעם שאתה יוצר או עורך קובץ.

עיצוב קוד באופן ידני

  1. פתח קובץ נתמך.

  2. בחר Edit > Code > Apply Source Formatting.

    או בחר Apply Source Formatting מסרגל Common Toolbar ‏> Format Source Code.

עיצוב קוד שנבחר בקובץ באופן ידני

  1. פתיחת קוד.

  2. בחר את הקוד.

  3. בחר Edit > Code > Apply Source Formatting To Selection.

    או בחר Apply Source Formatting לבחירה מסרגל Common toolbar‏-> Format Source Code.

    הערה:

    בעת בחירת קוד בין תג כלשהו והחלת תבנית מקור לבחירה, העיצוב מיושם עד תג הורה.

עריכת כללי ברירת מחדל עבור עיצוב קוד

באפשרותך להתאים אישית את עיצוב הקוד של CSS‏, JS ו-PHP בעזרת הוספה של כללי עיצוב בקובץ jsbeautifyrc. בתיקיית השורש באתר שלך.

להוספת קובץ jsbeautifyrc. , בצע את השלבים הבאים:

הערה:
  • ההנחיות הבאות ישימות רק עבור מסמכי CSS‏, JS ו-PHP.
  • תגי HTML במסמך PHP מעוצבים לפי העדפות אישיות ב ספריות התגים. באפשרותך לעצב את הקוד בתוך גושי PHP בעזרת ההנחיות להלן.
  1. צור קובץ חדש בשורש האתר בעזרת שם משתמש כמו ‏jsbeautifyrc.

  2. העתק והדבק את כללי העיצוב להלן עבור CSS‏, JS ו-PHP ב-.jsbeautifyrc ושמור את הקובץ.

    { 
     
        "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. ערוך את כללי העיצוב כדי לשנות את כללי ברירת המחדל לעיצוב קוד בהתאם לטבלה להלן ושמור את השינויים.

הערה:

אם ברצונך להתאים אישית את עיצוב הקוד עבור קבצי PHP‏, CSS ו-JS באתרים אחרים של Dreamweaver יש למקם את הקובץ שהותאם אישית jsbeautifyrc. בתיקיית השורש באתר.

כללים עבור עיצוב CSS‏, JS ו-PHP:

CSS כללים ערכי ברירת מחדל של Dreamweaver תיאור
  preserve_newlines false אם ברצונך לשמור שורות ריקות.
selector_separator_newline false

אם ברצונך למקם שורה חדשה בין בוררים המופרדים באמצעות פסיקים.

לדוגמה, "div‏., P."

end_with_newline false אם ברצונך לסגור את הקובץ בעזרת שורה ריקה.
newline_between_rules false אם ברצונך להוסיף שורה חדשה לאחר כל כלל CSS.
space_around_selector_separator true

כדי לוודא רווח סביב מפרידי בורר:  '>', '+', '~'

לדוגמה: "a>b" הופך ל-"a > b" בעת החלת תבנית המקור.

JS כללים ערכי ברירת מחדל של Dreamweaver תיאור
  "eol" "\n" תו מייצג סוף שורה.
preserve_newlines true אם ברצונך לשמור שורות ריקות.
max_preserve_newlines 3

עבור "max_preserve_newlines"‏: N, 

N-1 שורות ריקות נשמרות בעת החלת עיצוב, אם יש מעל N-1 שורות ריקות בקובץ JS.

Note: max_preserve_newlines ישים רק אם preserve_newlines הוגדר כ-true.

space_after_anon_function true

אם ברצונך להוסיף רווח לפני סוגריים של פונקציה אנונימית.

לדוגמה:"()function‎" הופך ל-"() function" בעת החלת תבנית המקור.

keep_array_indentation false הרשה או שמור שורה חדשה בתוך גוף המערך.
pace_before_conditional true

אם ברצונך בשביל להוסיף רווח לפני הצהרת תנאי.

לדוגמה: "(if(true" הופך ל-"(if (true" בעת החלת תבנית המקור.

break_chained_methods false

הרשה או שמור שורה חדשה בין פונקציות משורשרות.

לדוגמה:

`()foobar().baz`

unescape_strings false

אם ישנם תווים הניתנים להדפסה במחרוזות מקודדות ב-\xNN לא ניתן לבטל תחביר.

לדוגמה:

"\x65\x78\x61\x6d\x70\x6c\x65" הופך ל-"example" בעת החלת תבנית מקור.

wrap_line_length 0 אמורה להתבצע גלישת טקסל בשורות בהזדמנות הראשונה לאחר מספר התווים זה.
end_with_newline true

כדי לוודא שנוספה שורה חודשה בסוף הקובץ.

comma_first false בעת הפרדת שורה בפסיק, דגל זה משמש כדי לוודא שהפסיק הוא התו הראשון בשורה.
operator_position after-newline

אם ביטוי תנאי ארוך מחולק לשורות רבות, הדגל משמש להגדרת מיקום האופרטורים בשורות.

באפשרותך לערוך את הדגל בעזרת הערכים להלן:

  • before-newline
  • after-newline
  • preserve-newline
הערה:

הכללים עבור עיצוב PHP זהים עבור עיצוב JS (מתואר בטבלה לעיל) בעזרת שני כללים נוספים להלן:

PHP כללים ערכי ברירת מחדל של Dreamweaver תיאור
  brace_style collapse

באפשרותך לשלוט על מיקום הסוגריים המסולסלים עם אופציה זו:

לדוגמה:

function f() {

// code

}

או 

function f()

{

// Code

}

באפשרותך להקצות את הערכים להלן:

  • "collapse" - הצב סוגריים מסולסלים על אותו הקו של הצהרות הבקרה.
  • "expand" - הצב סוגריים מסולסלים על קו משלו (Allman / ANSI style)
  • "end-expand" - הצב סוגריים מסולסלים על קו משלו
  • "none" - נסה לשמור אותם היכן שהם
  • כל אחד מן הקודמים יחד עם "preserve-inline,"‏- preserve-inline מנסה לשמור גושים בתוך השורה של סוגריים מסולסלים.
space_in_paren true

אם ברצונך להוסיף רווחים בתוך הסוגריים.

לדוגמה:

('include('header.php

הופך ל-

(include( 'header.php'‏ בעת החלת עיצוב

פריטים דומים נוספים

 Adobe

קבל עזרה במהירות ובקלות

משתמש חדש?