Next.js 13 × SonarQubeでソースコードの静的解析と品質管理を行う方法

$ npm install --save-dev sonarqube-scanner vitest-sonar-reporter

// vitest.config.ts
import react from '@vitejs/plugin-react'
import path from 'path'
import { defineConfig } from 'vitest/config'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'happy-dom',
    coverage: {
      provider: 'v8',
      include: ['src/**/*.{tsx,js,ts}'],
      all: true,
      // lcovを追加
      reporter: ['html', 'clover', 'text', 'lcov']
    },
    root: '.',
    // vitest-sonar-reporterを追加
    reporters: ['verbose', 'vitest-sonar-reporter'],
    outputFile: 'test-report.xml'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~': path.resolve(__dirname, './src'),
    },
  },
})

sonar.projectKey=next13-starter-guide
sonar.projectName=next13-starter-guide
sonar.sources=src
sonar.tests=src/unit-test/
sonar.test.inclusions=src/unit-test/**/*.test.tsx
sonar.exclusions=src/unit-test/**/*.test.tsx, src/unit-test/**/setup.ts
sonar.testExecutionReportPaths=test-report.xml
sonar.javascript.file.suffixes=.js,.jsx
sonar.typescript.file.suffixes=.ts,.tsx
sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.javascript.lcov.reportPaths=coverage/lcov.info

sonar.login=sqp_6b250ff2a5a560f3beaf1d01ff3b4dd5b60d5432

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

# テストの実行
npm run test

# SonarQubeの実行
npm run sonar
> sample-project@0.1.0 sonar
> sonar-scanner
[06:46:39] Starting analysis...
...省略...
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 32.474s
INFO: Final Memory: 17M/112M
INFO: ------------------------------------------------------------------------
[06:47:12] Analysis finished.