Update ESLint configuration and fix linting issues

- Upgrade to stricter Vue3 recommended rules
- Add TypeScript ESLint parser configuration
- Update linting rules for better code quality
- Fix linting issues across all components
- Add CLAUDE.md for development workflow

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: stared

.eslintrc.cjs

@@ -4,22 +4,67 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 module.exports = {
   root: true,
   extends: [
-    'plugin:vue/vue3-strongly-recommended',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
     '@vue/eslint-config-typescript/recommended',
     '@vue/eslint-config-prettier/skip-formatting'
   ],
+  parser: 'vue-eslint-parser',
   parserOptions: {
-    ecmaVersion: 'latest'
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+    extraFileExtensions: ['.vue']
   },
+  ignorePatterns: ['.eslintrc.cjs', 'dist', 'node_modules'],
   rules: {
-    'no-console': 'off',
-    'no-debugger': 'error',
+    // Line length
+    'max-len': ['error', { 
+      code: 120, 
+      ignoreComments: true,
+      ignoreStrings: true,
+      ignoreTemplateLiterals: true,
+      ignoreRegExpLiterals: true 
+    }],
+    
+    // General rules
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-var': 'error',
     'prefer-const': 'error',
     'prefer-arrow-callback': 'error',
-    '@typescript-eslint/no-unused-vars': 'error',
+    'eqeqeq': ['error', 'always'],
+    'curly': ['error', 'all'],
+    
+    // TypeScript rules
+    '@typescript-eslint/no-unused-vars': ['error', { 
+      argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_' 
+    }],
     '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'warn',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/await-thenable': 'error',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+    '@typescript-eslint/prefer-as-const': 'error',
+    '@typescript-eslint/consistent-type-imports': ['error', { 
+      prefer: 'type-imports' 
+    }],
+    // Relax rules for external library types
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    
+    // Vue rules
     'vue/multi-word-component-names': 'off',
     'vue/no-unused-components': 'error',
     'vue/no-unused-vars': 'error',
@@ -28,7 +73,20 @@ module.exports = {
     }],
     'vue/block-tag-newline': 'error',
     'vue/component-name-in-template-casing': ['error', 'PascalCase'],
-    'vue/define-props-declaration': 'error',
-    'vue/no-empty-component-block': 'error'
+    'vue/define-props-declaration': ['error', 'type-based'],
+    'vue/define-emits-declaration': ['error', 'type-based'],
+    'vue/no-empty-component-block': 'error',
+    'vue/padding-line-between-blocks': 'error',
+    'vue/prefer-separate-static-class': 'error',
+    'vue/prefer-true-attribute-shorthand': 'error',
+    'vue/v-on-function-call': ['error', 'never'],
+    'vue/no-useless-v-bind': 'error',
+    'vue/no-useless-mustaches': 'error',
+    'vue/no-constant-condition': 'warn',
+    'vue/require-macro-variable-name': 'error',
+    'vue/valid-define-options': 'error',
+    'vue/block-lang': ['error', {
+      'script': { 'lang': 'ts' }
+    }]
   }
 }

CLAUDE.md

@@ -0,0 +1,3 @@
+## Development Workflow
+
+- Run pnpm lint before any commit (and after major edits as well).

src/App.vue

@@ -51,7 +51,7 @@ const handleFileUpload = async (csvData: CsvData) => {
 
 const handleFileRemoved = () => {
   // Clear any data-related variables in R
-  executeCode('if (exists("data")) rm(data)')
+  void executeCode('if (exists("data")) rm(data)')
 }
 
 const handleExampleSelect = async (example: RExample) => {
@@ -64,7 +64,7 @@ const handleExampleSelect = async (example: RExample) => {
 }
 
 onMounted(() => {
-  initializeWebR(code.value)
+  void initializeWebR(code.value)
   // Set initial executed code after auto-execution
   setTimeout(() => {
     lastExecutedCode.value = code.value
@@ -114,12 +114,20 @@ onMounted(() => {
             <div class="console-content">
               <div class="console-header">
                 <span class="console-title">Console Output</span>
-                <button @click="showConsole = false" class="console-close">×</button>
+                <button class="console-close" @click="showConsole = false">×</button>
               </div>
               <div class="console-messages">
-                <div v-for="(message, index) in textMessages" :key="'text-' + index" class="console-message" :class="message.type">
+                <div 
+                  v-for="(message, index) in textMessages" 
+                  :key="'text-' + index" 
+                  class="console-message" 
+                  :class="message.type"
+                >
                   <span class="message-label">{{ message.type.toUpperCase() }}:</span>
-                  <pre v-if="message.type === 'stdout' || message.type === 'stderr'" class="message-text">{{ message.content }}</pre>
+                  <pre 
+                    v-if="message.type === 'stdout' || message.type === 'stderr'" 
+                    class="message-text"
+                  >{{ message.content }}</pre>
                   <span v-else class="message-text">{{ message.content }}</span>
                 </div>
               </div>
@@ -132,20 +140,20 @@ onMounted(() => {
       <div class="bottom-bar">
         <div class="bottom-bar-left">
           <button 
-            @click="runCode" 
             :disabled="!isReady || isLoading" 
-            :class="{ 'has-changes': hasChanges, 'no-changes': !hasChanges }"
+            :class="{ 'has-changes': hasChanges, 'no-changes': !hasChanges }" 
             class="run-button"
+            @click="runCode"
           >
             {{ isLoading ? 'Running...' : 'Run Code' }}
           </button>
         </div>
         <div class="bottom-bar-right">
           <button 
             v-if="textMessages.length > 0"
-            @click="showConsole = !showConsole"
             class="console-toggle"
             :class="{ 'has-errors': hasErrors }"
+            @click="showConsole = !showConsole"
           >
             Console ({{ textMessages.length }})
             <span class="toggle-arrow" :class="{ 'open': showConsole }">▼</span>

src/components/CodeEditor.vue

@@ -19,7 +19,7 @@ const editorRef = ref<HTMLElement>()
 let editor: monaco.editor.IStandaloneCodeEditor | null = null
 
 onMounted(() => {
-  if (!editorRef.value) return
+  if (!editorRef.value) {return}
 
   editor = monaco.editor.create(editorRef.value, {
     value: props.modelValue,

src/components/ExampleSelector.vue

@@ -25,8 +25,8 @@ const handleExampleChange = () => {
     <select
       id="example-select"
       v-model="selectedExample"
-      @change="handleExampleChange"
       class="select"
+      @change="handleExampleChange"
     >
       <option v-for="example in examples" :key="example.id" :value="example.id">
         {{ example.title }}

src/components/FileUpload.vue

@@ -106,7 +106,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="file-upload" ref="dropdownRef">
+  <div ref="dropdownRef" class="file-upload">
     <div 
       v-if="!uploadedFile" 
       class="upload-button"
@@ -120,9 +120,9 @@ onUnmounted(() => {
         ref="fileInputRef"
         type="file"
         accept=".csv"
-        @change="handleFileSelect"
         class="file-input"
         style="display: none;"
+        @change="handleFileSelect"
       />
       <span class="upload-icon">📁</span>
       <span class="upload-text">Upload CSV</span>
@@ -131,8 +131,8 @@ onUnmounted(() => {
 
     <div v-else class="csv-info-container">
       <button 
-        @click="toggleDropdown"
         class="csv-button"
+        @click="toggleDropdown"
       >
         <span class="csv-icon">📊</span>
         <span class="csv-text">{{ uploadedFile.name }} ({{ uploadedFile.rows }} × {{ uploadedFile.columns }})</span>
@@ -142,7 +142,7 @@ onUnmounted(() => {
       <div v-if="isOpen" class="csv-dropdown">
         <div class="csv-header">
           <span class="header-text">CSV Information</span>
-          <button @click="removeFile" class="remove-btn" title="Remove file">×</button>
+          <button class="remove-btn" title="Remove file" @click="removeFile">×</button>
         </div>
         <div class="csv-details">
           <div class="detail-item">

src/components/LibrarySelector.vue

@@ -56,12 +56,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="library-selector" ref="dropdownRef">
+  <div ref="dropdownRef" class="library-selector">
     <button 
-      @click="toggleDropdown"
       :disabled="isLoading"
       class="libraries-button"
       :class="{ 'disabled': isLoading }"
+      @click="toggleDropdown"
     >
       <span class="libraries-icon">📚</span>
       <span class="libraries-text">Libraries ({{ installedCount }})</span>
@@ -83,8 +83,8 @@ onUnmounted(() => {
             type="checkbox" 
             :checked="installedLibraries.has(library.name)"
             :disabled="isLoading"
-            @change="handleToggle(library.name, $event)"
             class="library-checkbox"
+            @change="handleToggle(library.name, $event)"
           />
           <div class="library-info">
             <span class="library-name">{{ library.name }}</span>

src/components/OutputDisplay.vue

@@ -13,7 +13,7 @@ const props = defineProps<Props>()
 const outputRef = ref<HTMLElement>()
 
 const scrollToBottom = () => {
-  nextTick(() => {
+  void nextTick(() => {
     if (outputRef.value) {
       outputRef.value.scrollTop = outputRef.value.scrollHeight
     }
@@ -46,7 +46,7 @@ watch(
 
 <template>
   <div class="output-display">
-    <div class="output-content" ref="outputRef">
+    <div ref="outputRef" class="output-content">
       <div v-if="isLoading" class="loading">
         <div class="spinner"></div>
         <span>Running R code...</span>
@@ -231,6 +231,4 @@ watch(
   color: #374151;
   white-space: pre-wrap;
 }
-
-
 </style>

src/components/WebRStatus.vue

@@ -10,7 +10,14 @@ defineProps<Props>()
 
 <template>
   <div class="webr-status">
-    <div class="status-indicator" :class="{ 'loading': isLoading, 'ready': isReady && !isLoading, 'error': !isReady && !isLoading && loadingStatus.includes('Failed') }">
+    <div 
+      class="status-indicator" 
+      :class="{ 
+        'loading': isLoading, 
+        'ready': isReady && !isLoading, 
+        'error': !isReady && !isLoading && loadingStatus.includes('Failed') 
+      }"
+    >
       <div v-if="isLoading" class="spinner"></div>
       <span v-else-if="isReady" class="status-icon">✓</span>
       <span v-else-if="loadingStatus.includes('Failed')" class="status-icon">✗</span>

src/composables/useWebR.ts

@@ -166,7 +166,7 @@ export const useWebR = () => {
   }
 
   const toggleLibrary = async (library: string, install: boolean) => {
-    if (!webR) return
+    if (!webR) {return}
 
     try {
       if (install) {