Easily test your .eslintignore glob patterns against file lists. Validate ESLint ignore configurations instantly with this free, client-side browser tool.
AI Generation Prompt
Technical Specification: ESLint .eslintignore Glob Pattern Tester
Overview
A high-performance, single-file browser utility that helps developers validate their .eslintignore glob patterns against a list of project file paths. This tool eliminates the trial-and-error process of updating ESLint configuration files by providing real-time visual feedback.
Core Features
- Live Matching Engine: Uses the
minimatchlibrary via CDN to provide exact parity with ESLint's own glob interpretation. - Dual-Pane Interface: Side-by-side view (top-bottom on mobile) for defining Patterns and File Lists.
- Visual Status Indicators: Color-coded results (Green for kept, Struck-through Red for ignored).
- Syntax Cheat Sheet: Integrated reference guide for common globbing rules (e.g.,
*,**,!). - Sample Data Loader: Buttons to populate common project structures for quick testing.
UI/UX Design
- Aesthetic: Modern, clean, professional SaaS-style interface. Use white backgrounds, soft drop shadows (card-based), and a palette of Slate and Emerald colors.
- Light Mode Only: No dark mode toggle; consistent professional light UI.
- Typography: Sans-serif, system-safe fonts (Inter or system-ui).
- Responsiveness:
- Desktop: Sidebar/Two-column grid for inputs, multi-column grid for results.
- Mobile: Vertical stack with collapsible input sections.
Technical Implementation
- Architecture: Single HTML file containing HTML5, CSS3, and Vanilla JavaScript.
- Library:
minimatchvia CDN (https://cdnjs.cloudflare.com/ajax/libs/minimatch/9.0.3/minimatch.min.js). - Constraints Compliance:
- No Storage: Use only in-memory state; no usage of
localStorageorsessionStorage. - Security: The app will be executed within a sandboxed iframe. No external API calls.
- Interaction: Custom JS modal components for warnings instead of browser-native
alert()orconfirm().
- No Storage: Use only in-memory state; no usage of
Layout Architecture
- Header: Clean title with a brief "How to use" tooltip.
- Input Section:
- Pattern Input: Large textarea for user-defined glob rules.
- File List Input: Large textarea for list of files to test against.
- Dashboard Controls: Action buttons for "Test Patterns", "Clear", and "Load Sample".
- Results Area:
- A tabbed view or toggle switch to view 'Included Files' vs 'Excluded Files'.
- Counter badges showing the count for each category.
Design System (Light Mode)
- Primary Blue (Action Buttons):
#2563eb - Success Green (Included):
#16a34a - Error/Ignore Red (Ignored):
#dc2626 - Background:
#f8fafc(Slate 50) - Surface/Card:
#ffffff(White) - Border:
#e2e8f0(Slate 200)
Development Directives
- Vanilla JS Only: Implement the logic by iterating through the file list array, creating a
minimatchinstance for each glob pattern, and filtering results in a single render pass. - CSS Transitions: Ensure smooth opacity changes when filtering results; use standard ease-in-out timing functions.
- Performance: Optimization is key; use
requestAnimationFramefor list rendering if the file list exceeds 500 items to keep the UI snappy.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is an .eslintignore file and why do I need a tester?
The .eslintignore file is a configuration file used by ESLint to define which files or directories the linter should skip during code analysis. Because glob pattern syntax—the method used to define these paths—can be complex, it is easy to accidentally include files you meant to exclude or vice versa. A tester allows you to visualize how your patterns interact with your project's file structure before you commit them. By simulating the matching process, you can prevent linting errors on non-source files like build outputs, temporary directories, or generated documentation, ensuring your linting process remains efficient and focused.
How does this ESLint glob pattern tool handle path matching?
This application utilizes the same underlying matching logic used by ESLint, ensuring that the results you see in your browser are consistent with what ESLint will produce in your local development environment. You can paste your existing .eslintignore rules alongside a list of your project files to see an immediate breakdown of which files are ignored versus which remain included. The tool categorizes your file list into two clear groups: 'Ignored' (files excluded from linting) and 'Matched' (files that will still be processed by ESLint). This real-time validation helps identify edge cases where complex glob syntax, such as recursive wildcards or negative patterns, might not behave as expected.
Is this tool secure and does it save my data?
Yes, this tool is designed with a strict focus on privacy and security. It operates entirely as a client-side application, meaning your file paths and glob patterns never leave your local browser. There is no server-side processing, no database, and no tracking cookies attached to the utility. Because the application is built as a single-file, sandboxed tool, it does not use local storage or server requests to function. You can safely paste sensitive project file structures without risk of exposure or data harvesting, making it a professional choice for developers working on proprietary codebases.
Can I use this tool to debug complex .eslintignore patterns?
Absolutely. Debugging complex ignore patterns is the primary use case for this utility. If you are struggling with a rule that seems to be ignoring the wrong files, you can use the live-testing feature to add and remove patterns one by one, watching the result list update instantly to reflect the changes. This immediate feedback loop is significantly faster than repeatedly running ESLint commands in your terminal to verify changes. You can experiment with common syntax like standard wildcards, directory-specific ignores, and exclusion patterns (using the exclamation mark) to perfect your configuration before saving it back to your project.
