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>&quot;Hello&quot;</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

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "NeuroLint"
4. Click "Install"

Manual Installation

1. Download the .vsix file from releases
2. Open VS Code
3. Go to Extensions (Ctrl+Shift+X)
4. Click the "..." menu and select "Install from VSIX..."
5. 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

3. Performance Optimization

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

Performance & Safety

• 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

1. Validation Errors: Use dry-run mode to preview changes
2. Syntax Issues: Check backups and restore if needed
3. Import Problems: Layer 5 handles React/Next.js imports automatically
4. Performance Issues: Caching automatically improves repeated analysis
5. 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

• Getting Started: https://neurolint.dev/docs
• API Reference: https://neurolint.dev/api
• Troubleshooting: https://neurolint.dev/help

Contact

• Support Portal: https://neurolint.dev/support
• Email: support@neurolint.dev
• Website: https://neurolint.dev

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