feat: Add extra config for vue+typescript projects

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

CHANGELOG.md

@@ -5,6 +5,7 @@
 [Full Changelog](https://github.com/nextcloud/eslint-config/compare/v8.2.1...master)
 
 **Features:**
+- Provide config for vue files written in Typescript, use `extends: "@nextcloud/eslint-config/typescript"`.
 - Fully support vue files using the Composition API `<script setup>`.
 
 ## [v8.3.0-beta.0](https://github.com/nextcloud/eslint-config/tree/v8.3.0-beta.0) (2023-05-12)

README.md

@@ -28,6 +28,20 @@ module.exports = {
 }
 ```
 
+### Usage with Typescript projects
+
+If your projects uses Typescript for vue files, like `<script lang="ts">` then use the Typescript config instead:
+
+Add a file `.eslintrc.js` in the root directory of your app repository with the following content:
+
+```js
+module.exports = {
+	extends: [
+		'@nextcloud/eslint-config/typescript',
+	],
+}
+```
+
 ## Release new version
 
  1. Update CHANGELOG.md file with the latest changes

tests/eslint-typescript-config.test.ts

@@ -0,0 +1,19 @@
+import { ESLint } from "eslint"
+import type { Linter } from "eslint"
+import * as path from 'path'
+import * as eslintConfig from '../typescript.js'
+
+
+const eslint = new ESLint({
+	baseConfig: eslintConfig as unknown as Linter.Config<Linter.RulesRecord>
+})
+
+const lintFile = async (file) => {
+	const real = path.resolve(path.join(__dirname, file))
+	return await eslint.lintFiles(real)
+}
+
+test('works with Typescript + Vue', async () => {
+	const results = await lintFile('fixtures/typescript-test.vue')
+	expect(results).toHaveIssueCount(0)
+})

tests/fixtures/typescript-test.vue

@@ -0,0 +1,12 @@
+<template>
+	<code>String: "{{ props.someString }}"
+		Int: {{ props.someInt }}
+	</code>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	someString: string,
+	someInt: number,
+}>()
+</script>

typescript.js

@@ -0,0 +1,25 @@
+const base = require('./parts/base.js')
+const typescriptOverrides = require('./parts/typescript.js')
+const vueOverrides = require('./parts/vue.js')
+
+/**
+ * Config for projects written in Typescript + vue including vue files written in Typescript (`<script lang='ts'>`)
+ */
+module.exports = {
+	...base,
+	overrides: [
+		// Add Typescript rules also for vue files
+		{
+			...typescriptOverrides,
+			files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
+		},
+		// Use different parser for vue files script section
+		{
+			...vueOverrides,
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+				sourceType: 'module',
+			},
+		},
+	],
+}