VSCode FE Helper

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)

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

[!NOTE]
You need to install swc cli local or global

Pluralize

command: FE Helper: Pluralize

Pluralize all the words selected in current active editor.

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.

Transform Color Format

Command: FE Helper: Transform Color Format

supported formats:

• hex
• rgb/rgba
• cmyk
• hsv
• hsl
• ansi16
• ansi256

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:');

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。

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"]
}

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

• Open in External App
• Package Manager Enhancer
• Neo File Utils
• VSCode FE Helper
• VSCode archive
• Better Colorizer
• Modify File Warning
• Power Edit
• Reload Can Solve Any Problems

Check all here: publishers/YuTengjing