מעצב קוד חינמי: יפה את JavaScript, Python, HTML ועוד
מעצב קוד באופן מיידי עם הזחה ורווחים נכונים. תומך ב-12+ שפות כולל JavaScript, Python, HTML, CSS, ו-Java. מבוסס דפדפן, מאובטח וחינמי. ללא הרשמה נדרשת.
מעצב קוד
עצב את הקוד שלך בלחיצה אחת. בחר שפה, הדבק את הקוד שלך וקבל אותו מעוצב כראוי.
איך להשתמש:
- בחר את שפת התכנות שלך מהתפריט הנפתח.
- הדבק את הקוד הלא מעוצב באזור הקלט.
- לחץ על הכפתור 'עצב קוד'.
- העתק את התוצאה המעוצבת מאזור הפלט.
תיעוד
מהו מעצב קוד?
מעצב קוד הוא כלי שמשכתב קוד מקור עם הזחה, מעברי שורה וריווח עקביים, בלי לשנות את פעולת הקוד. מעצב הקוד הזה פועל בדפדפן אינטרנט. הוא תומך ב־12 שפות תכנות, ובהן JavaScript, Python, HTML ו־CSS.
כיצד פועל מעצב הקוד הזה
הכלי משתמש במערכת כללים שונה לכל שפה. אף אחת מהן אינה בונה עץ ניתוח מלא של הקוד, למעט JSON.
- JSON מנותח באמצעות מנתח ה־JSON המובנה בדפדפן ולאחר מכן מודפס מחדש בהזחה של שני רווחים. אם ה־JSON אינו תקין, הכלי מדווח על שגיאה ואינו מציג פלט.
- JavaScript, TypeScript, Java, C, C++ ו־C# משתמשות במעצב קוד משותף. הוא סורק את הקוד תו אחר תו ועוקב אחר סוגריים מסולסלים, סוגריים רגילים ונקודה־פסיק. כל
{מתחיל בלוק חדש עם הזחה, וכל}או;מסיים שורה. הערות ומחרוזות במרכאות מועתקות ללא שינוי. מעצב זה אינו מוסיף רווחים סביב אופרטורים או אחרי פסיקים שלא היו בקוד המקורי — הוא בונה מחדש רק את מעברי השורה וההזחה. - Python קוראת את ההזחה הקיימת בכל שורה ובונה אותה מחדש באמצעות ארבעה רווחים לכל רמה, בהתאם לאותם כללי קינון שבהם משתמשת שפת Python עצמה. היא אינה מפצלת שורות ארוכות, מוסיפה שורות ריקות או מוסיפה רווחים סביב אופרטורים; היא רק מאחידה את עומק ההזחה של כל שורה.
- CSS מסירה מעברי שורה ורווחים מיותרים, ולאחר מכן מוסיפה מעבר שורה אחרי כל
{וכל;ולפני כל}. - HTML ו־XML מוסיפות מעבר שורה ושני רווחי הזחה לכל רמה של תגיות מקוננות, ומזהות תגיות סגירה עצמית תקניות כגון
<br>,<img>ו־<input>. - SQL ממיר קבוצה קבועה של מילות מפתח, כגון
SELECT,FROM,WHERE,JOINו־ORDER BY, לאותיות רישיות ומתחיל שורה חדשה לפני כל סעיף מרכזי.
מכיוון שרק מסלול JSON מנתח בפועל את הקלט, אף אחד ממעצבי הקוד האחרים אינו מזהה שגיאות תחביר כגון סוגר חסר או מחרוזת שלא נסגרה. הם מעצבים מחדש כל טקסט שניתן להם, גם אם הוא לא יוכל לפעול.
שפות נתמכות
| שפה | סיומת קובץ אופיינית | רוחב ההזחה |
|---|---|---|
| JavaScript | .js | 2 רווחים |
| TypeScript | .ts | 2 רווחים |
| HTML | .html | 2 רווחים |
| CSS | .css | 2 רווחים |
| Python | .py | 4 רווחים |
| Java | .java | 4 רווחים |
| C | .c | 4 רווחים |
| C++ | .cpp | 4 רווחים |
| C# | .cs | 4 רווחים |
| SQL | .sql | מעברי שורה לפי סעיף |
| JSON | .json | 2 רווחים |
| XML | .xml | 2 רווחים |
כיצד לעצב קוד
- בחרו שפת תכנות מתפריט הבחירה.
- הדביקו את הקוד שאינו מעוצב בתיבת הקלט.
- בחרו באפשרות "עיצוב קוד".
- העתיקו את התוצאה המעוצבת מתיבת הפלט.
העיצוב מתבצע כולו בתוך הדפדפן. הקוד לעולם אינו נשלח לשרת.
דוגמה לעיצוב JavaScript
לפני העיצוב:
1function add(a, b) {
2 if (a > 0) { return a + b; }
3 return 0;
4}
5אחרי העיצוב:
1function add(a, b) {
2 if (a > 0) {
3 return a + b;
4 }
5 return 0;
6}
7המעצב העביר את הקוד שבתוך { } לשורה נפרדת עם הזחה, ואחיד את ההזחה לשני רווחים בכל רמה. הוא השאיר את הריווח סביב a > 0 וסביב a + b בדיוק כפי שמצא אותו, מכיוון שהריווח הזה כבר היה קיים.
דוגמה לעיצוב Python
לפני העיצוב:
1def calculate_average(numbers):
2 if len(numbers) == 0:
3 return 0
4 total = sum(numbers)
5 return total / len(numbers)
6אחרי העיצוב:
1def calculate_average(numbers):
2 if len(numbers) == 0:
3 return 0
4 total = sum(numbers)
5 return total / len(numbers)
6הקוד המקורי השתמש בשני רווחים בכל רמת הזחה. המעצב בנה מחדש את ההזחה של כל שורה באמצעות ארבעה רווחים בכל רמה, בהתאם לסגנון המתואר ב־PEP 8, מדריך הסגנון הרשמי של Python. הוא שמר על סדר השורות ולא שינה את הריווח בתוכן השורות.
מדוע עיצוב קוד חשוב
הזחה לא עקבית מקשה לראות היכן פונקציה, לולאה או תנאי מסתיימים. קוד שנערך בידי כמה אנשים מסתיים לעיתים קרובות בשילוב של הזחה באמצעות טאב ורווחים, או בשורות שאינן מיושרות לבלוק שאליו הן שייכות. העברת הקוד דרך מעצב מעניקה לכל קובץ מבנה חזותי אחיד, וכך קל יותר לסרוק אותו ולזהות סוגר שמוקם במקום שגוי.
מגבלות
- גודל הקלט: הכלי מקבל עד 50,000 תווים של קוד. קלט ארוך יותר נדחה בהודעת שגיאה לפני תחילת העיצוב.
- אין בדיקת תחביר ברוב השפות: רק קלט JSON מנותח ומאומת. קוד ב־11 השפות האחרות מעוצב כפי שהוא, גם אם חסר בו סוגר או יש בו מחרוזת שלא נסגרה. במקרה כזה הפלט עלול להיות בעל הזחה שגויה במקום להיות מסומן כשגיאה.
- אין שינוי בריווח סביב אופרטורים: מעצבי JavaScript, TypeScript ומשפחת C מסדרים מחדש רק את מעברי השורה וההזחה. הם אינם מוסיפים רווח סביב
+,=,!==או אחרי פסיק אם רווח כזה לא היה קיים קודם. - PHP אינה נתמכת: בחירה בשפה שאינה נתמכת מחזירה את הקוד ללא שינוי.
שאלות נפוצות
האם הכלי בודק את הקוד שלי לאיתור שגיאות תחביר? רק עבור JSON. קלט JSON מנותח, ולכן JSON לא תקין מפיק הודעת שגיאה. קוד בשפות הנתמכות האחרות מעוצב מחדש בלי לבדוק אם התחביר שלו תקין.
האם הקוד שלי נשלח לשרת? לא. העיצוב מתבצע כולו בדפדפן באמצעות JavaScript. הקוד אינו מועלה או נשמר בשום מקום.
מהי כמות הקוד המרבית שהכלי יכול לעצב? 50,000 תווים. הדבקה של יותר מכמות זו מפיקה שגיאה לפני תחילת העיצוב.
האם יתווספו רווחים חסרים סביב האופרטורים שלי או אחרי פסיקים? לא, עבור JavaScript, TypeScript, Java, C, C++ ו־C#. מעצבים אלה בונים מחדש רק את ההזחה ואת מעברי השורה סביב סוגריים מסולסלים ונקודה־פסיק; את שאר תוכן כל שורה הם מעתיקים כפי שנכתב.
באיזו הזחה הכלי משתמש? שני רווחים עבור JavaScript, TypeScript, HTML, CSS, JSON ו־XML. ארבעה רווחים עבור Python, Java, C, C++ ו־C#.
מדוע הקוד שלי נראה כמעט אותו דבר אחרי העיצוב? אם הקלט כבר השתמש בריווח עקבי ובסגנון אחיד של סוגריים, המעצב בונה מחדש בעיקר את ההזחה, ולכן השינוי עשוי להיות קטן. הוא שימושי במיוחד בקוד עם הזחה מעורבת או בקוד שצומצם למספר קטן מאוד של שורות.