10 CSS ו - JavaScript כלים Linting קוד אופטימיזציה

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

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

Linters הם לא רק כלי מניעה באגים, אבל הם יכולים לשמש גם ביעילות במהלך איתור באגים כדי למצוא שגיאות שקשה לתפוס אחרת. בהודעה זו נבדוק 10 כלי סיכה רבי עוצמה שבהם תוכל להשתמש כדי לצבוע את קובצי ה- CSS ו- JavaScript שלך כדי לשפר את איכות הקוד שלך.

1. CSSLint

CSSLint אמנם מתכוונת "לפגוע ברגשות שלך", אבל בתמורה זה "עושה לך קוד הרבה יותר טוב". CSSLint כיום מובילה את השוק של CSS linting. זה כתוב ב- JavaScript, זה קוד פתוח, ומגיע עם טונות של אפשרויות להגדרה.

CSSLint מאפשר לך לבחור איזה סוג של שגיאות ואזהרות (תאימות, ביצועים, שכפול וכו ') אתה רוצה לבדוק, ו מאמת את תחביר ה- CSS שלך בהתאם לכללים שתבחר.

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

2. SublimeLinter CSSLint

CSSLint הוא כזה יעיל linter CSS כי קשה למצוא מתחרה כי אמצעים עד זה. כנראה שזו הסיבה מדוע מסגרת SublimeLinter linting בנה תוסף CSS שלה linting על גבי זה. SublimeLinter הוא תוסף SublimeText זה מספק למשתמשים את הכלים כדי מוך הקוד שלהם (CSS, PHP, Python, ג 'אווה, רובי, וכו') ממש בתוך SublimeText editoייצור.

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

3. StyleLint

StyleLint מסייע למפתחים להימנע מטעויות ב- CSS, ב- SCSS או בכל תחביר אחר ש- PostCSS יכול לנתח. StyleLint בדיקות מעל מאה חוקים, ואתה יכול לבחור אילו מהם ברצונך להפעיל (ראה תצורת דוגמה).

אם אתה לא רוצה לבנות את התצורה שלך, אתה יכול גם לבחור תצורה סטנדרטית מראש בכתב, המכיל כ 60 כללי StyleLint. StyleLint הוא כלי גמיש למדי, זה יכול להיות המורחבת על ידי תוספים נוספים, ומשמש 3 צורות שונות: ככלי שורת פקודה, כמודול Node.js, או כתוסף PostCSS.

4. W3C CSS Validator

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

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

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

5. סימון מלוכלך

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

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

6. JSLint

JSLint שוחרר לראשונה בשנת 2002 על ידי דאגלס קרוקפורד, ולא איבדו את המומנטום מאז, אז אתה יכול להניח בבטחה כי זה stabile ואמין JavaScript מישור הכלי.

JSLint יכול לעבד את קוד המקור של JavaScript ואת טקסט JSON, והוא מגיע עם המוכן בהתאם לתהליכים המומלצים של JS קרוקפורד כתב בספרו "ג'אווה סקריפט: החלקים הטובים".

JSLint יש כמה אפשרויות אתה יכול לבחור, אבל אתה לא ניתן להוסיף כללים מותאמים אישית משלך, או להשבית את רוב התכונות. JSLint כבר החלה לכלול את הסטנדרטים האחרונים של ECMAScript 6, אתה יכול לבדוק את השלב הנוכחי של יישום ES6 כאן.

7. JSHint

JSHint הוא מזלג פופולרי מאוד של JSLint, והוא משמש את חברות הטכנולוגיה הגדולות כמו פייסבוק, טוויטר, ו בינוני

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

אתה לא רק יכול להשתמש JSHint כדי מוך וניל JavaScript, יש גם תמיכה מחוץ לקופסה עבור ספריות JS רבים פופולריים, כגון jQuery, Mootools, מוקה, Node.js.

8. ESLint

ESLint הוא הדבר הגדול ביותר על הנוף JavaScript Linting. הפופולריות שלו נובעת אופי גמיש ביותר שלה. אתה לא רק יכול להתאים אישית טונות של הכללים משוכלל משור שלה, ולשלב אותו עם כל עורכי קוד הגדולות, אבל אתה יכול בקלות להרחיב את הפונקציונליות שלה על ידי הוספת plugins שונים אליו.

על ידי ציון אפשרויות מנתח, אתה יכול גם בחר איזה תקן של שפת JS אתה רוצה לתמוך במהלך תהליך הליסינג, כלומר, לא רק אתה יכול לבדוק את הסקריפטים שלך נגד ברירת המחדל ECMAScript 5 תחביר, אלא גם נגד ECMAScript 6, ECMAScript 7, ו JSX.

9. JSCS

JSCS, או קוד JavaScript סגנון הוא linter קוד קוד linter עבור JavaScript, זה בודק את כללי עיצוב קוד.

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

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

10. StandardJS

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

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