pickier-vscode 0.1.8

package/examples/07-auto-fixable-vs-manual.ts

@@ -0,0 +1,69 @@
+/**
+ * Example 7: Auto-fixable vs Manual Fixes
+ *
+ * HOW TO TEST:
+ * 1. CodeLens shows how many issues are auto-fixable
+ * 2. Hover shows ✨ icon for auto-fixable issues
+ * 3. Code actions show "Fix" option only for auto-fixable
+ * 4. Click "Fix all" to fix only auto-fixable issues
+ */
+
+// ============================================
+// AUTO-FIXABLE ISSUES (✨)
+// ============================================
+
+// Auto-fix 1: debugger removal
+function autoFix1() {
+  debugger  // ✨ Can be auto-removed
+}
+
+// Auto-fix 2: prefer-const
+function autoFix2() {
+  let x = 10  // ✨ Can change to const
+  return x
+}
+
+// Auto-fix 3: string concatenation → template literal
+function autoFix3() {
+  const name = 'World'
+  const msg = 'Hello ' + name  // ✨ Can convert to template
+  return msg
+}
+
+// Auto-fix 4: quote style
+function autoFix4() {
+  const text = "double quotes"  // ✨ Can change to single
+  return text
+}
+
+// ============================================
+// MANUAL FIXES REQUIRED (no auto-fix)
+// ============================================
+
+// Manual 1: unused variable
+// Cannot auto-fix - need to decide: use it, remove it, or prefix with _
+function manualFix1() {
+  const unused = 'value'
+  return 42
+}
+
+// Manual 2: unused parameters
+// Cannot auto-fix - need developer decision
+function manualFix2(param1: string, unusedParam: number) {
+  return param1
+}
+
+// Manual 3: console.log (could auto-remove, but needs decision)
+function manualFix3() {
+  console.log('Is this debug or intentional?')
+}
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - CodeLens: "⚠️ Pickier: X errors, Y warnings (4 auto-fixable)"
+ * - Hover on auto-fixable shows: "✨ Auto-fix available"
+ * - Hover on manual shows help but no ✨ icon
+ * - Code actions on auto-fixable show "Fix: [description]"
+ * - Code actions on manual show "Disable" but not "Fix"
+ * - "Fix all" fixes only the 4 auto-fixable issues
+ */

package/examples/08-disable-comments.ts

@@ -0,0 +1,73 @@
+/**
+ * Example 8: Disable Comments
+ *
+ * HOW TO TEST:
+ * 1. Use code actions to add disable comments
+ * 2. See how different disable options work
+ * 3. Test "Disable for this line" action
+ * 4. Test "Disable for entire file" action
+ */
+
+// ============================================
+// EXAMPLE: Disable for specific line
+// ============================================
+
+// To test:
+// 1. Put cursor on 'debugger' below
+// 2. Press Cmd+.
+// 3. Select "Disable no-debugger for this line"
+// 4. Comment will be added above
+
+function test1() {
+  debugger  // Try disabling this
+}
+
+// After applying "Disable for this line", it becomes:
+function test1Fixed() {
+  // eslint-disable-next-line no-debugger
+  debugger
+}
+
+// ============================================
+// EXAMPLE: Disable for entire file
+// ============================================
+
+// To test:
+// 1. Put cursor on any console.log below
+// 2. Press Cmd+.
+// 3. Select "Disable no-console for entire file"
+// 4. Comment will be added at TOP of file
+
+function test2() {
+  console.log('test 1')
+}
+
+function test3() {
+  console.log('test 2')
+}
+
+// After applying "Disable for entire file", the TOP of this file gets:
+/* eslint-disable no-console */
+
+// ============================================
+// EXAMPLE: Disable multiple rules
+// ============================================
+
+function test4() {
+  debugger  // Disable no-debugger
+  const unused = 'value'  // Disable no-unused-vars
+  console.log('debug')  // Disable no-console
+}
+
+// You can disable multiple rules:
+// eslint-disable-next-line no-debugger, no-console
+// Or use separate comments for each
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - "Disable for this line" adds comment above the issue
+ * - "Disable for entire file" adds comment at top
+ * - After disabling, the diagnostic disappears
+ * - CodeLens updates to show fewer issues
+ * - Can re-enable by removing the comment
+ */

package/examples/09-clean-file.ts

@@ -0,0 +1,65 @@
+/**
+ * Example 9: Clean File (No Issues)
+ *
+ * HOW TO TEST:
+ * 1. Open this file
+ * 2. See CodeLens showing: "✓ Pickier: No issues found"
+ * 3. No squiggly underlines
+ * 4. Problems panel shows no issues for this file
+ * 5. This demonstrates what a "perfect" file looks like
+ */
+
+// ✅ Proper const usage (not let)
+const PI = 3.14159
+
+// ✅ All variables are used
+function calculateArea(radius: number): number {
+  const area = PI * radius * radius
+  return area
+}
+
+// ✅ Using template literals (not concatenation)
+function greet(name: string): string {
+  return `Hello, ${name}!`
+}
+
+// ✅ No debugger statements
+function debug(value: unknown): void {
+  // Use proper logging instead of console.log
+  if (process.env.NODE_ENV === 'development') {
+    // Conditional logging is okay
+  }
+}
+
+// ✅ No unused variables
+function compute(x: number, y: number): number {
+  const sum = x + y
+  const product = x * y
+  return sum + product  // Both variables are used
+}
+
+// ✅ Proper single quotes
+const message = 'This uses single quotes consistently'
+
+// ✅ All parameters are used
+function fullName(first: string, last: string): string {
+  return `${first} ${last}`
+}
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - CodeLens: "$(check) Pickier: No issues found"
+ * - No squiggly underlines anywhere
+ * - No items in Problems panel for this file
+ * - Hover on any code shows no diagnostics
+ * - This is the target state for all files!
+ */
+
+export {
+  calculateArea,
+  greet,
+  debug,
+  compute,
+  message,
+  fullName,
+}

package/examples/10-comprehensive-test.ts

@@ -0,0 +1,153 @@
+/**
+ * Example 10: Comprehensive Feature Test
+ *
+ * This file combines EVERYTHING to test all features at once:
+ * - Rich hover with help text
+ * - CodeLens with stats and actions
+ * - Multiple code action types
+ * - Problems panel integration
+ * - Auto-fixable vs manual issues
+ * - Different severity levels
+ *
+ * HOW TO TEST:
+ * 1. Open this file
+ * 2. See CodeLens at top with full stats
+ * 3. Hover over each issue - see rich help text
+ * 4. Try code actions (Cmd+.) on different issues
+ * 5. Check Problems panel for all issues
+ * 6. Click "Fix all" in CodeLens
+ * 7. See how file transforms
+ */
+
+// ============================================
+// SECTION 1: Built-in Rules
+// ============================================
+
+// Issue 1: debugger (ERROR, auto-fixable)
+// Hover: See help about removing debugger
+// Code action: Fix, Disable line, Disable file, View docs
+function section1a() {
+  debugger
+}
+
+// Issue 2: console.log (WARNING, not auto-fixed by default)
+// Hover: See help about using proper logging
+function section1b() {
+  console.log('debug message')
+  console.warn('warning message')
+}
+
+// Issue 3: template curly in string (ERROR, auto-fixable)
+// Hover: See help about using backticks
+function section1c() {
+  const value = 42
+  const msg = "Value is ${value}"
+  return msg
+}
+
+// ============================================
+// SECTION 2: Pickier Plugin Rules
+// ============================================
+
+// Issue 4: no-unused-vars (ERROR, NOT auto-fixable)
+// Hover: See help about using, removing, or prefixing with _
+function section2a() {
+  const unused1 = 'not used'
+  const unused2 = 42
+  return 0
+}
+
+// Issue 5: prefer-const (ERROR, auto-fixable)
+// Hover: See help about using const
+// Code action: Changes let to const
+function section2b() {
+  let neverReassigned = 100
+  let alsoNeverChanged = 200
+  return neverReassigned + alsoNeverChanged
+}
+
+// Issue 6: prefer-template (WARNING, auto-fixable)
+// Hover: See help about template literals
+// Code action: Converts to `Hello ${name}!`
+function section2c() {
+  const name = 'World'
+  const greeting = 'Hello ' + name + '!'
+  return greeting
+}
+
+// ============================================
+// SECTION 3: Style Rules
+// ============================================
+
+// Issue 7: quote style (WARNING, auto-fixable)
+// Hover: See help about using single quotes
+function section3a() {
+  const text1 = "should be single quotes"
+  const text2 = "also double"
+  return text1 + text2
+}
+
+// Issue 8: indentation (if misconfigured)
+// This example assumes proper indentation, but test by adding spaces
+
+// ============================================
+// SECTION 4: Complex Scenarios
+// ============================================
+
+// Issue 9: Multiple issues in one function
+function section4a() {
+  debugger  // ERROR: debugger
+  const unused = 'value'  // ERROR: unused var
+  let x = 10  // ERROR: prefer-const
+  console.log(x)  // WARNING: console
+  const msg = "Hello " + "World"  // WARNING: quotes + prefer-template
+  return msg
+}
+
+// Issue 10: Nested issues
+function section4b() {
+  if (true) {
+    debugger
+    const temp = 'unused'
+    let y = 20
+    return y
+  }
+}
+
+/**
+ * ✅ COMPREHENSIVE TEST RESULTS:
+ *
+ * 1. CodeLens at top shows:
+ *    "⚠️ Pickier: ~15 errors, ~8 warnings (~12 auto-fixable)"
+ *    "🔧 Fix all ~12 auto-fixable issues"
+ *
+ * 2. Hovering over each issue shows:
+ *    - Rule ID with severity icon
+ *    - Descriptive message
+ *    - Detailed help text
+ *    - Auto-fix indicator (✨) if fixable
+ *    - Links to docs and disable options
+ *
+ * 3. Code actions (Cmd+.) show:
+ *    - Fix option (for auto-fixable issues)
+ *    - Disable for this line
+ *    - Disable for entire file
+ *    - View documentation
+ *
+ * 4. Problems panel shows:
+ *    - All issues grouped by severity
+ *    - Click each issue to see help text
+ *    - Can trigger fixes from panel
+ *
+ * 5. After clicking "Fix all":
+ *    - All debugger statements removed
+ *    - All let → const conversions
+ *    - All string concatenation → template literals
+ *    - All double quotes → single quotes
+ *    - Remaining: unused variables (manual fix needed)
+ *
+ * 6. Final state:
+ *    - CodeLens: "⚠️ Pickier: ~3 errors, ~1 warning"
+ *    - Only non-auto-fixable issues remain
+ *    - Much cleaner code!
+ */

package/examples/README.md

@@ -0,0 +1,336 @@
+# Pickier VS Code Extension - Example Files
+
+This folder contains comprehensive example files to test all features of the Pickier VS Code extension.
+
+## How to Test
+
+### Step 1: Launch Extension Development Host
+
+1. Open this workspace in VS Code
+2. Go to Run and Debug (Cmd+Shift+D)
+3. Select "Run Extension" from the dropdown
+4. Click the green play button (or press F5)
+5. A new VS Code window will open with "[Extension Development Host]" in the title
+
+### Step 2: Open Example Files
+
+In the Extension Development Host window:
+
+1. Open the examples folder: `/packages/vscode/examples/`
+2. Open any example file (`.ts` files numbered 01-10)
+3. Each file is self-contained and demonstrates specific features
+
+### Step 3: Test Features
+
+Each example file contains detailed instructions at the top. Follow the "HOW TO TEST" section in each file.
+
+## Example Files Overview
+
+### 01-hover-help-text.ts
+**Tests:** Rich hover tooltips with help text
+
+**Features:**
+- Hover over any underlined issue
+- See rule ID with severity icon
+- Read descriptive help text
+- See auto-fix indicator (✨) when available
+- Links to disable options
+
+**What to look for:**
+- Rich markdown-formatted hover tooltips
+- Blue help text explaining how to fix
+- Different icons for errors (🔴) vs warnings (🟡)
+
+---
+
+### 02-codelens-annotations.ts
+**Tests:** CodeLens annotations and stats
+
+**Features:**
+- File-level issue summary at top of file
+- "Fix all" button for auto-fixable issues
+- "Organize Imports" button
+- Real-time updates as you fix issues
+
+**What to look for:**
+- CodeLens appears above first line of code
+- Shows count: "⚠️ Pickier: X errors, Y warnings (Z auto-fixable)"
+- Clickable buttons that trigger actions
+
+---
+
+### 03-code-actions.ts
+**Tests:** All 4 types of code actions
+
+**Features:**
+- Fix action (for auto-fixable issues)
+- Disable for this line
+- Disable for entire file
+- View documentation
+
+**What to look for:**
+- Put cursor on any issue
+- Press Cmd+. (or right-click → Quick Fix)
+- See all available actions for that issue type
+- Actions apply correctly
+
+---
+
+### 04-problems-panel.ts
+**Tests:** Problems panel integration
+
+**Features:**
+- All issues appear in Problems panel
+- Grouped by severity (Errors / Warnings)
+- Click issue to navigate to code
+- See full help text in problem details
+
+**What to look for:**
+- Open Problems panel (Cmd+Shift+M)
+- See all 6+ issues listed
+- Click on issue to jump to location
+- Expand issue to see help text
+
+---
+
+### 05-import-issues.ts
+**Tests:** Import organization features
+
+**Features:**
+- Detect unordered imports
+- Detect duplicate imports
+- "Organize Imports" CodeLens action
+- Auto-fix import sorting
+
+**What to look for:**
+- CodeLens shows "📦 Organize Imports"
+- Issues reported for unordered/duplicate imports
+- Click "Organize Imports" to fix all import issues
+
+---
+
+### 06-all-severities.ts
+**Tests:** Different severity levels
+
+**Features:**
+- Error severity (red squiggly lines)
+- Warning severity (yellow squiggly lines)
+- Different icons in hover tooltips
+- Problems panel groups by severity
+
+**What to look for:**
+- Red underlines for errors (debugger, unused vars, prefer-const)
+- Yellow underlines for warnings (console.log, quotes, prefer-template)
+- CodeLens shows both: "3 errors, 3 warnings"
+
+---
+
+### 07-auto-fixable-vs-manual.ts
+**Tests:** Auto-fix detection and behavior
+
+**Features:**
+- Auto-fixable issues show ✨ icon
+- Manual issues don't show ✨
+- "Fix all" only fixes auto-fixable issues
+- Help text explains manual fix steps
+
+**What to look for:**
+- Hover on auto-fixable: see "✨ Auto-fix available"
+- Hover on manual: no ✨ icon, detailed manual instructions
+- Click "Fix all" in CodeLens: only auto-fixable issues are fixed
+- Manual issues remain with helpful guidance
+
+---
+
+### 08-disable-comments.ts
+**Tests:** Disable comment actions
+
+**Features:**
+- "Disable for this line" adds `// eslint-disable-next-line`
+- "Disable for entire file" adds `/* eslint-disable */` at top
+- Disabled issues disappear from diagnostics
+
+**What to look for:**
+- Use code action to disable a rule
+- See disable comment added to file
+- Issue disappears from Problems panel
+- CodeLens updates to show fewer issues
+
+---
+
+### 09-clean-file.ts
+**Tests:** "No issues" state
+
+**Features:**
+- CodeLens shows "✓ Pickier: No issues found"
+- No squiggly underlines anywhere
+- Empty Problems panel
+- Demonstrates what a "perfect" file looks like
+
+**What to look for:**
+- Green checkmark (✓) in CodeLens
+- "No issues found" message
+- Clean, issue-free code
+- This is the target state!
+
+---
+
+### 10-comprehensive-test.ts
+**Tests:** All features combined
+
+**Features:**
+- Multiple issue types in one file
+- Mix of errors and warnings
+- Mix of auto-fixable and manual issues
+- Nested issues
+- Complex scenarios
+
+**What to look for:**
+- CodeLens: "⚠️ Pickier: ~15 errors, ~8 warnings (~12 auto-fixable)"
+- Test all features: hover, code actions, problems panel
+- Click "Fix all" and watch file transform
+- See remaining manual issues with help text
+
+---
+
+## Testing Workflow
+
+### Recommended Testing Order:
+
+1. **Start with 09-clean-file.ts**
+   - See what "perfect" looks like
+   - Understand the baseline
+
+2. **Test 01-hover-help-text.ts**
+   - Get familiar with hover tooltips
+   - See how help text appears
+
+3. **Test 02-codelens-annotations.ts**
+   - Understand CodeLens display
+   - Try "Fix all" button
+
+4. **Test 03-code-actions.ts**
+   - Learn all 4 action types
+   - Practice using Cmd+.
+
+5. **Test remaining files (04-08)**
+   - Explore specific features
+   - Test edge cases
+
+6. **Finish with 10-comprehensive-test.ts**
+   - Complete integration test
+   - See all features working together
+
+### Common Testing Actions:
+
+- **Trigger hover:** Move mouse over underlined code
+- **Trigger code actions:** Put cursor on issue, press Cmd+. (or Ctrl+. on Windows/Linux)
+- **View problems:** Press Cmd+Shift+M to open Problems panel
+- **Test CodeLens:** Look at top of file, click buttons
+- **Test fixes:** Click "Fix all" or use individual fix actions
+
+## Expected Features
+
+When testing, you should see these features working:
+
+### ✅ Rich Hover Tooltips
+- Shows rule ID with icon
+- Displays descriptive message
+- Includes help text (blue)
+- Shows auto-fix indicator (✨)
+- Links to disable options
+
+### ✅ CodeLens Annotations
+- File-level stats at top
+- Issue count by severity
+- Auto-fixable count
+- Clickable "Fix all" button
+- "Organize Imports" button
+
+### ✅ Enhanced Code Actions
+- Fix (for auto-fixable issues)
+- Disable for this line
+- Disable for entire file
+- View documentation
+
+### ✅ Problems Panel Integration
+- All issues listed
+- Grouped by severity
+- Click to navigate
+- Full help text in details
+
+### ✅ Smart Diagnostics
+- Red underlines for errors
+- Yellow underlines for warnings
+- Related information for help text
+- Real-time updates
+
+## Configuration Examples
+
+This folder also contains configuration examples:
+
+- **basic-config.ts** - Minimal setup for getting started
+- **advanced-config.ts** - Comprehensive setup with advanced features
+- **team-config.ts** - Strict configuration for team environments
+- **vscode-settings.json** - Example VS Code workspace settings
+
+See the individual files for details on each configuration option.
+
+## Troubleshooting
+
+### Extension not loading?
+- Make sure you're in the Extension Development Host window
+- Check the Debug Console for errors
+- Try restarting the extension (Cmd+Shift+P → "Developer: Reload Window")
+
+### No issues showing?
+- Make sure Pickier is enabled in settings
+- Check that the file is saved
+- Verify the file is TypeScript/JavaScript
+
+### CodeLens not appearing?
+- Check setting: `pickier.codeLens.enable` should be `true`
+- Try reloading the window
+- Ensure file has issues or is clean (CodeLens shows in both cases)
+
+### Hover not working?
+- Hover directly over the underlined code
+- Wait a moment for tooltip to appear
+- Check that there are diagnostics for that line
+
+## Configuration
+
+You can customize extension behavior in VS Code settings:
+
+```json
+{
+  "pickier.enable": true,
+  "pickier.run": "onSave",
+  "pickier.codeLens.enable": true,
+  "pickier.packageManager": "auto"
+}
+```
+
+See `package.json` in the extension root for all available settings.
+
+## Feedback
+
+After testing, consider:
+- Which features are most useful?
+- Are there any missing features?
+- Is the help text clear and actionable?
+- Are the code actions discoverable?
+- Is the CodeLens helpful or distracting?
+
+## Next Steps
+
+After testing these examples:
+
+1. Try the extension on your real codebase
+2. Customize Pickier config (`pickier.config.ts`) for your needs
+3. Report any issues or suggestions
+4. Enjoy fast, helpful linting!
+
+---
+
+**Note:** These example files intentionally contain issues to demonstrate extension features. Don't be alarmed by the red and yellow squiggly lines - they're there for testing!