Skip to content

Commit 1b68409

Browse files
sdrassdras
committed
✨ initial commit
1 parent 8b5d5ae commit 1b68409

File tree

5 files changed

+619
-1
lines changed

5 files changed

+619
-1
lines changed

Diff for: ‎.gitignore

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
### OSX ###
2+
*.DS_Store
3+
.AppleDouble
4+
.LSOverride
5+
6+
# Icon must end with two
7+
Icon
8+
# Thumbnails
9+
._*
10+
# Files that might appear in the root of a volume
11+
.DocumentRevisions-V100
12+
.fseventsd
13+
.Spotlight-V100
14+
.TemporaryItems
15+
.Trashes
16+
.VolumeIcon.icns
17+
.com.apple.timemachine.donotpresent
18+
# Directories potentially created on remote AFP share
19+
.AppleDB
20+
.AppleDesktop
21+
Network Trash Folder
22+
Temporary Items
23+
.apdisk
24+
25+
### Node ###
26+
# Logs
27+
logs
28+
*.log
29+
npm-debug.log*
30+
31+
# Runtime data
32+
pids
33+
*.pid
34+
*.seed
35+
*.pid.lock
36+
37+
# Directory for instrumented libs generated by jscoverage/JSCover
38+
lib-cov
39+
40+
# Coverage directory used by tools like istanbul
41+
coverage
42+
43+
# nyc test coverage
44+
.nyc_output
45+
46+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
47+
.grunt
48+
49+
# node-waf configuration
50+
.lock-wscript
51+
52+
# Compiled binary addons (http://nodejs.org/api/addons.html)
53+
build/Release
54+
55+
# Dependency directories
56+
node_modules
57+
jspm_packages
58+
59+
# Optional npm cache directory
60+
.npm
61+
62+
# Optional eslint cache
63+
.eslintcache
64+
65+
# Optional REPL history
66+
.node_repl_history
67+
68+
# Output of 'npm pack'
69+
*.tgz
70+
71+
# Yarn Integrity file
72+
.yarn-integrity
73+
74+
# VS Code
75+
vsc-extension-quickstart.md
76+
*.vsix

Diff for: ‎README.md

+82-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,83 @@
1-
# vue-vscode-snippets
1+
# Vue VSCode Snippets
2+
3+
![logo](./src/images/logo.jpg)
4+
5+
## Description
6+
27
These snippets were built to supercharge my workflow in the most seamless manner possible.
8+
9+
This repo was built particularly for real world use. It doesn't catalogue the API definitions, and it's not a kitchen sink approach. Rather, it focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, have to keep looking up, or forget to consider while developing that I make more use of when they're at my fingertips.
10+
11+
_Current version: Vue2_
12+
13+
![demo](./src/images/demo.gif)
14+
15+
## Installation
16+
17+
* [vscode Extensions Marketplace](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
18+
```javascript
19+
ext install Vue VSCode Snippets
20+
```
21+
I enable tab completion by opening `Code > Preferences > Settings` (on a Mac) and applying `"editor.tabCompletion": true` to your personal settings
22+
23+
## Snippets
24+
25+
### Script
26+
27+
| Snippet | Purpose |
28+
| ---------------------- | ------------------- |
29+
| `vbase` | Single file component base |
30+
| `vdata` | Component data as a function |
31+
| `vmethod` | Vue method |
32+
| `vcomputed` | Vue computed property |
33+
| `vwatcher` | Vue watcher with new and old value args |
34+
| `vprops` | Props with type and default |
35+
| `vimport` | Import one component into another |
36+
| `vimport-c` | Import one component into another within the export statement |
37+
| `vfilter` | Vue filter |
38+
| `vmixin` | Create a Vue Mixin |
39+
| `vmixin-use` | Bring a mixin into a component to use |
40+
| `vc-direct` | Vue create a custom directive |
41+
| `vimport-lib` | Import a library |
42+
| `vimport-gsap` | Import GreenSock with Timeline and Eases |
43+
44+
### Template
45+
46+
| Snippet | Purpose |
47+
| ---------------------- | ------------------- |
48+
| `vfor` | v-for directive |
49+
| `vmodel` | Semantic v-model directive |
50+
| `vmodel-num` | Semantic v-model number directive |
51+
| `von` | v-on click handler with arguments |
52+
| `vel-props` | Component element with props |
53+
| `vsrc` | Image src binding |
54+
| `vstyle` | Inline style binding |
55+
| `vstyle-obj` | Inline style binding with objects |
56+
| `vclass` | Class binding |
57+
| `vclass-obj` | Class binding with objects |
58+
| `vclass-obj-mult` | Multiple conditional class bindings |
59+
| `vanim` | Transition component with JS hooks |
60+
| `vanimhook-js` | Using the Transition component JS hooks in methods |
61+
62+
### Vuex
63+
64+
| Snippet | Purpose |
65+
| ---------------------- | ------------------- |
66+
| `vstore` | Base for Vuex store.js |
67+
| `vgetters` | Vuex Getter |
68+
| `vmutation` | Vuex Mutation |
69+
| `vaction` | Vuex Action |
70+
| `vstore-import` | Import vuex store into main.js |
71+
72+
### Extra (plaintext)
73+
74+
| Snippet | Purpose |
75+
| ---------------------- | ------------------- |
76+
| `gitignore` | .gitignore file presets |
77+
| `vadd` | incrementer |
78+
| `vsub` | decrementer |
79+
80+
81+
## Contributing
82+
This is an open source project open to anyone. Contributions are welcome :[github](https://github.com/sdras/vue-vscode-snippets)
83+

Diff for: ‎extension.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// The module 'vscode' contains the VS Code extensibility API
2+
// Import the module and reference it with the alias vscode in your code below
3+
let vscode = require('vscode');
4+
5+
// this method is called when your extension is activated
6+
// your extension is activated the very first time the command is executed
7+
function activate(context) {
8+
9+
// Use the console to output diagnostic information (console.log) and errors (console.error)
10+
// This line of code will only be executed once when your extension is activated
11+
console.log('Congratulations, your extension "vue-vscode-snippets" is now active!');
12+
13+
// The command has been defined in the package.json file
14+
// Now provide the implementation of the command with registerCommand
15+
// The commandId parameter must match the command field in package.json
16+
let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
17+
// The code you place here will be executed every time your command is executed
18+
19+
// Display a message box to the user
20+
vscode.window.showInformationMessage('Hello World!');
21+
});
22+
23+
context.subscriptions.push(disposable);
24+
}
25+
exports.activate = activate;
26+
27+
// this method is called when your extension is deactivated
28+
function deactivate() {
29+
}
30+
exports.deactivate = deactivate;

Diff for: ‎snippets/plaintext.json

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"Gitignore": {
3+
"prefix": "gitignore",
4+
"body": [
5+
"### OSX ###",
6+
"*.DS_Store",
7+
".AppleDouble",
8+
".LSOverride",
9+
"",
10+
"# Icon must end with two \r",
11+
"Icon",
12+
"# Thumbnails",
13+
"._*",
14+
"# Files that might appear in the root of a volume",
15+
".DocumentRevisions-V100",
16+
".fseventsd",
17+
".Spotlight-V100",
18+
".TemporaryItems",
19+
".Trashes",
20+
".VolumeIcon.icns",
21+
".com.apple.timemachine.donotpresent",
22+
"# Directories potentially created on remote AFP share",
23+
".AppleDB",
24+
".AppleDesktop",
25+
"Network Trash Folder",
26+
"Temporary Items",
27+
".apdisk",
28+
"",
29+
"### Node ###",
30+
"# Logs",
31+
"logs",
32+
"*.log",
33+
"npm-debug.log*",
34+
"",
35+
"# Runtime data",
36+
"pids",
37+
"*.pid",
38+
"*.seed",
39+
"*.pid.lock",
40+
"",
41+
"# Directory for instrumented libs generated by jscoverage/JSCover",
42+
"lib-cov",
43+
"",
44+
"# Coverage directory used by tools like istanbul",
45+
"coverage",
46+
"",
47+
"# nyc test coverage",
48+
".nyc_output",
49+
"",
50+
"# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)",
51+
".grunt",
52+
"",
53+
"# node-waf configuration",
54+
".lock-wscript",
55+
"",
56+
"# Compiled binary addons (http://nodejs.org/api/addons.html)",
57+
"build/Release",
58+
"",
59+
"# Dependency directories",
60+
"node_modules",
61+
"jspm_packages",
62+
"",
63+
"# Optional npm cache directory",
64+
".npm",
65+
"",
66+
"# Optional eslint cache",
67+
".eslintcache",
68+
"",
69+
"# Optional REPL history",
70+
".node_repl_history",
71+
"",
72+
"# Output of 'npm pack'",
73+
"*.tgz",
74+
"",
75+
"# Yarn Integrity file",
76+
".yarn-integrity",
77+
],
78+
"description": "gitignore file"
79+
}
80+
}

0 commit comments

Comments
 (0)