Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tjx666/vscode-fe-helper
Provide some useful tools for front end development
https://github.com/tjx666/vscode-fe-helper
front-end vscode-extension
Last synced: about 21 hours ago
JSON representation
Provide some useful tools for front end development
- Host: GitHub
- URL: https://github.com/tjx666/vscode-fe-helper
- Owner: tjx666
- License: mit
- Created: 2020-05-14T11:46:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-03T17:52:29.000Z (about 1 month ago)
- Last Synced: 2024-11-02T09:42:09.674Z (8 days ago)
- Topics: front-end, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=YuTengjing.vscode-fe-helper
- Size: 4.07 MB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# VSCode FE Helper
[](https://marketplace.visualstudio.com/items/YuTengjing.vscode-fe-helper/changelog) [](https://marketplace.visualstudio.com/items?itemName=YuTengjing.vscode-fe-helper) [](https://marketplace.visualstudio.com/items?itemName=YuTengjing.vscode-fe-helper) [](https://marketplace.visualstudio.com/items?itemName=YuTengjing.vscode-fe-helper&ssr=false#review-details) [](https://github.com/tjx666/vscode-fe-helper)
 [](http://makeapullrequest.com) [](http://isitmaintained.com/project/tjx666/vscode-fe-helper') [](https://github.com/tjx666/vscode-fe-helper/blob/main/LICENSE)
## 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`
### 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:
```javascript
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](https://github.com/kufii/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:
```json
{
"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](https://github.com/tjx666/open-in-external-app)
- [Package Manager Enhancer](https://github.com/tjx666/package-manager-enhancer)
- [Neo File Utils](https://github.com/tjx666/vscode-neo-file-utils)
- [VSCode FE Helper](https://github.com/tjx666/vscode-fe-helper)
- [VSCode archive](https://github.com/tjx666/vscode-archive)
- [Better Colorizer](https://github.com/tjx666/better-colorizer/tree/main)
- [Modify File Warning](https://github.com/tjx666/modify-file-warning)
- [Power Edit](https://github.com/tjx666/power-edit)
- [Reload Can Solve Any Problems](https://github.com/tjx666/reload-can-solve-any-problems)
Check all here: [publishers/YuTengjing](https://marketplace.visualstudio.com/publishers/YuTengjing)