Nos actuose uti suggestu in opere nostro soundQube esse codicem qualitas altam. Cum una incepta scripta in VueJs+Typescriptquaestiones ortae sunt. Quare diligentius vobis narrare velim quomodo ea solvere potuimus.

In hoc articulo loquemur, ut supra scripsi, de suggestu SonarQube. Libellus theoriae - quid sit in communi, ad eos qui de hoc audiunt primum;

soundQube (pristini sonar) fons apertus suggestus inspectionis et codicis mensurae qualitatis continuae.
Codicem analysin et errorem detectionis adiuvat secundum regulas MISRA C, MISRA C++, MITER/CWE et CERT Secura signa signa programmandi. Etiam errores ex OWASP Top 10 et CWE/SANS Top 25 Errorum programmantium agnoscere potest.
Quamvis suggestum variis instrumentis praeparatis utatur, SonarQube eventus ad unum ashboardday reducere, historiam currit retinens et permittit te videre inclinationem generalem mutationum in programmate qualitatum programmatum.

Plura singula inveniri possunt in rutrum

Magnus numerus programmandi linguarum sustentatur. Indicium e vinculo supra iudicantes, hae sunt plus quam 25 linguae. Ad linguam specificam sustinendam, aptam plugin instituere debet. Communitas versionem includit plugin operandi cum Javascript (including typesсript), quamvis wiki contrarium dicat. Post Javascript plugin responsa SonarJSAd Typescript SonarTS respectively.

Officialis clientem adhibetur ad mittere coverage notitia sonarqube-scannerqui utens occasus e config-file, haec notitia mittit in calculonis servi soundQube ad ulteriorem consolidationem et aggregationem.

Ad Javascript est npm fascia. Itaque, GRADATUS implementation soundQube в Vue-project usura typescript.

Ad explicandam servo soundQube lets utilitatem Docker componas,.

sonar.yaml:

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

Lorem:

docker-compose -f sonar.yml up

postmodum soundQube erit praesto ad: http://localhost:9001 .

Nulla in eo molimenta sunt tamen et pulchra. Hanc rem emendabimus. Ego exemplum project ad officialem tuli VueJS+TS+Jest. Flectamus illud ad nosmet ipsos;

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

Primum opus est ut install clientis soundQubequae vocatur sonar-scannerquia npm est fascia;

yarn add sonarqube-scanner

Et statim adde mandatum to . scriptor laborare cum eo.

package.json:

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

Deinde ad scanner ad operandum, necesse est ut in speciali fasciculo positos projecti constituas. Sit scriptor satus cum basics.

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 - oratio sonar'A;
• sonar.projectKey - unique project identifier in calculonis servi sonar'A;
• sonar.projectName - nomen eius aliquo tempore mutari potest, cum consilium a notatur projectKey;
• sonar.sources - folder cum fontibus, plerumque hoc srcesse potest, nihil potest. Hoc folder ponitur relativum ad radicem folder, quod est folder e quo scanner emittitur;
• sonar.tests - modulus qui tandem cum priore vadit. Hic est folder in quo probatio sita est. In hoc incepto non est talis folder, et probatio iuxta componentem probata in folder' est posita'.Test', ergo pro nunc praetermittemus et proximo modulo utemur;
• sonar.test.inclusions - Semita ad personas probationes adhibens, plura elementa esse possunt per commata separata recensita;
• sonar.sourceEncoding - modum translitterandi ad fontem files.

Ad primam emissionem scanneris, omnia parata sunt, excepto principali actione praecedenti: deducto ipsum testam machinam, ut informationes generare possit de coverage, qua scanner postea utetur.

Sed hoc facere debes test machinam configurare ad informationem huius generandam. In hoc project, test engine est locus. Et occasus eius in sectione tabellae respondente package.json.

Addamus has occasus:

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

Hoc est, vexillum ipsum ponimus ad opus coverage computare et fontem (secundum exceptiones) ex quo formabitur.

Nunc curremus experimentum:

yarn test

Videbimus sequentia;

Ratio est quia in ipso componente non est signum. Hoc figamus.

HelloWorld.vue:

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

Hoc satis erit ad calculandum coverage.

Post sileo probationem, de hoc fac.

In scrinio informationes de coverage videre debemus, et folder in folder documenti creabitur coverage cum test coverage in universa forma LCOV (LTP GCOV extensio).

Gcov gratis distributa est utilitas ad codicem examinandi coverage. GCV exactum numerum suppliciorum ad singulas propositiones generat in programmatis et permittit ut annotationes addere in codice fonti. Gcov venit ut vexillum utilitas cum parte sarcinae GCC.
Lcov — Interface graphice pro gcov. Fasciculos gcov colligit propter multiplices imaginum fontes et copiam HTML paginarum cum codice et informatione coverage producit. Paginae quoque generatae sunt ad faciliorem navigationem faciendam. Lcov sustinet coverage chordarum, functionum et ramorum.

Post probationes complebuntur, notitia coverage in collocabitur coverage/lcov.info.
Non opus est dicere sonarUnde mihi eam? Ergo ad eius configurationem lima lineas sequentes addamus. Sed unum punctum: incepta multiplicabilia esse possunt, id est, in folder src exstant codices aliquot programmandi linguarum et affiliationum una alterave, ac vicissim usus unius vel alterius plugin per extensionem determinatur. Informationes autem coverage in diversis locis pro diversis linguis programmandi condi possunt, ita unaquaeque lingua suam partem habet ad hoc instituendum. Nostrum project usus typescriptsic egimus sectionem uncinis pro ea;

sonar-project.properties:

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

Omnia parata sunt primae scannae launch. Vellem quod consilii sonar'E statim primum creatur scanner pro signo dato. Sequentibus temporibus notitia cumulabitur ut dynamica vis mutationum in ambitu parametri per tempus videatur.

Ita utamur imperio antea creato package.json:

yarn run sonar 

Note: vos can quoque uti parametri -X ad accuratiorem logging.

Si primum scanner immissa est, ipsum binarium scanner primum inicietur. Post hoc incipit et incipit intuens server sonar'a plugins inauguratus, inde computandi linguam sustinens. Varii etiam alii parametri ad suam operationem onerati sunt; qualitates profile, regulae activae, repositio metrica, praecepta servo.

Note: Non singillatim in articulis huius articuli morabimur, sed semper fontes officiales contingere potes.

Deinde, folder analysis incipit src ad promptibilitatem fontium fasciculorum pro omnibus (si specificum non est expressum) linguam sustinet, cum eorum subsequenti indice.

Sequuntur variae aliae analyses, quas in hoc articulo non intendunt (exempli gratia, linteatio, detectio codicis duplicatio, etc.).

In ipso fine operis scanneri, omnes notitiae collectae aggregatur, scrinium ac servo mittitur.

Post hoc iam videre possumus quid in interreti interreti sit factum:

Ut videre possumus, aliquid operatum est, ac etiam quaedam coverage ostendit, sed nostro non congruit locus-renuntiare.

Sit instar est. Intueamur consilium subtilius, preme valorem in coverage, et "cadere per" in relationem singulae fasciculi:

Videmus hic, praeter praecipua documenta examinata HelloWorld.vue, est etiam fasciculus main.tsqui corrumpit totaque coverage. Sed quomodo nos a calculi coverage excludimus. Omnia recte quidem, sed in aequo erant locussed lustrator ita recensuit, ut in calculis finiretur.

Hoc figamus:

sonar-project.properties:

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

Dilucidationem facere vellem: praeter folders qui in hoc parametro nominantur, omnes folder in parametro recensiti etiam adduntur. sonar.test.inclusions.

Postquam scanner deductis, rectas informationes videmus;

Inspice punctum proximum - Qualitas profiles. Locutus sum supra de auxilio sonarpluribus linguis simul om. Hoc ipsum videmus. Scimus autem consilium nostrum scriptum in TSsic, quid elaboret supervacuis tractationibus et inhibeat. Linguam pro analysi ponemus addendo unum modulum magis ad limam conformationem sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Curramus iterum scanner et exitum videamus;

In coverage omnino recessit.

Si stipes scanner spectemus, sequentem lineam videre possumus:

Id est, fasciculi nostri exerti simpliciter non sunt indiceti.

Res ita se habet: publice sustentatur VueJs in plugin SonarJSqui reus est Javascript.

Sed hoc subsidium in plugin non est SonarTS ad TS, de qua tessera officialis in cimex venato aperta est sonar'A:

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

Hic sunt responsa quaedam ex legatis a SonarQube tincidunt, id ipsum confirmantes.

Sed pro nobis omnia elaboraverunt, te recusabo. Ita est, paulo experiamur "hack".
Si est auxilium .vue-files sonarOh, conemur dicere eum considerare typescript.

Addamus modulo:

sonar-project.properties:

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

Demus scanner:

Et, voila, omnia ad normalia convertuntur, et cum uno tantum profano typescript. Hoc est, quaestionem solvere in auxilio potuimus VueJs+TS ad soundQube.

Longius progredi conemur et informationes parvas emendare coverage.

Quod nos hactenus fecerimus;

• additae ad project sonar-scanner;
• extruxerat locus ad generandum coverage notitia;
• felis sonar-scanner;
• solvitur ad auxilium problema .vue-files + typescript.

Praeter experimentum coverage, aliae iucundae rationes utilissimae sunt pro codice qualitate, exempli gratia, codice duplicatio et numerus linearum (involutus calculi coefficientium ad codicem multiplicitatem pertinentium) rei.

In current exsecutio plugin operandi cum TS (SonarTS) Nolo operari CPD (Copy Paste Detector) et computatis lineae codice .vue-files.

Ad syntheticam condicionem duplicationis codicis efficiendam, simpliciter duplicare limam componentis cum alio nomine et etiam in codice addere. main.ts phantasma munus ac duplicare alio nomine. Ad reprimendam duplicationem quam in .vueet in .ts -files.

main.ts:

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

Hoc facere debes lineam configurationis ad tempus explanare:

sonar-project.properties:

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

Sit scriptor sileo scanner cum tentatione:

yarn test && yarn run sonar

Utique nostra coverage cadet, sed nunc in eo non quaero.

In terminis codicis duplicandis lineas videbimus;

Ad reprehendo nos utimur CPD-utilitas - jscpd:

npx jscpd src

Ad lineas codicis:

Fortasse hoc plugin versionibus in futuris resolvetur SonarJS(TS). Notare velim haec duo plugins in unum gradatim incipientes iungi SonarJSquod recte puto.

Nunc optio emendandi coverage notitias considerare volui.

Hactenus videre possumus testam coverage in recipis vocabulis pro toto proposito, ac pro fasciculis in specie. Sed possibile est hoc signum cum informatione circa quantitatem dilatare unum-tests pro documento necnon in contextu tabellarum.

Est bibliotheca quae can locus-convert fama in forma for sonar'A:
test notitia - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Instruamus hanc bibliothecam in nostro consilio:

yarn add jest-sonar-reporter

Et adde figurationem locus:

package.json:

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

Nunc curremus experimentum:

yarn test

Post quem fasciculus in radice project test-report.xml.

Utamur in configuratione sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Et sileo scanner:

yarn run sonar

Videamus quid mutata in interface sonar'A:

et nihil mutandum. Res est Sonar non considerare lima de quibus in fama Iest sicut tabulae unum-test. Ad hanc condicionem corrigendam, figuratione parametri utimur sonar sonar.tests, in quo folders cum probationibus expresse indicabimus (unum modo habemus);

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Sit scriptor sileo scanner:

yarn run sonar

Videamus quid in interface mutata:

Nunc vidimus numerum nostrorum unum-tests et, intus strepitando inrito, videre possumus huius numeri distributionem inter documenta documentorum:

conclusio,

Itaque instrumentum ad analysim continuam spectavimus soundQube. Nos feliciter inseruimus hoc consilium scriptum in . VueJs+TS. Certis quibusdam rebus convenientiae. Augebamus informationes contenta experimenti coverage indicator. In hoc articulo perscrutati sumus unam tantum ex notularum qualitatum codice (fortasse una e praecipuis), sed soundQube aliae qualitates criteria sustinet, etiam probatio salutis. Sed non omnia haec lineamenta plene in promptu sunt Community-versiones. Una opportuna et utilis est integratio soundQube cum variis codice repositoria systematis administratione, ut GitLab et BitBucket. Prohibere merge viverra (merge) petitionema ad principale repositorii cum coverage degradatur. Sed haec fabula longe alia est.

PS: Omnia quae in articulo descripta sunt in forma codicis est in promptu est mea furca.

Tantum usores descripserunt in aliquet participare possunt. InscribeTe gratissimum esse.

suggestu SonarQube Uteris:

• 26,3%Yes5

• 15,8%No3

• 15,8%Audivi de hoc suggestu ac velle uti3

• 10,5%Audivi de hoc suggestu ac nolo use2

• 0,0%Ego uti platform0 alium

• 31,6%Primum audivi de her6

19 utentes censuerunt. 3 utentes abstinuerunt.

Source: www.habr.com