Skip to content
This repository was archived by the owner on Sep 7, 2021. It is now read-only.

Commit fe5e043

Browse files
af009af009
authored
Add files via upload
1 parent 397b37e commit fe5e043

File tree

3 files changed

+372
-0
lines changed

3 files changed

+372
-0
lines changed

‎main.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
2+
/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
3+
/*global define, $, brackets, window, Mustache */
4+
5+
define(function (require, exports, module) {
6+
'use strict';
7+
8+
var AppInit = brackets.getModule('utils/AppInit'),
9+
EditorManager = brackets.getModule('editor/EditorManager'),
10+
PreferencesManager = brackets.getModule('preferences/PreferencesManager'),
11+
Menus = brackets.getModule('command/Menus'),
12+
CommandManager = brackets.getModule('command/CommandManager'),
13+
KeyEvent = brackets.getModule('utils/KeyEvent'),
14+
15+
snippets = require('snippet'),
16+
enabled = false,
17+
prefs = PreferencesManager.getExtensionPrefs('vue-snippets'),
18+
19+
COMMAND_NAME = 'Enable Vue Snippets',
20+
COMMAND_ID = 'af009.toggleVueSnippets',
21+
22+
handleToggleSnippets = function () {
23+
enabled = !enabled;
24+
prefs.set('enabled', enabled);
25+
prefs.save();
26+
CommandManager.get(COMMAND_ID).setChecked(enabled);
27+
},
28+
29+
applyPreferences = function () {
30+
enabled = prefs.get('enabled');
31+
CommandManager.get(COMMAND_ID).setChecked(enabled);
32+
},
33+
34+
parseLine = function (line, cursorPosition) {
35+
var words;
36+
line = line.substring(0, cursorPosition);
37+
words = line.split(/\W/);
38+
return words[words.length - 1];
39+
},
40+
41+
keyEventHandler = function ($event, editor, event) {
42+
enabled = prefs.get('enabled');
43+
44+
var cursorPosition, line, snippetKey, start;
45+
46+
if (enabled) {
47+
if ((event.type === 'keydown') && (event.keyCode === KeyEvent.DOM_VK_SPACE)) {
48+
cursorPosition = editor.getCursorPos();
49+
line = editor.document.getLine(cursorPosition.line);
50+
snippetKey = parseLine(line, cursorPosition.ch);
51+
52+
if (snippets[snippetKey]) {
53+
start = {
54+
line: cursorPosition.line,
55+
ch: cursorPosition.ch - snippetKey.length
56+
};
57+
58+
editor.document.replaceRange(snippets[snippetKey], start, cursorPosition);
59+
event.preventDefault();
60+
}
61+
}
62+
}
63+
},
64+
65+
activeEditorChangeHandler = function ($event, focusedEditor, lostEditor) {
66+
enabled = prefs.get('enabled');
67+
if (lostEditor) { $(lostEditor).off('keyEvent', keyEventHandler); }
68+
if (focusedEditor) { $(focusedEditor).on('keyEvent', keyEventHandler); }
69+
};
70+
71+
AppInit.appReady(function () {
72+
enabled = prefs.get('enabled');
73+
74+
// Register toggle command and add it to Edit menu
75+
CommandManager.register(COMMAND_NAME, COMMAND_ID, handleToggleSnippets);
76+
Menus.getMenu(Menus.AppMenuBar.EDIT_MENU).addMenuItem(COMMAND_ID);
77+
78+
var currentEditor = EditorManager.getCurrentFullEditor();
79+
$(currentEditor).on('keyEvent', keyEventHandler);
80+
$(EditorManager).on('activeEditorChange', activeEditorChangeHandler);
81+
82+
prefs.on('change', applyPreferences);
83+
applyPreferences();
84+
});
85+
});

‎package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "vue-snippets",
3+
"title": "Vue Snippets",
4+
"description": "A collection of Vue snippets for Brackets.",
5+
"homepage": "https://github.com/af009/vue-snippets",
6+
"version": "1.0.0",
7+
"author": "af009 <[email protected]>",
8+
"license": "MIT",
9+
"categories": "editing",
10+
"keywords": [
11+
"brackets",
12+
"vue",
13+
"snippets",
14+
"code",
15+
"generator",
16+
"reference",
17+
"autocomplete"
18+
],
19+
"files": [
20+
"main.js",
21+
"snippet.js",
22+
"README.md"
23+
],
24+
"engines": {
25+
"brackets": ">=0.31.0"
26+
}
27+
}

‎snippet.js‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
2+
/*global define, brackets, window */
3+
4+
define(function (require, exports, module) {
5+
'use strict';
6+
7+
const snippets = {};
8+
9+
// template
10+
11+
//VUE BASE
12+
13+
14+
snippets.vbase = `
15+
<template>
16+
17+
</template>
18+
19+
<script>
20+
export default {
21+
22+
}
23+
</script>
24+
25+
<style scoped>
26+
27+
</style>`;
28+
29+
30+
snippets.vfor = `
31+
<div v-for="item in items" :key="item.id">
32+
{{ item }}
33+
</div>`;
34+
35+
snippets.vmodel = `<input v-model="data" type="text" />`;
36+
37+
snippets.vmodelNum = `<input v-model.number="numData" type="number" step="1" />`;
38+
39+
snippets.von = `@click="handler(arg, event)"`;
40+
41+
snippets.velProps = `
42+
<component :component="">
43+
44+
</component>`;
45+
46+
snippets.vsrc = `<img :src="'/path/to/images/' + fileName" alt="altText"/>`;
47+
48+
snippets.vstyle = `
49+
<div :style="{ fontSize: data + 'px' }">
50+
51+
</div>`;
52+
53+
snippets.vstyleObj = `
54+
<div :style="[styleObjectA, styleObjectB]">
55+
56+
</div>`;
57+
58+
snippets.vclass = `
59+
<div :class="{ className: data }">
60+
61+
</div>`;
62+
63+
snippets.vclassObj = `
64+
<div :class="[classNameA, classNameB]">
65+
66+
</div>`;
67+
68+
snippets.vclassObjMult = `
69+
<div :class="[classNameA, {classNameB : condition}]">
70+
71+
</div>`;
72+
73+
snippets.vanim = `
74+
<transition
75+
mode="out-in"
76+
@before-enter="beforeEnter"
77+
@enter="enter"\n
78+
@before-leave="beforeLeave"
79+
@leave="leave"
80+
:css="false">\n
81+
</transition>`;
82+
83+
snippets.vnuxtl = `<nuxt-link to="/page">page</nuxt-link>`;
84+
85+
86+
// SCRIPT
87+
88+
snippets.vdata = `
89+
data() {
90+
return {
91+
key: value
92+
}
93+
},`;
94+
95+
snippets.vmethod = `
96+
methods: {
97+
name() {
98+
99+
}
100+
},`;
101+
102+
snippets.vcomputed = `
103+
computed: {
104+
name() {
105+
return this.data
106+
}
107+
},`;
108+
109+
snippets.vwatcher = `
110+
watch: {
111+
data(newValue, oldValue) {
112+
113+
}
114+
},`;
115+
116+
snippets.vprops = `
117+
props: {
118+
propName: {
119+
type: Number,
120+
default:
121+
},
122+
},`;
123+
124+
snippets.vimport = `import New from './components/New.vue';`;
125+
126+
snippets.vcomponents = `
127+
components: {
128+
New,
129+
}`;
130+
131+
snippets.vimportExport = `
132+
import Name from './components/Name.vue'
133+
134+
export default {
135+
components: {
136+
Name
137+
},
138+
}`;
139+
140+
snippets.vfilter = `
141+
filters: {
142+
fnName: function(value) {
143+
return value;
144+
}
145+
}`;
146+
147+
snippets.vmixin = `
148+
const mixinName = {
149+
mounted() {
150+
console.log('hello from mixin!')
151+
},
152+
}`;
153+
154+
snippets.vmixinUse = `mixins: [mixinName]`;
155+
156+
snippets.vcDirect = `
157+
Vue.directive('directiveName', {
158+
bind(el, binding, vnode) {
159+
el.style.arg = binding.value.arg;
160+
}
161+
});`;
162+
163+
snippets.vimportLib = `import { libName } from 'libName'`;
164+
165+
snippets.vimportGsap = `import { TimelineMax, Ease } from 'gsap'`;
166+
167+
snippets.vanimhookJS = `
168+
beforeEnter(el) {
169+
console.log('beforeEnter');
170+
},
171+
172+
enter(el, done) {
173+
console.log('enter');
174+
done();
175+
},
176+
177+
beforeLeave(el) {
178+
console.log('beforeLeave');
179+
},
180+
181+
leave(el, done) {
182+
console.log('leave');
183+
done();
184+
},`;
185+
186+
snippets.vcommit = `
187+
mutationName() {
188+
this.store.commit('mutationName', payload)
189+
}`;
190+
191+
snippets.vdispatch = `actionName() {
192+
this.store.dispatch('actionName', payload)
193+
}`;
194+
195+
snippets.vtest = `
196+
import Vue from 'vue'
197+
import HelloWorld from './components/HelloWorld'
198+
199+
describe('HelloWorld.vue', () => {
200+
it('should render correct contents', () => {
201+
const Constructor = Vue.extend(HelloWorld)
202+
const vm = new Constructor().mount()
203+
expect(vm.el.querySelector('.hello h1').textContent)
204+
.to.equal('Welcome to Your Vue.js App')
205+
})
206+
})`;
207+
208+
snippets.vinc = `return this.num += 1`;
209+
210+
snippets.vdec = `return this.num -= 1`;
211+
212+
213+
214+
// VUEX
215+
216+
snippets.vstore = `
217+
import Vue from 'vue';
218+
import Vuex from 'vuex';
219+
220+
Vue.use(Vuex);
221+
222+
export const store = new Vuex.Store({
223+
state: {
224+
key: value
225+
}
226+
});`;
227+
228+
snippets.vgetter = `
229+
getters: {
230+
value: state => {
231+
return state.value;
232+
}
233+
}`;
234+
235+
snippets.vmutation = `
236+
mutations: {
237+
updateValue(state, payload) {
238+
state.value = payload;
239+
}
240+
}`;
241+
242+
snippets.vaction = `
243+
actions: {
244+
updateValue({commit}, payload) {
245+
commit('updateValue', payload);
246+
}
247+
}`;
248+
249+
snippets.vstoreImport = `import { store } from './store/index';`;
250+
251+
252+
// NUXT CONFIG
253+
254+
snippets.nfont = `{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat:600|Rufina:700' }`;
255+
256+
snippets.ncss = `css: ['assets/normalize.css'],`;
257+
258+
259+
module.exports = snippets;
260+
});

0 commit comments

Comments
 (0)