Hello,
we are using SonarQube 8.6 and the plugins checkstyle, findbugs and pmd. Futhermore we scan our project using the SonarScanner in the latest sonar-scanner-cli docker image.
Especially, we use the Sonar Scanner to scan .vue files in our project.
The script part of the .vue files is based on JavaScript and NOT TypeScript.
In Project Settings → General Settings → Languages → JavaScript / TypeScript we have .vue
in the JavaScript File Suffixes but not in the TypeScript File Suffixes.
Our problem is that when the JavaScript analysis runs the parsing of some .vue files fails
INFO: Sensor JavaScript analysis [javascript]
INFO: 24 source files to be analyzed
ERROR: Failed to parse file [...] at line ...: ... :
ERROR: Failed to parse file [...] at line ...: ... :
ERROR: Failed to parse file [...] at line ...: ... :
...
INFO: 24/24 source files have been analyzed
INFO: Sensor JavaScript analysis [javascript] (done) | time=8271ms
Between the parsing errors the scanner logs:
INFO: Version of TypeScript used during analysis: 3.8.3
which is strange because we use JavaScript and not TypeScript.
One parsing error refers to a line with the script tag of a vue file and says:
Adjacent JSX elements must be wrapped in an enclosing tag
This seems strange because we are NOT using React BUT Vue.
Another parsing error claims that there is an unexpected colon in line 6
Here is the corresponding code snippet.
5 export default {
6 layout: 'anonymous',
7
8 data() {
The colon is inside the Vue.js script tag where we define a layout for our page.
This is valid Vue.js code which executes without problems.
It does not get flagged by eslint or even SonarJS when used with the eslint plugin
Yet another parsing error claims “Unexpected token =” which is a prop assignment inside the template part of the vue file
:headers="headers"
This is also proper Vue.js code which runs perfectly.
Is there a specific configuration with which we have to tell the Sonar Scanner that these are .vue files or is there a specific plugin or scanner needed? Do we need a specifc configuration file in our project for .vue files or a specific dependency/plugin?
As mentioned before we also included the SonarJS plugin into eslint and that works without any parse errors. We are wondering why the SonarJS plugin works in eslint, but the SonarScanner doesn’t work. Is the SonarJS plugin not used by default by the SonarScanner or does it maybe use a too old version?
Thanks in advance for any help
Sammy