Frontend Helper Pro

One extension for the frontend tasks you use every day: snippets, JS/TS linting, React performance analysis, imports, CSS conversions, spell checking, Git history, and more.

Published by TigerDev Studio.

Explore the Frontend Mindmap for a visual overview.

Quick start

1. Install Frontend Helper Pro and open a frontend project.
2. Start typing a snippet prefix such as rfc, uef, or imp, then press Tab or accept the completion.
3. See JS/TS bugs as you type, and use the lightbulb menu for spelling fixes, missing imports, and CSS unit conversions.
4. Open the Frontend Helper Pro Activity Bar view for file history and quick feature toggles.

No project configuration is required. Features are enabled by default and can be adjusted in VS Code Settings by searching for Frontend Helper Pro.

What you get

Language support

• React and Next.js App Router or Pages Router in .js, .jsx, .ts, and .tsx
• JavaScript, JSX, TypeScript, and TSX
• HTML, XML, Angular templates, and Vue
• CSS, SCSS, Sass, and Less
• Markdown

Snippets

The extension includes 199 unique prefixes: 192 in JavaScript/JSX and 198 in TypeScript/TSX. TypeScript snippets generate typed variants where applicable.

Popular prefixes

Some compatibility prefixes generate legacy class components, lifecycle methods, PropTypes, or older Redux patterns. Deprecated lifecycle entries are labeled in their completion descriptions.

Complete prefix reference

Command Palette

Open the Command Palette with Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS, then search for Frontend Helper Pro.

Settings

Frontend Helper Pro provides 61 settings. Open VS Code Settings and search for Frontend Helper Pro. Settings use application scope, so your choices apply across workspaces.

Feature guides

React Performance Guard for React and Next.js

React Performance Guard works with standard React projects and Next.js App Router or Pages Router projects. It activates automatically when react or next is declared in a workspace package.json; in other projects its diagnostics, status item, and sidebar section stay disabled. It analyzes .js, .jsx, .ts, and .tsx files locally as you type, without requiring ESLint configuration.

The first release detects:

• Inline object, array, and function props passed to custom components
• Standard <img> elements that can use Next.js Image
• Effects whose only operation stores potentially derived state
• Components that exceed configurable line, state-hook, or effect-hook limits
• App Router files that may not need "use client"

The active React file displays ⚡ React Performance: 84 in the status bar. Click the score to open the report. The Frontend Helper Pro Activity Bar also includes a dedicated React Performance section with the current score and these actions:

React Performance: Analyze Current File
React Performance: Analyze Workspace
React Performance: Show Performance Report
React Performance: Find Large Components
React Performance: Find Unnecessary Client Components

Scores are guidance rather than benchmark results. Inline props and effects are reported conservatively, and potentially behavior-changing refactors are never applied automatically. In the report, select a file path under Files needing attention to open the file and jump to its first performance suggestion. A Fix action is shown for safe transformations: removing an unnecessary "use client" directive and hoisting fully static object or array props to module-level constants. Applying a fix immediately refreshes diagnostics and the score. Dynamic props and suggestions requiring architectural judgment remain marked Review. The same safe transformations are available from the editor Quick Fix menu.

JS/TS lint

Linting runs automatically in JavaScript, JSX, TypeScript, and TSX files with no project configuration. Problems appear in the editor and Problems panel with codes such as TS2588.

const status = 'ready';
status = 'done'; // TS2588: Cannot assign to a const variable.

The focused correctness checks include syntax errors, undeclared or misspelled variables, duplicate block-scoped declarations, variables used too early, const reassignment, and await outside an async function. Add a code to frontendHelperPro.lint.ignoreCodes when you do not want that diagnostic reported, or add a project-provided global to frontendHelperPro.lint.globals.

Accessibility Guard

Accessibility Guard analyzes HTML, JSX, TSX, Angular templates, and Vue markup as you type. It checks for missing image alternatives, iframe titles, document language, associated form labels, empty or icon-only buttons without accessible names, positive tabIndex values, and mouse-only handlers on non-interactive elements.

Native semantic elements are checked according to the requirements they carry. This includes accessible names for buttons, links, headings, dialogs, embedded content, and role="img" elements; alternative text for images, image inputs, and image-map areas; meaningful labels and fieldset legends; unique static IDs; valid clickable anchors; and warnings for obsolete moving or flashing elements. Custom framework components are left to their component contracts to avoid false positives.

Problems appear in the editor and Problems panel with codes such as A11Y001. The lightbulb menu offers predictable fixes, including adding alt="" for an explicitly decorative image, setting lang="en", and changing a positive tabIndex to 0. Fixes that require meaningful content, such as an iframe title or form label, are intentionally left for the developer.

The Frontend Helper Pro Activity Bar includes a dedicated Accessibility section with the current file score and these actions:

Accessibility: Analyze Current File
Accessibility: Analyze Workspace
Accessibility: Show Accessibility Report
Accessibility: Find Unlabeled Controls
Accessibility: Find Keyboard Issues

The report summarizes the average score, files analyzed, warnings, issue categories, and files needing attention. Workspace scans are local and can be capped with frontendHelperPro.accessibility.maxWorkspaceFiles. Select a file path under Files needing attention to open the file and jump directly to its first accessibility issue. When predictable fixes are available, the Fix action applies all safe fixes in that file and immediately refreshes its diagnostics and report score. Issues requiring meaningful developer input remain marked for review.

CSS unit conversion

Place the cursor on a value such as 16px, use the lightbulb menu, or run Frontend Helper Pro: Convert CSS Unit. The extension can convert the value to rem, rpx, or vw using your configured base font size and viewport width.

While typing CSS, equivalent values also appear as completions:

margin: 16px; /* suggests 1rem, 32rpx, and 4.2667vw */

Auto Import

Auto Import scans workspace source files and indexes exported symbols from JavaScript and TypeScript modules, including common barrel files:

export * from './buttons';
export { Card } from './Card';
export default function Modal() {}

When you type or Quick Fix an unresolved identifier such as Card, the extension can suggest:

import { Card } from './components';

Import Cost

Import cost annotations are inspired by wix/import-cost. The extension scans package imports such as:

import React from 'react';
import { debounce } from 'lodash-es';

It then shows inline minified and gzip sizes using package-size data:

import React from 'react';  4.6k (gzipped: 1.9k)

Relative imports and Node built-ins are ignored. If a package is not available from the remote size service, the extension falls back to an installed node_modules package entry file when possible, which helps with private scoped packages.

Git History

Git history annotations are shown on the active cursor line in Git-tracked files:

getUserProfile();  Narayanaraj, 14 months ago • AS-10653, AS-11134 fix

The extension uses git blame --line-porcelain with the current editor contents, so unsaved line changes stay aligned with the visible buffer. Untracked files and non-Git workspaces are ignored.

File History

The extension adds a dedicated Frontend Helper Pro Activity Bar icon. Open that container to see a collapsible File History view that follows the active file and shows the commit list directly, similar to GitLens. Selecting an entry opens a side-by-side diff between the selected revision and its previous revision, keeps that file history pinned while the diff or revision tab is open, and leaves the full commit list visible so you can quickly choose another entry. A collapsed Quick Actions section shows every feature switch with a green enabled or red disabled indicator and lets you toggle each one, while keeping common extension commands nearby.

The view uses git log --name-status --follow and can continue across renames when frontendHelperPro.fileHistory.followRenames is enabled. Right-click a history entry to open that exact revision or copy its full commit hash.

Spell Check

The spell checker uses CSpell dictionaries for English, frontend terms, HTML, CSS, and TypeScript. It supports global dictionary words and common in-document directives such as:

<!-- cspell:ignore projectword -->
<!-- cspell:words Acmefront -->

Development

npm install
npm run compile
npm test

Press F5 in VS Code to launch an Extension Development Host.

Sponsor

Frontend Helper Pro is independently maintained. If it saves you time, you can support its continued development through thanks.dev.