pickier-vscode 0.1.8

package/.vscodeignore

@@ -0,0 +1,14 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+*.vsix
+**/*.ts
+**/*.map
+.eslintrc.json
+tsconfig.json
+node_modules/**
+bun.lockb
+build.ts
+.DS_Store

package/README.md

@@ -0,0 +1,102 @@
+# Pickier VS Code Extension
+
+Fast, modern formatter and linter for TypeScript, JavaScript, JSON, HTML, CSS, Markdown, and YAML.
+
+## Features
+
+- **Lightning Fast**: Built on Bun runtime for incredible performance
+- **Real-time Linting**: See errors and warnings as you type
+- **Auto-fix**: Automatically fix many issues with one command
+- **Multiple Languages**: TypeScript, JavaScript, JSON, HTML, CSS, Markdown, YAML
+- **Markdown Linting**: Comprehensive MD001-MD059 rule coverage
+- **Problems Integration**: All issues appear in VS Code's Problems panel
+- **Smart Underlines**: Visual indicators for errors (red) and warnings (yellow)
+- **Hover Tooltips**: Detailed error/warning information on hover
+- **Status Bar**: See issue count at a glance
+
+## Usage
+
+### Automatic Linting
+
+The extension automatically lints files when you:
+- Open a file
+- Save a file (configurable)
+- Type (with 500ms debounce, configurable)
+
+### Commands
+
+Access commands via Command Palette (Cmd/Ctrl+Shift+P):
+
+- `Pickier: Format Document` - Format the current file
+- `Pickier: Format Selection` - Format selected text
+- `Pickier: Lint Document` - Lint the current file
+- `Pickier: Lint Workspace` - Lint all files in workspace
+- `Pickier: Fix All Auto-fixable Issues` - Apply all available fixes
+- `Pickier: Organize Imports` - Sort and organize imports
+- `Pickier: Show Output Channel` - Show detailed output
+- `Pickier: Restart Extension` - Restart the extension
+
+### Configuration
+
+Configure Pickier in VS Code settings:
+
+```json
+{
+  "pickier.enable": true,
+  "pickier.lintOnSave": true,
+  "pickier.lintOnChange": true,
+  "pickier.formatOnSave": false,
+  "pickier.formatOnPaste": false,
+  "pickier.statusBar.showIssueCount": true
+}
+```
+
+### Visual Indicators
+
+- **Red Squiggles**: Errors that must be fixed
+- **Yellow Squiggles**: Warnings and style suggestions
+- **Faded Text**: Unused variables/imports
+- **Strikethrough**: Deprecated code
+
+## Requirements
+
+- VS Code 1.74.0 or higher
+- Pickier installed in your project (`bun add -d pickier`)
+
+## Configuration File
+
+Create a `pickier.config.ts` in your project root:
+
+```typescript
+import type { PickierConfig } from 'pickier'
+
+export default {
+  lint: {
+    extensions: ['ts', 'js', 'md'],
+    reporter: 'stylish'
+  },
+  format: {
+    indent: 2,
+    quotes: 'single',
+    semi: false
+  }
+} satisfies PickierConfig
+```
+
+## Supported Languages
+
+- TypeScript (.ts, .tsx)
+- JavaScript (.js, .jsx)
+- JSON (.json, .jsonc)
+- HTML (.html)
+- CSS (.css)
+- Markdown (.md)
+- YAML (.yaml, .yml)
+
+## Issues & Feedback
+
+Report issues at: https://github.com/stacksjs/pickier/issues
+
+## License
+
+MIT License - see LICENSE file for details

package/build.ts

@@ -0,0 +1,14 @@
+console.log('Building...')
+
+await Bun.build({
+  entrypoints: ['src/extension.ts'],
+  outdir: './dist',
+  splitting: false,
+  external: ['vscode'],
+  target: 'node',
+  format: 'esm',
+})
+
+console.log('Built successfully!')
+
+export {}

package/docs/USAGE.md

@@ -0,0 +1,213 @@
+# Pickier VS Code Extension Usage Guide
+
+The Pickier VS Code extension provides fast formatting and linting capabilities for TypeScript, JavaScript, JSON, HTML, CSS, Markdown, and YAML files.
+
+## Installation
+
+1. Open VS Code
+2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
+3. Search for "Pickier"
+4. Click Install
+
+## Features
+
+### Formatting
+
+- **Format Document**: Format the entire active document
+- **Format Selection**: Format only the selected text
+- **Format on Save**: Automatically format files when saved (configurable)
+
+### Linting
+
+- **Lint Document**: Check the current document for issues
+- **Lint Workspace**: Check all files in the workspace
+- **Lint on Save**: Automatically lint files when saved (enabled by default)
+
+### Real-time Feedback
+
+- **Status Bar Integration**: Shows Pickier status in the status bar
+- **Diagnostic Integration**: Displays lint issues inline with squiggly underlines
+- **Output Channel**: Detailed logging of operations and errors
+
+## Commands
+
+Access these commands via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
+
+- `Pickier: Format Document` - Format the current document
+- `Pickier: Format Selection` - Format the selected text
+- `Pickier: Lint Document` - Lint the current document
+- `Pickier: Lint Workspace` - Lint all files in the workspace
+
+## Configuration
+
+Configure Pickier through VS Code settings. Go to File > Preferences > Settings and search for "Pickier":
+
+### Available Settings
+
+| Setting | Type | Default | Description |
+|---------|------|---------|-------------|
+| `pickier.enable` | boolean | `true` | Enable/disable the Pickier extension |
+| `pickier.configPath` | string | `""` | Path to Pickier config file (relative to workspace root) |
+| `pickier.formatOnSave` | boolean | `false` | Format files automatically on save |
+| `pickier.lintOnSave` | boolean | `true` | Lint files automatically on save |
+| `pickier.showOutputChannel` | boolean | `false` | Show Pickier output channel for debugging |
+
+### Example Settings (settings.json)
+
+```json
+{
+  "pickier.enable": true,
+  "pickier.formatOnSave": true,
+  "pickier.lintOnSave": true,
+  "pickier.configPath": "pickier.config.ts",
+  "pickier.showOutputChannel": false
+}
+```
+
+## Pickier Configuration File
+
+Create a `pickier.config.ts` file in your workspace root to customize Pickier behavior:
+
+```typescript
+import type { PickierConfig } from 'pickier'
+
+const config: PickierConfig = {
+  verbose: false,
+  ignores: ['**/node_modules/**', '**/dist/**', '**/build/**'],
+  lint: {
+    extensions: ['ts', 'js', 'html', 'css', 'json', 'jsonc', 'md', 'yaml', 'yml'],
+    reporter: 'stylish',
+    cache: false,
+    maxWarnings: -1,
+  },
+  format: {
+    extensions: ['ts', 'js', 'html', 'css', 'json', 'jsonc', 'md', 'yaml', 'yml'],
+    trimTrailingWhitespace: true,
+    maxConsecutiveBlankLines: 1,
+    finalNewline: 'one',
+    indent: 2,
+    indentStyle: 'spaces',
+    quotes: 'single',
+    semi: false,
+  },
+  rules: {
+    noDebugger: 'error',
+    noConsole: 'warn',
+    noUnusedCapturingGroup: 'error',
+    noCondAssign: 'error',
+    noTemplateCurlyInString: 'warn',
+  },
+}
+
+export default config
+```
+
+## Supported File Types
+
+Pickier supports the following file extensions:
+
+- **TypeScript**: `.ts`, `.tsx`
+- **JavaScript**: `.js`, `.jsx`
+- **JSON**: `.json`
+- **JSON with Comments**: `.jsonc`
+- **HTML**: `.html`
+- **CSS**: `.css`
+- **Markdown**: `.md`
+- **YAML**: `.yaml`, `.yml`
+
+## Integration with Other Extensions
+
+### Disable Conflicting Formatters
+
+To avoid conflicts with other formatting extensions, you may want to disable them for file types that Pickier handles:
+
+```json
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "pickier.vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "pickier.vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "pickier.vscode"
+  }
+}
+```
+
+### Working with ESLint/Prettier
+
+Pickier can work alongside ESLint and Prettier, but you may want to configure them to avoid overlapping rules:
+
+1. Disable formatting rules in ESLint
+2. Use Pickier for formatting and ESLint for logical linting
+3. Configure Prettier to exclude files that Pickier handles
+
+## Keyboard Shortcuts
+
+You can assign custom keyboard shortcuts to Pickier commands:
+
+1. Go to File > Preferences > Keyboard Shortcuts
+2. Search for "Pickier"
+3. Assign shortcuts to the commands you use most
+
+Example keybindings.json:
+
+```json
+[
+  {
+    "key": "ctrl+shift+f",
+    "command": "pickier.format",
+    "when": "editorTextFocus"
+  },
+  {
+    "key": "ctrl+shift+l",
+    "command": "pickier.lint",
+    "when": "editorTextFocus"
+  }
+]
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Extension not activating**: Ensure you're working with supported file types
+2. **Formatting not working**: Check that Pickier is enabled in settings
+3. **Linting issues not showing**: Verify `pickier.lintOnSave` is enabled
+4. **Performance issues**: Try enabling `pickier.showOutputChannel` to debug
+
+### Debug Mode
+
+Enable the output channel to see detailed logs:
+
+1. Set `pickier.showOutputChannel` to `true`
+2. Open View > Output
+3. Select "Pickier" from the dropdown
+4. Perform actions to see debug information
+
+### Configuration Issues
+
+If your configuration file isn't being loaded:
+
+1. Ensure it's in the workspace root
+2. Check the file name matches `pickier.configPath` setting
+3. Verify the configuration syntax is correct
+4. Check the output channel for error messages
+
+## Performance
+
+Pickier is designed to be fast:
+
+- **Native Speed**: Built with Bun for maximum performance
+- **Minimal Dependencies**: Lightweight architecture
+- **Incremental Processing**: Only processes changed files
+- **Efficient Caching**: Reuses results when possible
+
+## Contributing
+
+Found a bug or have a feature request? Please check our [GitHub repository](https://github.com/stacksjs/pickier) and open an issue or pull request.
+
+## License
+
+MIT License - see the [LICENSE](../LICENSE.md) file for details.

package/examples/01-hover-help-text.ts

@@ -0,0 +1,58 @@
+/**
+ * Example 1: Rich Hover with Help Text
+ *
+ * HOW TO TEST:
+ * 1. Hover over any squiggly underline
+ * 2. See the rich tooltip with:
+ *    - Rule ID with severity icon
+ *    - Error message
+ *    - Help text with fix suggestions
+ *    - "Auto-fix available" indicator
+ *    - Links to docs and disable options
+ */
+
+// Hover over 'debugger' - see help text about removing it
+function example1() {
+  debugger
+  return 'test'
+}
+
+// Hover over 'unused' - see help about prefixing with underscore
+function example2() {
+  const unused = 'This variable is never used'
+  return 42
+}
+
+// Hover over the string - see help about template literals
+function example3() {
+  const name = 'World'
+  const message = 'Hello ' + name
+  return message
+}
+
+// Hover over 'let' - see help about using const instead
+function example4() {
+  let neverReassigned = 100
+  return neverReassigned * 2
+}
+
+// Hover over console - see help about removing console statements
+function example5() {
+  console.log("This shouldn't be in production")
+  return true
+}
+
+// Hover over the string with ${} - see help about using backticks
+function example6() {
+  const value = 42
+  const msg = "The value is ${value}"
+  return msg
+}
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - Each hover shows detailed help text
+ * - Help text explains how to fix the issue
+ * - Auto-fixable issues show ✨ icon
+ * - Links to documentation are present
+ */

package/examples/02-codelens-annotations.ts

@@ -0,0 +1,50 @@
+/**
+ * Example 2: CodeLens Annotations
+ *
+ * HOW TO TEST:
+ * 1. Look at the TOP of this file (line 1)
+ * 2. You should see CodeLens showing:
+ *    - "⚠️ Pickier: X errors, Y warnings (Z auto-fixable)"
+ *    - "🔧 Fix all Z auto-fixable issues" button
+ * 3. Click the "Fix all" button
+ * 4. Watch all auto-fixable issues get fixed
+ * 5. CodeLens should change to "✓ Pickier: No issues found"
+ */
+
+// This file has MULTIPLE issues to trigger CodeLens
+
+// Issue 1: debugger (auto-fixable)
+function test1() {
+  debugger
+}
+
+// Issue 2: unused variable (not auto-fixable, but shows in count)
+function test2() {
+  const unused = 'not used'
+  return 42
+}
+
+// Issue 3: prefer-const (auto-fixable)
+function test3() {
+  let x = 10
+  return x
+}
+
+// Issue 4: console.log (shows warning in CodeLens)
+function test4() {
+  console.log('debug message')
+}
+
+// Issue 5: string concatenation (auto-fixable with prefer-template)
+function test5() {
+  const msg = 'Hello' + ' ' + 'World'
+  return msg
+}
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - CodeLens at top shows: "⚠️ Pickier: 2 errors, 2 warnings (3 auto-fixable)"
+ * - Clicking "Fix all" fixes debugger, prefer-const, and prefer-template
+ * - After fix, CodeLens shows remaining issues (unused var + console)
+ * - Final state: "⚠️ Pickier: 2 warnings"
+ */

package/examples/03-code-actions.ts

@@ -0,0 +1,70 @@
+/**
+ * Example 3: Enhanced Code Actions
+ *
+ * HOW TO TEST:
+ * 1. Put your cursor on any squiggly underline
+ * 2. Press Cmd+. (or Ctrl+. on Windows/Linux)
+ * 3. See 4 different code action options:
+ *    - Fix: [issue description]
+ *    - Disable [rule] for this line
+ *    - Disable [rule] for entire file
+ *    - 📖 View documentation for [rule]
+ * 4. Try each action type
+ */
+
+// Test 1: Try code actions on 'debugger'
+// Expected actions:
+// - Fix: Remove debugger statement
+// - Disable no-debugger for this line
+// - Disable no-debugger for entire file
+// - View documentation
+function test1() {
+  debugger
+}
+
+// Test 2: Try code actions on 'let'
+// Expected actions:
+// - Fix: Use 'const' instead
+// - Disable prefer-const for this line
+// - Disable prefer-const for entire file
+// - View documentation
+function test2() {
+  let neverChanged = 42
+  return neverChanged
+}
+
+// Test 3: Try code actions on unused variable
+// Expected actions:
+// - (No auto-fix available for this one)
+// - Disable pickier/no-unused-vars for this line
+// - Disable pickier/no-unused-vars for entire file
+// - View documentation
+function test3() {
+  const unused = 'value'
+  return 100
+}
+
+// Test 4: Try "Disable for this line" action
+// After selecting, it should add:
+// // eslint-disable-next-line no-console
+// console.log('test')
+function test4() {
+  console.log('This will trigger console warning')
+}
+
+// Test 5: String concatenation - try the fix action
+// Should convert to template literal
+function test5() {
+  const name = 'Alice'
+  const greeting = 'Hello, ' + name + '!'
+  return greeting
+}
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - Each diagnostic shows 3-4 code actions
+ * - "Disable for this line" adds comment above the line
+ * - "Disable for entire file" adds comment at top
+ * - "View documentation" opens browser with rule docs
+ * - "Fix" applies the auto-fix
+ */

package/examples/04-problems-panel.ts

@@ -0,0 +1,67 @@
+/**
+ * Example 4: Problems Panel with Help Text
+ *
+ * HOW TO TEST:
+ * 1. Open the Problems panel (View → Problems or Cmd+Shift+M)
+ * 2. Look for Pickier issues in this file
+ * 3. Click on any issue
+ * 4. See the help text in the details section below
+ * 5. Help text shows actionable advice on how to fix
+ */
+
+// Problem 1: debugger statement
+// In Problems panel, click this issue
+// Help text: "Remove debugger statements before committing code..."
+function problem1() {
+  debugger
+  return 1
+}
+
+// Problem 2: unused variable
+// Help text: "Either use this variable in your code, remove it, or prefix it with an underscore (_unused)..."
+function problem2() {
+  const unused = 'not used'
+  const alsoUnused = 42
+  return 0
+}
+
+// Problem 3: prefer-const
+// Help text: "Change 'let neverChanged' to 'const neverChanged' since the variable is never reassigned..."
+function problem3() {
+  let neverChanged = 100
+  return neverChanged
+}
+
+// Problem 4: console.log
+// Help text: "Remove console statements before committing. Use a proper logging library..."
+function problem4() {
+  console.log('debug')
+  console.warn('warning')
+  console.error('error')
+}
+
+// Problem 5: template literal
+// Help text: "Use template literals (backticks) instead of string concatenation..."
+function problem5() {
+  const x = 10
+  const y = 20
+  const msg = 'x is ' + x + ' and y is ' + y
+  return msg
+}
+
+// Problem 6: template curly in string
+// Help text: "Change the string quotes from ' or \" to backticks (`) to use template literal interpolation..."
+function problem6() {
+  const name = 'Bob'
+  const message = 'Hello ${name}'
+  return message
+}
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - Problems panel shows all issues
+ * - Clicking each issue shows help text below
+ * - Help text is detailed and actionable
+ * - Can click "Show Fixes" from Problems panel
+ * - Issues are grouped by severity (errors vs warnings)
+ */

package/examples/05-import-issues.ts

@@ -0,0 +1,35 @@
+/**
+ * Example 5: Import-related Issues
+ *
+ * HOW TO TEST:
+ * 1. See CodeLens showing import issues
+ * 2. CodeLens should show "📦 Organize Imports" button
+ * 3. Click it to organize imports
+ * 4. Hover over import issues to see help text
+ */
+
+// Unordered imports (should be alphabetically sorted)
+import { zebra } from './zoo'
+import { apple } from './fruits'
+import { car } from './vehicles'
+
+// Duplicate imports (import-dedupe rule)
+import { thing } from './module'
+import { otherThing } from './module'  // Should be merged with above
+
+// These imports trigger the "Organize Imports" CodeLens button
+
+export function useImports() {
+  return { zebra, apple, car, thing, otherThing }
+}
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - CodeLens shows "📦 Organize Imports" button
+ * - Clicking it sorts and dedupes imports
+ * - After organizing:
+ *   import { apple } from './fruits'
+ *   import { thing, otherThing } from './module'
+ *   import { car } from './vehicles'
+ *   import { zebra } from './zoo'
+ */

package/examples/06-all-severities.ts

@@ -0,0 +1,60 @@
+/**
+ * Example 6: Different Severity Levels
+ *
+ * HOW TO TEST:
+ * 1. See how errors (red) and warnings (yellow) are displayed
+ * 2. CodeLens shows both: "X errors, Y warnings"
+ * 3. Problems panel groups by severity
+ * 4. Hover shows different icons for each severity
+ */
+
+// ============================================
+// ERRORS (Red squiggly underlines)
+// ============================================
+
+// Error 1: debugger statement
+function errorExample1() {
+  debugger  // ❌ ERROR
+}
+
+// Error 2: unused variable (configured as error)
+function errorExample2() {
+  const unused = 'value'  // ❌ ERROR
+  return 42
+}
+
+// Error 3: prefer-const (configured as error)
+function errorExample3() {
+  let neverChanges = 100  // ❌ ERROR
+  return neverChanges
+}
+
+// ============================================
+// WARNINGS (Yellow squiggly underlines)
+// ============================================
+
+// Warning 1: console.log
+function warningExample1() {
+  console.log('debug message')  // ⚠️ WARNING
+}
+
+// Warning 2: quote style
+function warningExample2() {
+  const msg = "should use single quotes"  // ⚠️ WARNING
+  return msg
+}
+
+// Warning 3: prefer-template
+function warningExample3() {
+  const greeting = 'Hello' + ' ' + 'World'  // ⚠️ WARNING
+  return greeting
+}
+
+/**
+ * ✅ EXPECTED RESULTS:
+ * - CodeLens shows: "⚠️ Pickier: 3 errors, 3 warnings (X auto-fixable)"
+ * - Errors have red underlines
+ * - Warnings have yellow underlines
+ * - Hover shows different icons: $(error) vs $(warning)
+ * - Problems panel separates errors from warnings
+ */