NeuroLint VS Code Extension
The Problem: Modern React/Next.js development is plagued with repetitive code issues - missing accessibility attributes, hydration errors, outdated patterns, and inconsistent configurations. Manual fixes are time-consuming and error-prone.
The Solution: NeuroLint VS Code Extension automatically detects and fixes 50+ common issues across 7 intelligent layers, transforming your codebase from legacy patterns to modern best practices directly in your editor.
Quick Demo
Before (Legacy React component):
// Button.tsx - Common issues
function Button({ children, onClick }) {
return (
<button onClick={onClick}>
{children}
</button>
);
}
After (Modern, accessible component):
// Button.tsx - Fixed automatically
'use client';
import React from 'react';
interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
variant?: 'primary' | 'secondary';
disabled?: boolean;
}
function Button({
children,
onClick,
variant = 'primary',
disabled = false
}: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
aria-label={typeof children === 'string' ? children : undefined}
>
{children}
</button>
);
}
export default Button;
What NeuroLint Fixes
Layer 1: Configuration Modernization
Problem: Outdated TypeScript and Next.js configs causing build issues
// Before
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "es6"]
}
}
// After
{
"compilerOptions": {
"target": "es2022",
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"moduleResolution": "bundler"
}
}
Layer 2: Pattern Standardization
Problem: Inconsistent patterns and deprecated syntax
// Before
const Component = () => {
console.log('debug info');
return <div>"Hello"</div>;
}
// After
const Component = () => {
return <div>"Hello"</div>;
}
Layer 3: Accessibility & Components
Problem: Missing accessibility attributes and component best practices
// Before
<img src="https://github.com/Alcatecablee/nurolint/raw/HEAD/logo.png" />
<button onClick={handleClick}>Submit</button>
// After
<img src="https://github.com/Alcatecablee/nurolint/raw/HEAD/logo.png" alt="Company logo" />
<button
onClick={handleClick}
aria-label="Submit form"
type="submit"
>
Submit
</button>
Layer 4: SSR/Hydration Safety
Problem: Client-side APIs causing hydration errors
// Before
const Component = () => {
const [theme, setTheme] = useState(localStorage.getItem('theme'));
return <div>{window.innerWidth}px</div>;
}
// After
const Component = () => {
const [theme, setTheme] = useState<string | null>(null);
useEffect(() => {
setTheme(localStorage.getItem('theme'));
}, []);
const [width, setWidth] = useState<number>(0);
useEffect(() => {
setWidth(window.innerWidth);
}, []);
return <div>{width}px</div>;
}
Layer 5: Next.js App Router Optimization
Problem: Missing directives and inefficient imports
// Before
import React from 'react';
import { useState } from 'react';
function ClientComponent() {
return <div>Client content</div>;
}
// After
'use client';
import { useState } from 'react';
function ClientComponent() {
return <div>Client content</div>;
}
Layer 6: Testing & Error Handling
Problem: Missing error boundaries and test infrastructure
// Before
function App() {
return <MainComponent />;
}
// After
import { ErrorBoundary } from './utils/errorBoundary';
function App() {
return (
<ErrorBoundary fallback={<div>Something went wrong</div>}>
<MainComponent />
</ErrorBoundary>
);
}
Layer 7: Adaptive Pattern Learning
Problem: Custom patterns that need intelligent detection and learning
// Before (Custom pattern detected by Layer 7)
const useCustomHook = () => {
const [state, setState] = useState();
// Missing cleanup
return [state, setState];
}
// After (Automatically learned and fixed)
const useCustomHook = () => {
const [state, setState] = useState();
useEffect(() => {
return () => {
// Cleanup logic
};
}, []);
return [state, setState];
}
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X
)
- Search for "NeuroLint"
- Click "Install"
Manual Installation
- Download the
.vsix
file from releases
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X
)
- Click the "..." menu and select "Install from VSIX..."
- Select the downloaded
.vsix
file
Usage Examples
Basic Code Analysis
# Analyze current file (Ctrl+Shift+L)
# Analyze entire workspace (Ctrl+Shift+W)
# Apply fixes to current file (Ctrl+Shift+F)
Real-time Analysis
- Live Diagnostics: Get instant feedback as you type
- Inline Hints: See suggestions directly in your code
- Quick Fixes: Apply fixes with keyboard shortcuts
- Progress Reporting: Real-time progress for large files
Integration Examples
# Pre-commit analysis
# CI/CD integration via API
# Team collaboration features
# Automated reporting
Real-World Use Cases
1. Legacy React Migration
Scenario: Upgrading from React 16 to React 18 with Next.js 13
# Fix all compatibility issues
# Use Layers 1, 2, 4, 5 for complete migration
Result: 200+ files updated, 0 breaking changes, 100% compatibility
2. Accessibility Compliance
Scenario: Meeting WCAG 2.1 AA standards
# Add missing accessibility attributes
# Use Layer 3 for comprehensive accessibility fixes
Result: 150+ accessibility issues fixed automatically
Scenario: Reducing bundle size and improving Core Web Vitals
# Optimize imports and configurations
# Use Layers 1, 5 for performance improvements
Result: 30% bundle size reduction, improved LCP scores
4. Team Code Standardization
Scenario: Enforcing consistent patterns across 10+ developers
# Apply learned patterns from previous projects
# Use Layer 7 for adaptive learning
Result: Consistent codebase, reduced code review time by 60%
Commands Reference
Core Commands
NeuroLint: Analyze Current File
(Ctrl+Shift+L
) - Scan for issues and recommend fixes
NeuroLint: Analyze Workspace
(Ctrl+Shift+W
) - Analyze entire workspace
NeuroLint: Fix Current File
(Ctrl+Shift+F
) - Apply automatic fixes
NeuroLint: Configure
- Open configuration settings
Advanced Commands
NeuroLint: Show Output
- Open output panel with detailed logs
NeuroLint: Login
- Authenticate with API for premium features
NeuroLint: Export Report
- Generate detailed analysis reports
NeuroLint: Clear Cache
- Clear analysis cache
Layer-Specific Analysis
- Layer 1: Configuration modernization
- Layer 2: Pattern standardization
- Layer 3: Accessibility & components
- Layer 4: SSR/Hydration safety
- Layer 5: Next.js App Router optimization
- Layer 6: Testing & error handling
- Layer 7: Adaptive pattern learning
Configuration
Basic Settings
{
"neurolint.apiUrl": "https://app.neurolint.dev/api",
"neurolint.apiKey": "your-api-key-here",
"neurolint.enabledLayers": [1, 2, 3, 4],
"neurolint.autoFix": false,
"neurolint.showInlineHints": true,
"neurolint.diagnosticsLevel": "warning"
}
Advanced Settings
{
"neurolint.timeout": 30000,
"neurolint.workspace.excludePatterns": [
"**/node_modules/**",
"**/dist/**",
"**/build/**",
"**/.next/**",
"**/coverage/**"
],
"neurolint.workspace.includePatterns": [
"**/*.ts",
"**/*.tsx",
"**/*.js",
"**/*.jsx"
],
"neurolint.workspace.maxFileSize": 10485760,
"neurolint.workspace.maxFiles": 1000
}
Supported File Types
- TypeScript:
.ts
, .tsx
- JavaScript:
.js
, .jsx
- Configuration:
.json
- Safe by Design: All transformations are validated before applying
- Automatic Backups: Files are backed up before any changes
- Rollback Support: Easy restoration from backups if needed
- Dry-Run Mode: Preview all changes without applying them
- Incremental Processing: Only processes changed files
- Intelligent Caching: 80% faster repeated analysis with automatic cleanup
- Progress Reporting: Real-time progress for large file analysis
- Security Validation: Comprehensive input validation and XSS protection
- Retry Logic: Automatic retry with exponential backoff for reliability
Integration Options
VS Code Extension (Recommended)
# Install from marketplace
code --install-extension neurolint.neurolint-vscode
# Or install from .vsix file
code --install-extension vscode-extension/releases/neurolint-vscode-1.2.3.vsix
CLI Integration
npm install -g @neurolint/cli
neurolint --version # 1.2.3
Web App
# Local testing
cd web-app && npm start
curl http://localhost:3000/analyze -X POST \
-H "Content-Type: application/json" \
-d '{"code":"var x = 1;","apiKey":"test_key","layers":[1,2]}'
Pricing
- Free ($0): Unlimited scans, Layers 1-4 fixes
- Professional ($24.99/month): All 7 layers, API access, CI/CD integration
- Enterprise: Custom pricing for teams and organizations
Get your API key at neurolint.dev/pricing
Troubleshooting
Common Issues
- Validation Errors: Use dry-run mode to preview changes
- Syntax Issues: Check backups and restore if needed
- Import Problems: Layer 5 handles React/Next.js imports automatically
- Performance Issues: Caching automatically improves repeated analysis
- Authentication Issues: Verify API key and permissions
Getting Help
- Run analysis with verbose mode for detailed output
- Check VS Code output panel for error details
- Use
NeuroLint: Show Output
command for logs
- Monitor progress with real-time feedback
- Check backups in
./neurolint-backups/
directory
Extension-Specific Issues
- Extension not working: Verify API key and server connectivity
- Analysis taking too long: Check network and reduce enabled layers
- Authentication problems: Regenerate API key and check account status
- Memory issues: Clear cache and restart VS Code
Support
Documentation
Privacy & Security
- Your code is analyzed securely
- No source code stored permanently
- Industry-standard encryption
- GDPR compliance
- Secure API communication
What's New in v1.2.3
Critical Fixes
- Shared Core Resolution: Fixed path resolution for shared core loading
- Free Layer Analysis: Resolved paywall issues for Layers 1-4
- Performance Improvements: Enhanced caching and progress reporting
- Security Enhancements: Comprehensive input validation and XSS protection
Enhanced Features
- Intelligent Caching: 80% faster repeated analysis
- Progress Reporting: Real-time progress for large files
- Retry Logic: Automatic retry with exponential backoff
- Memory Management: Automatic cleanup to prevent memory leaks
- Configuration Migration: Version-based migration system
New Capabilities
- Layer 7 Support: Complete adaptive pattern learning integration
- Professional Reports: Enhanced HTML and Markdown report generation
- Webview Security: Comprehensive CSP headers and security measures
- Error Boundaries: Robust error handling and recovery
License
This extension is licensed under the MIT License. See the LICENSE file for details.
Developed by NeuroLint