Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ElemeFE/vscode-element-helper
VSCode-Element-Helper is a VS Code package for Element-UI.
https://github.com/ElemeFE/vscode-element-helper
element-ui vscode
Last synced: 17 days ago
JSON representation
VSCode-Element-Helper is a VS Code package for Element-UI.
- Host: GitHub
- URL: https://github.com/ElemeFE/vscode-element-helper
- Owner: ElemeFE
- Created: 2017-07-09T03:34:35.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:29:19.000Z (over 1 year ago)
- Last Synced: 2024-02-16T00:21:39.369Z (4 months ago)
- Topics: element-ui, vscode
- Language: TypeScript
- Homepage:
- Size: 281 KB
- Stars: 243
- Watchers: 12
- Forks: 42
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Lists
- awesome-element - vscode-element-helper - helper (Tools)
- awesome-stars - vscode-element-helper - VSCode-Element-Helper is a VS Code package for Element-UI. (TypeScript)
README
# VSCode-Element-Helper
> VSCode-Element-Helper is a VS Code extension for Element-UI. If you use ATOM editor, please go to [ATOM version](https://github.com/ElemeFE/element-helper)
Element-UI is a great library. More and more projects use it. So, For helping developer write more efficient by Element-UI, VSCode-Element-Helper is born.
## Feature
* Document
* Autocomplete
support vue, html and jade/pug language
* Snippets
## Document
### Usage
1 - Move cursor to Element-UI tag or select it
2 - Press default hot key `ctrl + cmd + z`(windows: `ctrl + win + z`) or
Press ⇧⌘P to bring up the Command Palette and then input `element-helper.search`
3 - Show document view If complete matching,
or you should select tag you want to search
4 - Enter and trigger document browser
### Version, Quotes, Indentation size and Language Switching
1 - Enter `Preferences` -> `setting` or shortcut `cmd` + `,`
2 - Modify language, version or indentation size
```javascript
"element-helper.language": "zh-CN",
"element-helper.version": "1.3",
"element-helper.indent-size": 2,
"element-helper.quotes": "double", // html vue qoutes
"element-helper.pug-quotes": "single" // jade/pug quotes
```
### Auto Update Mechanism
Document is off-line and auto synchronize with Element-UI official site.
### Keymap
Default hot key is `ctrl + cmd + z`( windows: `ctrl + win + z`). If it has conflicted with other software's hot key. You can customize it. see [keybindings](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-editor)
## Autocomplete
* Distinguish and auto complete property and method for every Element-UI tag
* Prompt value when value is some special type like Boolean or ICON.
## Snippets
Support snippets list:
* `msg`
```
this.$message({
message: '',
type: ''
})
```
* `alert`
```
this.$alert('', '', {
confirmButtonText: '',
callback: () => {}
});
```
* `confirm`
```
this.$confirm('', '', {
confirmButtonText: '',
cancelButtonText: '',
type: ''
}).then(() => {})
.catch(() => {});
```
* `prompt`
```
this.$prompt('', '', {
confirmButtonText: '',
cancelButtonText: '',
inputPattern: //,
inputErrorMessage: ''
}).then(({ value }) => {})
.catch(() => {});
```
* `msgb`
```
this.$msgbox({
title: '',
message: '',
showCancelButton: '',
confirmButtonText: '',
cancelButtonText: '',
beforeClose: (action, instance, done) => {}
}).then(action => {});
```
* `notify`
```
this.$notify({
title: '',
message: ''
});
```
## Contribution
Your pull request will make VSCode-Element-Helper better.
## LICENSE
MIT