GithubHelp home page GithubHelp logo

javascriptsnippetpack's Introduction

JavaScript Snippet Pack for Visual Studio

Build status

Download this extension from the VS Gallery or get the nightly build.


A snippet pack to make you more productive working with JavaScript. Based on the Atom snippets.

Snippet manager

This extension ships a bunch of useful code snippets for the JavaScript editor. Get an overview from the Code Snippet Manager in Visual Studio located under the Tools top level menu.

Snippet manager

Here's the full list of all the snippets:

Console

[cd] console.dir

console.dir(${1:obj});

[ce] console.error

console.error($end$);

[ci] console.info

console.info($end$);

[cl] console.log

console.log($end$);

[cw] console.warn

console.warn($end$);

[de] debugger

debugger;

DOM

[ae] addEventListener

$document$.addEventListener('$event$', function(e) {
	$end$
});

[ac] appendChild

$document$.appendChild($elem$);

[rc] removeChild

$document$.removeChild($elem$);

[cel] createElement

$document$.createElement($elem$);

[cdf] createDocumentFragment

$document$.createDocumentFragment($elem$);

[ca] classList.add

$document$.classList.add('$class$');

[ct] classList.toggle

$document$.classList.toggle('$class$');

[cr] classList.remove

$document$.classList.remove('$class$');

[gi] getElementById

$document$.getElementById('$id$');

[gc] getElementsByClassName

$document$.getElementsByClassName('$class$');

[gt] getElementsByTagName

$document$.getElementsByTagName('$tag$');

[ga] getAttribute

$document$.getAttribute('$attr$');

[sa] setAttribute

$document$.setAttribute('$attr$', $value$);

[ra] removeAttribute

$document$.removeAttribute('$attr$');

[ih] innerHTML

$document$.innerHTML = '$elem$';

[tc] textContent

$document$.textContent = '$content$';

[qs] querySelector

$document$.querySelector('$selector$');

[qsa] querySelectorAll

$document$.querySelectorAll('$selector$');

Loop

[fe] forEach

$myArray$.forEach(function($item$) {
	$end$
});

Function

[afn] anonymous function

function($arguments$) {
	$end$
}

[pr] prototype

$object$.prototype.$methodName$ = function($arguments$) {
	$end$
}

[call] function call

$methodName$.call($context$, $arguments$)

[apply] function apply

$methodName$.apply($context$, [$arguments$])

[ofn] function as a property of an object

$functionName$: function($arguments$) {
	$end$
}

JSON

[jp] JSON.parse

JSON.parse($object$);

[js] JSON.stringify

JSON.stringify($object$);

Timer

[si] setInterval

setInterval(function() {
	$end$
}, $delay$);

[st] setTimeout

setTimeout(function() {
	$end$
}, $delay$);

Misc

[us] use strict

'use strict';

[al] alert

alert('$message$');

[co] confirm

confirm('$message$');

[pm] prompt

prompt('$message$');

Contribute

Check out the contribution guidelines if you want to contribute to this project.

For cloning and building this project yourself, make sure to install the Extensibility Tools 2015 extension for Visual Studio which enables some features used by this project.

License

Apache 2.0

javascriptsnippetpack's People

Contributors

akamud avatar madskristensen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

javascriptsnippetpack's Issues

Port to VSCode

I thought about porting this to VSCode, so I want to know if you are interested in keeping this "officially" in your repo.

This is very easy to port, I could do a PR with all the snippets, you would just have to arrange the publishing parts so it could stay under the same "umbrella".

If you want to keep this repo VS-only, I'm planning on doing a port referencing your repo as inspiration.

What do you tink?

It can't work .

Installed product versions

  • Visual Studio: [example 2013 Community]
  • This extension: [example 1.2.15]

Description

It can't autocomplete after I press Enter key.

Steps to recreate

error

Current behavior

I input "gi", and press Enter key. But it can't autocomplete.

Expected behavior

Work successful.

Missing or unspecified language warning

Installed product versions

  • Visual Studio 2017 RTM
  • JavaScript Snippet Pack 1.2.15

Description

When VS2017 loads, a line like this appears in the Output Window under Code Snippet Output for each JavaScript snippet:

C:\Users\name\AppData\Local\Microsoft\VisualStudio\15.0_e30f35d6\Extensions\bghn1ma3.fp4\Snippets\JavaScriptSnippetPack\us.snippet: Missing or unspecified Language attribute

Perhaps related, the snippets all have Language="JavaScript", but Code Snippets Manager's language list has JavaScript Editor.

Steps to recreate

  1. Install VS2017.
  2. Install Web Essentials.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.