שמירה על ניקיון הקוד שלך עם יפה יותר

עיצוב קוד נראה כמו נושא טריוויאלי, אבל זה משהו שיכול להשפיע על איכות ונכונות הקוד שלך, כיצד הוא נשלט על הגרסה וכיצד אתה משתף פעולה עם אחרים. אם אתה לא רוצה להסתבך בפרטים לאן כל פלטה אחרונה הולכת, עם זאת, נסה להעביר את הבעיה למיקור חוץ לכלי קוד פתוח, Prettier.

עיצוב עניינים

צוותי פיתוח תוכנה בזבזו אינספור שעות במהלך ההיסטוריה בוויכוח על אורך קו מרבי או על איזה קו צריך לפלט. לא משנה מה העדפה האישית תאמר, רוב האנשים מסכימים על דבר אחד לפחות: עיצוב קוד צריך להיות עקבי בכל פרויקט.

Prettier הוא כלי שנועד להשיג זאת. תן לו קצת קוד והוא יחזיר אותו קוד, מעוצב בצורה עקבית. ל- Prettier אינטגרציה של עורך טקסטים, כלי שורת פקודה והדגמה מקוונת.

מדברים בשפה הנכונה

קודם כל, תרצה לדעת אם Prettier תואם לשפה או לשפות שאתה בדרך כלל עובד איתן. Prettier מתמקד כעת במערך ליבה של שפות המוקדש בעיקר לפיתוח אתרים חזיתיים, כולל:

• JavaScript
• HTML
• CSS
• סאס
• Markdown
• יאמל

יש גם תמיכה פתוחה בשפות נוספות באמצעות תוספים.

נסה יותר יפה באמצעות מגרש המשחקים המקוון

לפני שאפילו מנסים להתקין את Prettier, כדאי לבדוק מגרש המשחקים

. באמצעות ממשק אינטרנט, תוכל להדביק קוד כלשהו ולבחון כיצד Prettier ישנה אותו. זוהי דרך נהדרת להתרשם ממה שהכלי עושה בפועל, אך היא יכולה גם לשמש כשיטה העיקרית שלך לשימוש ב- Prettier, אם הדרישות שלך הן בצד הקל יותר.

כברירת מחדל, מגרש המשחקים צריך להיראות כמו שני לוחות עורך טקסט בסיסיים, אחד משמאל לקלט שלך, אחד בצד ימין המציג את הפלט של Prettier. בתחילה תראה איזה קוד לדוגמא, אך תוכל פשוט להסיר את כל זה ולהדביק בעצמך.

לדוגמה, נסה להזין את JavaScript הבא:

(פונקציה ()
{
window.alert ('בסדר')
}())

יפה יותר צריך להפוך את זה ל:

(פונקציה () {
window.alert ("בסדר");
})();

שימו לב, כברירת מחדל, השינויים ש- Prettier מבצע כוללים:

• המרת מחרוזות בודדות עם ציטוטים כפולים
• הוספת חצי נקודתיים
• המרת כניסות לשני רווחים

בצד שמאל למטה מופיע כפתור המאפשר להציג אפשרויות. בדוגמה הקודמת, נסה להתאים את רוחב הכרטיסייה, להחליף את --ציטוט יחיד דגל מתחת מְשׁוּתָף, או להחליף את - לא חצי דגל מתחת JavaScript.

הגדרת אפשרויות

יופי יותר מתואר כ"דעתני ", בחירה עיצובית מכוונת שמשמעותה שליטה בפרטים מוקרבת למען פשטות ועקביות. זה נועד עבורך להגדיר, ואז לשכוח, ולא להישאר עסוק בכל פרט העיצוב האחרון של הקוד שלך. (לקבלת אלטרנטיבה עם שליטה הרבה יותר טובה על כל פרט עיצוב אחרון, נסה סלון.)

עם זאת, המחברים גם מכירים בכך שלחלק מההחלטות יש השפעה פונקציונאלית מעבר למראה הקוד. חלק מהאפשרויות - כולל אפשרויות למטרות מורשת - נותרו, לכן כדאי שתבין לפחות מה הן עושות, גם אם אתה משתמש ב- Prettier במצב ברירת המחדל שלה.

הדרך הטובה ביותר לנהל אפשרויות יפות יותר זה לשמור אותם בקובץ תצורה. ישנן דרכים רבות לארגן זאת, אך התחל ביצירת קובץ בשם .prettierrc.json בספריית הפרויקטים המקומית שלך. הוא יכול להכיל כל אחת מהאפשרויות הנתמכות באובייקט JSON רגיל, למשל.

{
"tabWidth": 8
}

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

באמצעות חוט או npm, ההתקנה צריכה להיות פשוטה. לחוט:

$ חוט גלובלי להוסיף יפה יותר

ובשביל npm:

$ npm להתקין - גלובלי יפה יותר

לאחר התקנת Prettier ברחבי העולם, אתה אמור להיות מסוגל להקליד:

יפה יותר

כברירת מחדל, תקבל מסך של טקסט עזרה שיאשר שהכלי מותקן ופועל כהלכה.

ניקוי קובץ

כדי לאתחל קובץ מחדש, השתמש בפקודה הדומה ל:

$ יפה יותר - כתוב filename.js

זה יחליף את הקובץ המקורי, שהוא לעתים קרובות הגישה הנוחה ביותר. לחלופין, אולי רק תרצה יפה יותר לפעול על פי כל קובץ בפרויקט:

$ יפה יותר - כתוב.

Prettier ירוץ על כל הקבצים תחת הספריה הנוכחית, ויעצב את כל אלה שהוא מזהה.

ניתן גם להדפיס את התוצאה לפלט רגיל, במקום לשנות את הקובץ המקורי, המאפשר לשמור את הפלט לקובץ אחר, או להפנות אותו למקום אחר:

$ יפה יותר test.js> test2.js

בדיקת קובץ

כדי לדווח על Prettier על ניקיון הקוד שלך מבלי לבצע שינויים ממש, השתמש ב- --חשבון דגל עם שם קובץ יחיד או רב:

$ יפה יותר - לבדוק.

תקבל שורה של פלט עבור כל קובץ שאינו תואם את הפורמט הצפוי, על פי התצורה של Prettier:

בודק עיצוב ...
[להזהיר] .prettierrc
[הזהיר] .prettierrc.json
[הזהיר] בעיות בסגנון קוד שנמצאו בקבצים / ים לעיל. שכחת לנהל את יפה יותר?

אפשרויות שורת פקודה

האפשרויות הסטנדרטיות של Prettier זמינות כאפשרויות שורת פקודה, אם אתה זקוק להן. הנה דוגמה לאופן שבו --ציטוט יחיד דגל משפיע על התפוקה:

$ יפה יותר tmp.js
דוגמה לפונקציה () {
console.log ("שלום עולם");
}
$ יפה יותר - הצעת מחיר בודדת tmp.js
דוגמה לפונקציה () {
console.log ('שלום עולם');
}

קבלת עזרה

כלי שורת הפקודה מספק עזרה אינפורמטיבית בכל אפשרות דרך ה- --עֶזרָה דֶגֶל:

$ יפה יותר - עזרה בפסיק נגרר
- פסיקת נגררים 
הדפס פסיקים נגררים במידת האפשר כאשר מרובי שורות.
אפשרויות תקפות:
es5 נגררים בפסיקים כאשר הם תקפים ב- ES5 (אובייקטים, מערכים וכו ')
אין אין פסיקים נגררים.
כל הפסיקים נגררים ככל האפשר (כולל ארגומנטים של פונקציות).
ברירת מחדל: es5

שימוש בעורך טקסט

לאחר התקנת Prettier, תוכלו להשתמש בו במגוון תרחישים, תלוי באיזה ערכת כלים אתם כבר משתמשים. רוב הסיכויים שאתה משתמש בעורך טקסט. ל Prettier יש כריכות עבור רוב הפופולריות, אז הנה איך להגדיר שלוש מהן:

טקסט נשגב

JsPrettier הוא תוסף טקסט נשגב שהופך את Prettier לזמין בעורך. למרות שישנן מספר דרכים שונות להתקנת JsPrettier, אנו ממליצים להשתמש בשיטת Package Package. יהיה עליך להתקין את Prettier כבר, ואז לפתוח את לוח הפקודות של Sublime Text ובחר "Control Package: Install Package":

לאחר מכן חפש "jsprettier" ולחץ להתקנתו:

לאחר התקנת JsPrettier, תוכל ללחוץ לחיצה ימנית על כל קובץ פתוח כדי לעצב אותו. אתה יכול גם להגדיר את הערך של פורמט אוטומטי_על_שמירה ל נָכוֹן בהגדרות של JsPrettier אשר יביא לכך ש- JsPrettier ינקה אוטומטית קבצים תואמים כשאתה שומר אותם בטקסט נשגב.

אָטוֹם

ההתקנה עבור Atom דומה מאוד ל- Sublime Text: פשוט השתמש במנהל החבילות המובנה של העורך להתקנה יפה יותר אטום:

לאחר ההתקנה השימוש מוכר: קיצור דרך או פריט בתפריט מאפשרים לך לעצב קובץ לפי דרישה, ואילו הגדרת Atom מאפשרת לך להפעיל באופן אוטומטי את Prettier בכל פעם שקובץ נשמר.

מֶרֶץ

Vim הוא עורך מבוסס שורת פקודה חזק מאוד שאינו מתאים למתחילים. לגרום ליותר יפה לעבוד עם vim מסובך כראוי, אבל זה עדיין רק כמה צעדים:

mkdir -p ~ / .vim / pack / plugins / start
שיבוט גיט https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-prettier

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

לאחר ההתקנה, Prettier יופעל אוטומטית כאשר הקובץ נשמר ב- vi. ניתן גם להריץ אותו באופן ידני בכל עת באמצעות יפה יותר פקודה:

מה שאמור לגרום לקובץ מנוקה:

שילוב יפה יותר בפרויקט שלך

שימוש במעצב קוד כגון Prettier יכול לעזור לשמור על בסיס קוד שקל יותר לקרוא אותו. זה יכול גם לעזור לעקוף את הוויכוחים לגבי איזה סגנון מסוים להשתמש בקידוד - פשוט מיקור חוץ מההחלטות האלה לידי Prettier!

לבסוף, ניתן להגדיר וו git כדי להבטיח שקוד תמיד ינוקה כאשר הוא מחויב למאגר הפרויקט שלך. מפתחים בודדים יכולים להיות חופשיים לעצב את הקוד שלהם כרצונם, אך העותק המרכזי תמיד יהיה נקי ועקבי.

ננו לעומת Vim: עורכי הטקסט הטרמינליים הטובים ביותר, בהשוואה

מחפש עורך טקסט מסופי עבור לינוקס? הבחירה העיקרית היא בין Vim לננו! כך הם משווים.

על הסופר