migrate vue config (#237)

Signed-off-by: Kangrui Johann Ye <kangrui.ye@cloudflight.io>

eslint.config.mjs

@@ -2,7 +2,7 @@ import tseslint from 'typescript-eslint';
 import {includeIgnoreFile} from '@eslint/compat';
 import {dirname, resolve} from 'node:path';
 import {fileURLToPath} from 'node:url';
-import { config } from '@cloudflight/eslint-plugin-typescript';
+import { cloudflightTypescriptConfig } from '@cloudflight/eslint-plugin-typescript';
 
 const filename = fileURLToPath(import.meta.url);
 const directory = dirname(filename);
@@ -17,7 +17,6 @@ export default tseslint.config(
             'packages/eslint-plugin-angular/*',
             'packages/eslint-plugin-node/*',
             'packages/eslint-plugin-react/*',
-            'packages/eslint-plugin-vue/*',
             'packages/eslint-plugin-typescript/src/configs/index.ts',
             'packages/eslint-plugin-typescript/src/configs/recommended/*',
             'packages/eslint-plugin-typescript/src/configs/recommended-json/*',
@@ -30,9 +29,10 @@ export default tseslint.config(
             'scripts/*',
             '.eslintrc.format.js',
             'eslint.config.mjs',
+            'jest.config*.ts',
         ]
     },
-    ...config,
+    ...cloudflightTypescriptConfig,
     {
         languageOptions: {
             parserOptions: {

package.json

@@ -41,7 +41,7 @@
         "@typescript-eslint/eslint-plugin": "8.8.0",
         "@typescript-eslint/parser": "8.8.0",
         "@typescript-eslint/utils": "8.8.0",
-        "@vue/eslint-config-typescript": "13.0.0",
+        "@vue/eslint-config-typescript": "14.0.0",
         "eslint": "9.11.1",
         "eslint-plugin-import": "2.29.1",
         "eslint-plugin-json-es": "1.6.0",
@@ -52,8 +52,7 @@
         "eslint-plugin-react-hooks": "4.6.2",
         "eslint-plugin-rxjs": "5.0.3",
         "eslint-plugin-security": "3.0.0",
-        "eslint-plugin-vue": "9.25.0",
-        "globals": "15.10.0",
+        "eslint-plugin-vue": "9.28.0",
         "husky": "9.1.6",
         "jest": "29.7.0",
         "lint-staged": "15.2.10",

packages/eslint-plugin-typescript/README.md

@@ -24,16 +24,30 @@ In your `package.json` add the following:
   }
 ```
 
-Now open your `.eslintrc.js` and add the following:
-
-```
-require('@rushstack/eslint-patch/modern-module-resolution');
-
-module.exports = {
-    ...
-    extends: ['plugin:@cloudflight/typescript/recommended'],
-    ...
-};
+Now open your `eslint.config.mts` and add one of the configurations:
+
+```ts
+import { cloudflightTypescriptConfig } from '@cloudflight/eslint-plugin-typescript';
+import { includeIgnoreFile } from '@eslint/compat';
+import { dirname, normalize, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const gitignorePath = normalize(resolve(__dirname, '.gitignore'));
+
+export default [
+    includeIgnoreFile(gitignorePath),
+    ...cloudflightTypescriptConfig,
+    {
+        languageOptions: {
+            parserOptions: {
+                project: ['tsconfig.*?.json'],
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+    },
+];
 ```
 
 When executing your next `eslint .` it will now validate your code against the cloudflight-recommended rules.

packages/eslint-plugin-typescript/package.json

@@ -34,7 +34,6 @@
         "eslint-plugin-json-es": "^1.6.0",
         "eslint-plugin-rxjs": "^5.0.3",
         "eslint-plugin-simple-import-sort": "^12.1.0",
-        "globals": "^15.10.0",
         "typescript-eslint": "^8.8.0"
     },
     "peerDependencies": {

packages/eslint-plugin-typescript/src/index.ts

@@ -5,10 +5,9 @@ import {typescriptEslintRules} from './configs/recommended-typescript/rules/type
 import {customRules} from './configs/recommended-typescript/rules/custom';
 import {cloudflightTypescriptPlugin} from './rules';
 
-export const config = tseslint.config(
+export const cloudflightTypescriptConfig = tseslint.config(
     {
         files: ['**/*.{js,mjs,cjs,ts,mts,cts}'],
-        ignores: ['jest.config*.ts'],
         plugins: {
             '@cloudflight/typescript': cloudflightTypescriptPlugin,
         },

packages/eslint-plugin-vue/README.md

@@ -9,7 +9,6 @@ You can find the directory of all rules including their reasoning [here](src/con
 The following dependencies are required:
 
 ```
-"@cloudflight/eslint-plugin-typescript": ">=0.26.0",
 "eslint": ">=9.0.0 < 10.0.0"
 ```
 
@@ -25,22 +24,28 @@ In your `package.json` add the following:
   }
 ```
 
-The plugin provides 1 configuration:
-
--   @cloudflight/vue/recommended
-    -   Contains rules for Vuejs files
-
-Now open your `.eslintrc.js` and add one of the configurations:
-
-```
-require('@rushstack/eslint-patch/modern-module-resolution');
-
-module.exports = {
-    ...
-    extends: ['plugin:@cloudflight/vue/recommended'],
-    parserOptions: {
-        parser: '@typescript-eslint/parser',
+Now open your `eslint.config.mts` and add one of the configurations:
+
+```ts
+import { cloudflightVueConfig } from '@cloudflight/eslint-plugin-vue';
+import { includeIgnoreFile } from '@eslint/compat';
+import { dirname, normalize, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const gitignorePath = normalize(resolve(__dirname, '.gitignore'));
+
+export default [
+    includeIgnoreFile(gitignorePath),
+    ...cloudflightVueConfig,
+    {
+        languageOptions: {
+            parserOptions: {
+                project: ['tsconfig.*?.json'],
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
     },
-    ...
-};
+];
 ```

packages/eslint-plugin-vue/package.json

@@ -22,20 +22,18 @@
     "publishConfig": {
         "access": "public"
     },
-    "private": true,
     "scripts": {
-        "build-packagex": "tsc"
+        "build-package": "tsc"
     },
     "dependencies": {
-        "@vue/eslint-config-typescript": "^13.0.0",
-        "eslint-plugin-vue": "^9.25.0"
+        "@cloudflight/eslint-plugin-typescript": "workspace:*",
+        "@vue/eslint-config-typescript": "^14.0.0",
+        "eslint-plugin-vue": "^9.28.0"
     },
     "peerDependencies": {
-        "@cloudflight/eslint-plugin-typescript": "workspace:*",
         "eslint": ">=9.0.0 < 10.0.0"
     },
     "devDependencies": {
-        "@cloudflight/eslint-plugin-typescript": "workspace:*",
         "typescript": "5.5.4"
     }
 }

packages/eslint-plugin-vue/src/configs/typescript.ts

@@ -0,0 +1,7 @@
+import {TSESLint} from '@typescript-eslint/utils';
+
+export const typescriptRules: TSESLint.Linter.RulesRecord = {
+    // vue.js components have the any type when used with typescript import
+    // such as `import MyComponent from './my-component.vue'`
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+};

packages/eslint-plugin-vue/src/configs/vue.ts

@@ -0,0 +1,30 @@
+import {TSESLint} from '@typescript-eslint/utils';
+
+const htmlIndent = 4;
+
+export const vueRules: TSESLint.Linter.RulesRecord = {
+    'vue/block-lang': [
+        'error',
+        {
+            script: {
+                lang: 'ts',
+            },
+            style: {
+                lang: 'scss',
+            },
+        },
+    ],
+    'vue/component-api-style': ['error', ['script-setup', 'composition']],
+    'vue/define-emits-declaration': ['error', 'type-based'],
+    'vue/define-props-declaration': ['error', 'type-based'],
+    'vue/define-macros-order': [
+        'error',
+        {
+            order: ['defineProps', 'defineEmits'],
+        },
+    ],
+    'vue/html-button-has-type': 'error',
+    'vue/html-indent': ['error', htmlIndent],
+    'vue/no-ref-object-destructure': 'error',
+    'vue/no-undef-properties': 'error',
+};

packages/eslint-plugin-vue/src/index.ts

@@ -1,2 +1,28 @@
-export {configs} from './configs';
-export {rules} from './rules';
+import tseslint from 'typescript-eslint';
+import { cloudflightTypescriptConfig } from '@cloudflight/eslint-plugin-typescript';
+import {TSESLint} from '@typescript-eslint/utils';
+// @ts-expect-error .d.ts file for eslint-plugin-vue has been implemented but not released yet
+// if the following line fails to build after updating the version, simply remove this comment
+import pluginVue from 'eslint-plugin-vue';
+import vueTsEslintConfig from '@vue/eslint-config-typescript';
+import {typescriptRules} from './configs/typescript';
+import {vueRules} from './configs/vue';
+
+export const cloudflightVueConfig = tseslint.config(
+    ...cloudflightTypescriptConfig,
+    {
+        files: ['**/*.vue'],
+        extends: [
+            ...cloudflightTypescriptConfig,
+            // .d.ts file for eslint-plugin-vue has been implemented but not released yet, if the
+            // following line fails to build after updating the version, simply remove this comment
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/consistent-type-assertions
+            ...pluginVue.configs['flat/recommended'] as TSESLint.FlatConfig.ConfigArray,
+            ...vueTsEslintConfig(),
+        ],
+        rules: {
+            ...typescriptRules,
+            ...vueRules,
+        }
+    },
+);