VSCode FE Helper

October 3, 2024 · View on GitHub

Usage

All the features are used by run command. You can show command plate by keyboard shortcut ctrl+⇧+P on Windows or ⌘+⇧+P on MacOS. All commands provided by this extension is prefixed with FE Helper:.

Features

Remove Comments

command: FE Helper: Remove Comments

supported languages:

html/xml
css/sass/scss/less
javascript/javascriptreact/typescript/typescriptreact
jsonc
vue
markdown
editorconfig
yaml
ignore (eg: .gitignore, .eslintignore)

Remove Comments

Transform ECMAScript Syntax

Command: FE Helper: Transform ECMAScript Syntax

For now, supports:

ES5 to ES6/ES7
Using tsc compile code to ES5
Using tsc compile code to ES3

Remove TypeScript Types

Command FE Helper: Remove TypeScript Types

Remove TypeScript Types

Pluralize

command: FE Helper: Pluralize

Pluralize all the words selected in current active editor.

Pluralize

Remove Irregular Whitespace

Command: FE Helper: Remove Irregular Whitespace

Sometime I copy description from LeetCode problem and paste into VSCode, but there are some irregular whitespace in the text. For that time, this feature is very useful and convenient.

Remove Irregular Whitespace

Transform Color Format

Command: FE Helper: Transform Color Format

supported formats:

hex
rgb/rgba
cmyk
hsv
hsl
ansi16
ansi256

Transform Color Format

Paste JSON as Object

You can copy JSON content, and paste as JavaScript code. The principle behind this functionality is very simple:

const jsCode = jsonFromClipboard.replaceAll(/"([^"]*)"\s*:/g, '\$1:');

Paste JSON as Object

SpaceGod

For Chinese users, there should be space between English word, number, and punctuation. It's very convenient to add space between them by command FE Helper: SpaceGod。

SpaceGod

Other Useful FrontEnd Tools Commands

FE Helper: Force Prettier
FE Helper: Force ESLint
FE Helper: Force Stylelint
FE Helper: Force Markdownlint
FE Helper: Show Active File ESLint Performance
FE Helper: Show Active File ESLint Config
FE Helper: Show Active File Stylelint Config

JS Unicode Preview

check vscode-js-unicode-preview for more details:

settings:

vscode-fe-helper.js-unicode-preview.languages: An array of language ids to add the previews on. Defaults to ["javascript", "javascriptreact", "typescript", "typescriptreact"]

vscode-fe-helper.js-unicode-preview.inline: Boolean whether or not to show the previews inline. Defaults to true.

vscode-fe-helper.js-unicode-preview.hover: Boolean whether or not to show the previews on hover. Defaults to true.

Check Jsx Extension

settings:

{
  "vscode-fe-helper.check-jsx-extension.fileExtensions": [".jsx", ".tsx"]
}

check js extension screenshot

Goto Declaration

command: FE Helper: Goto Declaration

only for javascript/typescript/javascriptreact/typescriptreact file. Unlike built-in Go to Definition, this command only work for current file, if the identifier is imported, will jump to it's import statement instead of definition.

If can't find the declaration, will try to find the first highlight of the identifier.

My extensions

Check all here: publishers/YuTengjing