|
1 | 1 | # Pickier VS Code Extension |
2 | 2 |
|
3 | | -> Format, lint and more in a fraction of seconds. |
| 3 | +Fast, modern formatter and linter for TypeScript, JavaScript, JSON, HTML, CSS, Markdown, and YAML. |
4 | 4 |
|
5 | | -[](https://marketplace.visualstudio.com/items?itemName=pickier.vscode) |
6 | | -[](https://marketplace.visualstudio.com/items?itemName=pickier.vscode) |
7 | | -[](https://marketplace.visualstudio.com/items?itemName=pickier.vscode) |
| 5 | +## Features |
8 | 6 |
|
9 | | -The official VS Code extension for [Pickier](https://github.com/stacksjs/pickier) - a lightning-fast formatter and linter built with Bun. |
| 7 | +- **Lightning Fast**: Built on Bun runtime for incredible performance |
| 8 | +- **Real-time Linting**: See errors and warnings as you type |
| 9 | +- **Auto-fix**: Automatically fix many issues with one command |
| 10 | +- **Multiple Languages**: TypeScript, JavaScript, JSON, HTML, CSS, Markdown, YAML |
| 11 | +- **Markdown Linting**: Comprehensive MD001-MD059 rule coverage |
| 12 | +- **Problems Integration**: All issues appear in VS Code's Problems panel |
| 13 | +- **Smart Underlines**: Visual indicators for errors (red) and warnings (yellow) |
| 14 | +- **Hover Tooltips**: Detailed error/warning information on hover |
| 15 | +- **Status Bar**: See issue count at a glance |
10 | 16 |
|
11 | | -## ✨ Features |
| 17 | +## Usage |
12 | 18 |
|
13 | | -- **🚀 Lightning Fast**: Built with Bun for maximum performance |
14 | | -- **🎯 Multi-Language**: Supports TypeScript, JavaScript, JSON, HTML, CSS, Markdown, and YAML |
15 | | -- **🔧 Smart Formatting**: Intelligent code formatting with configurable rules |
16 | | -- **🔍 Advanced Linting**: Comprehensive linting with sorting and organization rules |
17 | | -- **⚡ Real-time**: Instant feedback with live diagnostics |
18 | | -- **🎨 Customizable**: Extensive configuration options for teams and individuals |
| 19 | +### Automatic Linting |
19 | 20 |
|
20 | | -## 🚀 Quick Start |
| 21 | +The extension automatically lints files when you: |
| 22 | +- Open a file |
| 23 | +- Save a file (configurable) |
| 24 | +- Type (with 500ms debounce, configurable) |
21 | 25 |
|
22 | | -1. **Install the extension** from the VS Code Marketplace |
23 | | -2. **Open a supported file** (`.ts`, `.js`, `.json`, etc.) |
24 | | -3. **Format on save** or use the command palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) |
25 | | -4. **Customize settings** in VS Code preferences |
| 26 | +### Commands |
26 | 27 |
|
27 | | -## 📋 Supported File Types |
| 28 | +Access commands via Command Palette (Cmd/Ctrl+Shift+P): |
28 | 29 |
|
29 | | -| Language | Extensions | Formatting | Linting | |
30 | | -|-------------|---------------------|------------|---------| |
31 | | -| TypeScript | `.ts`, `.tsx` | ✅ | ✅ | |
32 | | -| JavaScript | `.js`, `.jsx` | ✅ | ✅ | |
33 | | -| JSON | `.json`, `.jsonc` | ✅ | ✅ | |
34 | | -| HTML | `.html` | ✅ | ✅ | |
35 | | -| CSS | `.css` | ✅ | ✅ | |
36 | | -| Markdown | `.md` | ✅ | ✅ | |
37 | | -| YAML | `.yaml`, `.yml` | ✅ | ✅ | |
38 | | - |
39 | | -## 🛠️ Commands |
40 | | - |
41 | | -Access these via the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`): |
42 | | - |
43 | | -- `Pickier: Format Document` - Format the entire document |
44 | | -- `Pickier: Format Selection` - Format only selected text |
45 | | -- `Pickier: Lint Document` - Lint the current document |
| 30 | +- `Pickier: Format Document` - Format the current file |
| 31 | +- `Pickier: Format Selection` - Format selected text |
| 32 | +- `Pickier: Lint Document` - Lint the current file |
46 | 33 | - `Pickier: Lint Workspace` - Lint all files in workspace |
| 34 | +- `Pickier: Fix All Auto-fixable Issues` - Apply all available fixes |
| 35 | +- `Pickier: Organize Imports` - Sort and organize imports |
| 36 | +- `Pickier: Show Output Channel` - Show detailed output |
| 37 | +- `Pickier: Restart Extension` - Restart the extension |
47 | 38 |
|
48 | | -## ⚙️ Configuration |
49 | | - |
50 | | -### Extension Settings |
| 39 | +### Configuration |
51 | 40 |
|
52 | | -| Setting | Default | Description | |
53 | | -|---------|---------|-------------| |
54 | | -| `pickier.enable` | `true` | Enable/disable Pickier | |
55 | | -| `pickier.formatOnSave` | `false` | Format files on save | |
56 | | -| `pickier.lintOnSave` | `true` | Lint files on save | |
57 | | -| `pickier.configPath` | `""` | Path to config file | |
58 | | -| `pickier.showOutputChannel` | `false` | Show debug output | |
59 | | - |
60 | | -### Example VS Code Settings |
| 41 | +Configure Pickier in VS Code settings: |
61 | 42 |
|
62 | 43 | ```json |
63 | 44 | { |
64 | 45 | "pickier.enable": true, |
65 | | - "pickier.formatOnSave": true, |
66 | 46 | "pickier.lintOnSave": true, |
67 | | - "pickier.configPath": "pickier.config.ts", |
68 | | - |
69 | | - "[typescript]": { |
70 | | - "editor.defaultFormatter": "pickier.vscode" |
71 | | - }, |
72 | | - "[javascript]": { |
73 | | - "editor.defaultFormatter": "pickier.vscode" |
74 | | - } |
| 47 | + "pickier.lintOnChange": true, |
| 48 | + "pickier.formatOnSave": false, |
| 49 | + "pickier.formatOnPaste": false, |
| 50 | + "pickier.statusBar.showIssueCount": true |
75 | 51 | } |
76 | 52 | ``` |
77 | 53 |
|
78 | | -### Pickier Configuration |
| 54 | +### Visual Indicators |
| 55 | + |
| 56 | +- **Red Squiggles**: Errors that must be fixed |
| 57 | +- **Yellow Squiggles**: Warnings and style suggestions |
| 58 | +- **Faded Text**: Unused variables/imports |
| 59 | +- **Strikethrough**: Deprecated code |
| 60 | + |
| 61 | +## Requirements |
79 | 62 |
|
80 | | -Create a `pickier.config.ts` in your workspace root: |
| 63 | +- VS Code 1.74.0 or higher |
| 64 | +- Pickier installed in your project (`bun add -d pickier`) |
| 65 | + |
| 66 | +## Configuration File |
| 67 | + |
| 68 | +Create a `pickier.config.ts` in your project root: |
81 | 69 |
|
82 | 70 | ```typescript |
83 | 71 | import type { PickierConfig } from 'pickier' |
84 | 72 |
|
85 | | -const config: PickierConfig = { |
| 73 | +export default { |
| 74 | + lint: { |
| 75 | + extensions: ['ts', 'js', 'md'], |
| 76 | + reporter: 'stylish' |
| 77 | + }, |
86 | 78 | format: { |
87 | 79 | indent: 2, |
88 | 80 | quotes: 'single', |
89 | | - semi: false, |
90 | | - trimTrailingWhitespace: true, |
91 | | - }, |
92 | | - rules: { |
93 | | - noDebugger: 'error', |
94 | | - noConsole: 'warn', |
95 | | - }, |
96 | | - pluginRules: { |
97 | | - 'sort-imports': 'warn', |
98 | | - 'sort-objects': 'warn', |
99 | | - } |
100 | | -} |
101 | | - |
102 | | -export default config |
103 | | -``` |
104 | | - |
105 | | -## 🔧 Integration |
106 | | - |
107 | | -### Disable Conflicting Extensions |
108 | | - |
109 | | -To avoid conflicts, disable other formatters for Pickier-supported files: |
110 | | - |
111 | | -```json |
112 | | -{ |
113 | | - "prettier.enable": false, |
114 | | - "eslint.format.enable": false, |
115 | | - "typescript.format.enable": false |
116 | | -} |
117 | | -``` |
118 | | - |
119 | | -### Working with ESLint |
120 | | - |
121 | | -Pickier works great alongside ESLint. Use ESLint for logical rules and Pickier for formatting: |
122 | | - |
123 | | -```json |
124 | | -{ |
125 | | - "eslint.validate": ["typescript", "javascript"], |
126 | | - "editor.codeActionsOnSave": { |
127 | | - "source.fixAll.eslint": true |
| 81 | + semi: false |
128 | 82 | } |
129 | | -} |
| 83 | +} satisfies PickierConfig |
130 | 84 | ``` |
131 | 85 |
|
132 | | -## 📊 Performance |
133 | | - |
134 | | -Pickier is designed for speed: |
135 | | - |
136 | | -- **Native Performance**: Built with Bun runtime |
137 | | -- **Incremental Processing**: Only processes changed content |
138 | | -- **Efficient Caching**: Smart caching for faster subsequent runs |
139 | | -- **Minimal Overhead**: Lightweight VS Code integration |
140 | | - |
141 | | -## 🐛 Troubleshooting |
142 | | - |
143 | | -### Common Issues |
144 | | - |
145 | | -**Extension not working?** |
146 | | - |
147 | | -- Check that you're using supported file types |
148 | | -- Verify extension is enabled in settings |
149 | | -- Look for errors in the Output panel (View → Output → Pickier) |
150 | | - |
151 | | -**Formatting conflicts?** |
152 | | - |
153 | | -- Disable other formatters for the same file types |
154 | | -- Check that Pickier is set as the default formatter |
155 | | - |
156 | | -**Performance issues?** |
157 | | - |
158 | | -- Enable caching in your Pickier config |
159 | | -- Check ignore patterns to exclude unnecessary files |
160 | | - |
161 | | -### Debug Mode |
162 | | - |
163 | | -Enable detailed logging: |
164 | | - |
165 | | -1. Set `pickier.showOutputChannel` to `true` |
166 | | -2. Open View → Output → Pickier |
167 | | -3. Perform actions to see debug information |
168 | | - |
169 | | -## 📝 Examples |
170 | | - |
171 | | -Check the [`examples/`](./examples/) folder for: |
172 | | - |
173 | | -- Basic configuration setups |
174 | | -- Advanced team configurations |
175 | | -- VS Code settings examples |
176 | | -- Integration patterns |
177 | | - |
178 | | -## 🤝 Contributing |
179 | | - |
180 | | -Found a bug or want to contribute? Check out our [GitHub repository](https://github.com/stacksjs/pickier). |
181 | | - |
182 | | -### Development |
| 86 | +## Supported Languages |
183 | 87 |
|
184 | | -1. Clone the repository |
185 | | -2. Run `bun install` |
186 | | -3. Open in VS Code |
187 | | -4. Press F5 to launch Extension Development Host |
| 88 | +- TypeScript (.ts, .tsx) |
| 89 | +- JavaScript (.js, .jsx) |
| 90 | +- JSON (.json, .jsonc) |
| 91 | +- HTML (.html) |
| 92 | +- CSS (.css) |
| 93 | +- Markdown (.md) |
| 94 | +- YAML (.yaml, .yml) |
188 | 95 |
|
189 | | -## 📄 License |
| 96 | +## Issues & Feedback |
190 | 97 |
|
191 | | -MIT License - see [LICENSE](../../LICENSE.md) for details. |
| 98 | +Report issues at: https://github.com/stacksjs/pickier/issues |
192 | 99 |
|
193 | | -## 🔗 Links |
| 100 | +## License |
194 | 101 |
|
195 | | -- [Pickier Documentation](https://github.com/stacksjs/pickier#readme) |
196 | | -- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=pickier.vscode) |
197 | | -- [GitHub Repository](https://github.com/stacksjs/pickier) |
198 | | -- [Issue Tracker](https://github.com/stacksjs/pickier/issues) |
| 102 | +MIT License - see LICENSE file for details |
0 commit comments