אנו משתמשים בפלטפורמה באופן פעיל בעבודתנו soundQube לשמור על איכות קוד ברמה גבוהה. בעת שילוב אחד מהפרויקטים שנכתבו ב VueJs+Typescript, התעוררו בעיות. לכן, אני רוצה לספר לכם ביתר פירוט כיצד הצלחנו לפתור אותם.

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

soundQube (לְשֶׁעָבַר סוֹנָר) היא פלטפורמת קוד פתוח לבדיקה רציפה ולמדידת איכות קוד.
תומך בניתוח קוד וזיהוי שגיאות לפי הכללים של תקני התכנות MISRA C, MISRA C++, MITER/CWE ו-CERT Secure Coding Standards. הוא יכול גם לזהות שגיאות מרשימות שגיאות התכנות המובילות של OWASP 10 ו-CWE/SANS Top 25.
למרות העובדה שהפלטפורמה משתמשת בכלים מוכנים שונים, SonarQube מצמצמת את התוצאות ללוח מחוונים אחד, שומרת היסטוריה של ריצות ובכך מאפשרת לך לראות את המגמה הכללית של שינויים באיכות התוכנה במהלך הפיתוח.

פרטים נוספים ניתן למצוא ב האתר הרשמי

מספר רב של שפות תכנות נתמכות. אם לשפוט לפי המידע מהקישור למעלה, מדובר ביותר מ-25 שפות. כדי לתמוך בשפה מסוימת, עליך להתקין את הפלאגין המתאים. גרסת הקהילה כוללת תוסף לעבודה איתו Javascript (כולל טיפוסים), למרות שהוויקי אומר את ההיפך. מֵאָחוֹר Javascript תשובות לפלאגין SonarJS, עבור Typescript SonarTS בהתאמה.

הלקוח הרשמי משמש לשליחת מידע כיסוי sonarqube-scanner, אשר, באמצעות ההגדרות מ config-קובץ, שולח נתונים אלה לשרת soundQube לגיבוש והצטברות נוספת.

עבור Javascript יש מעטפת npm. אז בואו נתחיל ביישום צעד אחר צעד soundQube в Vueפרויקט באמצעות כתב כתיבה.

כדי לפרוס את השרת soundQube בואו ננצל הדוקר-הלחנה.

sonar.yaml:

version: '1'
    services:
        simplesample-sonar:
            image: sonarqube:lts
            ports:
                - 9001:9000
                - 9092:9092
            network_mode: bridge

לְהַשִׁיק:

docker-compose -f sonar.yml up

לאחר מכן soundQube יהיה זמין ב: http://localhost:9001 .

אין בו עדיין פרויקטים וזה הוגן. אנחנו נתקן את המצב הזה. לקחתי את הפרויקט הרשמי לדוגמה VueJS+TS+Jest. בואו נכופף את זה כלפי עצמנו:

git clone https://github.com/vuejs/vue-test-utils-typescript-example.git

ראשית עלינו להתקין את הלקוח soundQube, שנקרא סונר-סורקעבור Npm יש עטיפה:

yarn add sonarqube-scanner

ומיד הוסף את הפקודה ל סקריפטים לעבוד עם זה.

package.json:

{
 … 
   scripts: {
      ...
      "sonar": "sonar-scanner"
      ...
   },
 …
}

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

sonar-project.properties:

sonar.host.url=http://localhost:9001

sonar.projectKey=test-project-vuejs-ts
sonar.projectName=Test Application (VueJS+TS)

sonar.sources=src
# sonar.tests=
sonar.test.inclusions=src/**/*tests*/**
sonar.sourceEncoding=UTF-8

• sonar.host.url - כתובת סוֹנָר'א;
• sonar.projectKey - מזהה פרויקט ייחודי בשרת סוֹנָר'א;
• sonar.projectName – שמו, ניתן לשנות אותו בכל עת, מכיוון שהפרויקט מזוהה על ידי מפתח פרויקט;
• sonar.sources - תיקייה עם מקורות, בדרך כלל זה src, אבל יכול להיות כל דבר. תיקייה זו מוגדרת ביחס לתיקיית השורש, שהיא התיקיה שממנה מופעל הסורק;
• sonar.tests – פרמטר שהולך במקביל לפרמטר הקודם. זוהי התיקיה שבה ממוקמות הבדיקות. בפרויקט זה אין תיקיה כזו, והבדיקה ממוקמת ליד הרכיב הנבדק בתיקייה 'מבחן', אז נתעלם ממנו לעת עתה ונשתמש בפרמטר הבא;
• תכלילים.sonar.test - נתיב לבדיקות באמצעות מסיכה, עשויים להיות מספר אלמנטים המופרדים בפסיקים;
• sonar.sourceEncoding - קידוד עבור קבצי מקור.

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

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

בואו נוסיף את ההגדרות האלה:

"collectCoverage": true,
"collectCoverageFrom": [
      "src/**/*",
      "!src/main.ts",
      "!src/App.vue",
      "!src/**/*.d.*",
      "!src/**/*__tests__*"
],

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

עכשיו בואו נריץ את הבדיקה:

yarn test

נראה את הדברים הבאים:

הסיבה היא שאין קוד ברכיב עצמו. בוא נתקן את זה.

HelloWorld.vue:

...
methods: {
    calc(n) {
      return n + 1;
    }
  },
mounted() {
  this.msg1 = this.msg + this.calc(1);
},
...

זה יספיק כדי לחשב את הכיסוי.

לאחר הפעלה מחדש של הבדיקה, נוודא זאת:

על המסך אנו אמורים לראות מידע על הכיסוי, ותיווצר תיקיה בתיקיית הפרויקט כיסוי עם מידע כיסוי מבחן בפורמט אוניברסלי LCOV (תוסף LTP GCOV).

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

לאחר השלמת הבדיקות, מידע הכיסוי ימצא ב coverage/lcov.info.
אנחנו צריכים לומר סוֹנָר'מאיפה אני יכול להשיג את זה? לכן, בואו נוסיף את השורות הבאות לקובץ התצורה שלו. אבל יש נקודה אחת: פרויקטים יכולים להיות רב לשוניים, כלומר בתיקייה src ישנם קודי מקור למספר שפות תכנות והשתייכות לאחת או אחרת, ובתמורה, השימוש בתוסף מסוים נקבע על פי ההרחבה שלו. וניתן לאחסן מידע כיסוי במקומות שונים עבור שפות תכנות שונות, כך שלכל שפה יש סעיף משלה להגדרה זו. הפרויקט שלנו משתמש כתב כתיבה, אז אנחנו צריכים סעיף הגדרות רק בשביל זה:

sonar-project.properties:

sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.info

הכל מוכן לקראת ההשקה הראשונה של הסורק. אני רוצה לציין שהפרויקט הוא סוֹנָר'e נוצר באופן אוטומטי בפעם הראשונה שאתה מפעיל את הסורק עבור פרויקט נתון. בזמנים הבאים יצטבר מידע על מנת לראות את הדינמיקה של שינויים בפרמטרים של הפרויקט לאורך זמן.

אז בואו נשתמש בפקודה שנוצרה קודם לכן package.json:

yarn run sonar 

הערה: אתה יכול גם להשתמש בפרמטר -X לרישום מפורט יותר.

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

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

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

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

בסוף עבודת הסורק, כל המידע שנאסף נאסף, מאוחסן בארכיון ונשלח לשרת.

אחרי זה, אנחנו כבר יכולים לראות מה קרה בממשק האינטרנט:

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

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

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

בוא נתקן את זה:

sonar-project.properties:

...
sonar.exclusions=src/main.ts
...

ברצוני להבהיר: בנוסף לתיקיות המצוינות בפרמטר זה, מתווספות גם כל התיקיות המפורטות בפרמטר תכלילים.sonar.test.

לאחר הפעלת הסורק, אנו רואים את המידע הנכון:

בואו נסתכל על הנקודה הבאה - פרופילי איכות. דיברתי למעלה על תמיכה סוֹנָרמכמה שפות בו זמנית. זה בדיוק מה שאנחנו רואים. אבל אנחנו יודעים שהפרויקט שלנו כתוב TS, אז למה לאמץ את הסורק עם מניפולציות ובדיקות מיותרות. נגדיר את השפה לניתוח על ידי הוספת פרמטר אחד נוסף לקובץ התצורה סוֹנָר'א:

sonar-project.properties:

...
sonar.language=ts
...

בוא נריץ שוב את הסורק ונראה את התוצאה:

הכיסוי נעלם לחלוטין.

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

כלומר, קבצי הפרויקט שלנו פשוט לא נוספו לאינדקס.

המצב הוא כדלקמן: נתמך רשמית VueJs נמצא בתוסף SonarJSעל מי אחראי Javascript.

אבל התמיכה הזו לא נמצאת בתוסף SonarTS עבור TS, לגביו נפתח כרטיס רשמי במעקב אחר באגים סוֹנָר'א:

1. https://jira.sonarsource.com/browse/MMF-1441
2. https://github.com/SonarSource/SonarJS/issues/1281

הנה כמה תשובות מאחד הנציגים ממפתחי SonarQube, המאשרות עובדה זו.

אבל הכל עבד לנו, אתה מתנגד. כן, בוא ננסה את זה קצת "גַרזֶן".
אם יש תמיכה .vue-קבצים סוֹנָר'אוי, אז בוא ננסה להגיד לו להתייחס אליהם כאל כתב כתיבה.

בואו נוסיף פרמטר:

sonar-project.properties:

...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...

בואו נפעיל את הסורק:

והרי, הכל חזר לקדמותו, ועם פרופיל אחד בלבד עבור כתב כתיבה. כלומר, הצלחנו לפתור את הבעיה בתמיכה VueJs+TS עבור soundQube.

בואו ננסה ללכת רחוק יותר ולשפר מעט את מידע הכיסוי.

מה עשינו עד כה:

• נוסף לפרויקט סוֹנָר-סוֹרֵק;
• להכין יש להפקת מידע כיסוי;
• מוגדר סוֹנָר-סוֹרֵק;
• פתר את בעיית התמיכה .vue-קבצים + כתב כתיבה.

בנוסף לכיסוי הבדיקה, ישנם קריטריונים שימושיים נוספים ומעניינים לאיכות הקוד, למשל שכפול קוד ומספר השורות (המעורבות בחישוב מקדמים הקשורים למורכבות הקוד) של הפרויקט.

ביישום הנוכחי של התוסף לעבודה עם TS (SonarTS) לא יעבוד CPD (גלאי העתקה הדבק) וספירת שורות קוד .vue-קבצים.

כדי ליצור מצב סינתטי של שכפול קוד, פשוט שכפל את קובץ הרכיב בשם אחר וגם הוסף אותו לקוד main.ts פונקציית דמה ושכפל אותה בשם אחר. כדי לבדוק שכפול כמו ב .vue, ו ב .ts -קבצים.

main.ts:

...
function name(params:string): void {
  console.log(params);
}
...

כדי לעשות זאת, עליך להעיר באופן זמני את שורת התצורה:

sonar-project.properties:

...
sonar.exclusions=src/main.ts
...

בואו נפעיל מחדש את הסורק יחד עם בדיקה:

yarn test && yarn run sonar

כמובן שהסיקור שלנו ייפול, אבל עכשיו זה לא מעניין אותנו.

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

כדי לבדוק נשתמש מחיר לאלף הופעות-תועלת - jscpd:

npx jscpd src

עבור שורות קוד:

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

עכשיו רציתי לשקול את האפשרות לשפר את מידע הכיסוי.

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

יש ספרייה שיכולה יש-המר את הדוח לפורמט עבור סוֹנָר'א:
נתוני בדיקה גנריים - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

בואו נתקין את הספרייה הזו בפרויקט שלנו:

yarn add jest-sonar-reporter

והוסיפו אותו לתצורה יש:

package.json:

…
"testResultsProcessor": "jest-sonar-reporter"
…

עכשיו בואו נריץ את הבדיקה:

yarn test

לאחר מכן ייווצר קובץ בשורש הפרויקט test-report.xml.

בואו נשתמש בו בתצורה סוֹנָר'א:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

והפעל מחדש את הסורק:

yarn run sonar

בוא נראה מה השתנה בממשק סוֹנָר'א:

ושום דבר לא השתנה. העובדה היא שסונאר לא מחשיב את הקבצים המתוארים בדו"ח Jest כקבצים יחידה-בדיקות. על מנת לתקן מצב זה, אנו משתמשים בפרמטר התצורה סוֹנָר sonar.tests, שבה נציין במפורש את התיקיות עם בדיקות (יש לנו רק אחת בינתיים):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

בואו נפעיל מחדש את הסורק:

yarn run sonar

בוא נראה מה השתנה בממשק:

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

מסקנה

אז, הסתכלנו על כלי לניתוח רציף soundQube. שילבנו בו בהצלחה פרויקט שנכתב בו VueJs+TS. תוקן כמה בעיות תאימות. הגדלנו את תוכן המידע של מחוון כיסוי הבדיקה. במאמר זה בדקנו רק אחד מקריטריוני איכות הקוד (אולי אחד המרכזיים שבהם), אבל soundQube תומך בקריטריוני איכות אחרים, כולל בדיקות בטיחות. אבל לא כל התכונות הללו זמינות במלואן ב קהילה-גרסאות. אחת התכונות המעניינות והשימושיות היא אינטגרציה soundQube עם מערכות שונות לניהול מאגר קוד, כגון GitLab ו-BitBucket. למנוע מיזוג בקשת משיכה (מיזוג).'א לסניף הראשי של המאגר כאשר הכיסוי ירד. אבל זה סיפור למאמר אחר לגמרי.

נ.ב.: כל המתואר במאמר בצורה של קוד זמין ב המזלג שלי.

רק משתמשים רשומים יכולים להשתתף בסקר. להתחברבבקשה.

האם אתה משתמש בפלטפורמת SonarQube:

• 26,3%כן5

• 15,8%מספר 3

• 15,8%שמעתי על הפלטפורמה הזו ואני רוצה להשתמש ב3

• 10,5%שמעתי על הפלטפורמה הזו ואני לא רוצה להשתמש ב2

• 0,0%אני משתמש בפלטפורמה אחרת0

• 31,6%פעם ראשונה ששמעתי עליה6

19 משתמשים הצביעו. 3 משתמשים נמנעו.

מקור: www.habr.com