Must-share information (formatted with Markdown):
- which versions are you using (SonarQube, Scanner, Plugin, and any relevant extension): Developer Edition Version 8.9.7 (build 52159).
- what are you trying to achieve: Count the number of lines of code in a Vue.js project.
- what have you tried so far to achieve this: Quality profile changes.
As I understand it SonarQube doesn’t currenty count the lines within the template block of a Vue component as lines of code. So this for example would be considered 7 lines of code—essentially only counting the part inside the script tags:
<template>
<main>
<h1>Hello world!</h1>
<p v-if="isEnabled">Hello!</p>
</main>
</template>
<script>
export default {
data() {
return {
isEnabled: true,
}
},
}
</script>
This doesn’t seem right to me as Vue templates do contain logic and it is standard practice to include them in unit tests. Equally, if you were to do the same thing in React using JSX I imagine—although I haven’t tested this—that it would be counted as 10 lines:
import React, { useState } from 'react';
export default function MyComponent() {
const [isEnabled] = useState(true);
return (
<main>
<h1>Hello world!</h1>
{isEnabled ? <p>Hello!</p> : null}
</main>
)
}
On the projects I’m working on this seems to underestimate the LoC by around 50%. eg. if we have 200,000 lines in our estate, there are around 100,000 lines of Vue templates that are not being counted. That’s quite a big difference in the amount of code/complexity that needs to be managed.
This may be loosely connected to this issue: No duplications detection is performed on vue template and scss