Quantcast
Channel: Coding4Fun Blog - Channel 9
Viewing all articles
Browse latest Browse all 453

Pack it up with the HTML Snippet Pack and Snippet Pack Project Template

$
0
0

Welcome back to the Mads Kristensen  blog!

Just kidding... But I wouldn't be surprised if you might think that, given the number of times we highlight his work. Well it's all his fault! If he would just stop release cool extensions and stuff!

For example, today we're highlighting not one project of his, but two!

First we've got a cool HTML Snippet Pack (and you know how much I love snippets), secondly we've got a cool extension that helps you create and share your own Snippet Packs.

HTML Snippet Pack

A snippet pack to make you more productive working with HTML.

snippet-pack

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.

image

Contribute

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

So what tags are included? Here's just the "content" snippets...

Div and...

  • abbr
  • address
  • area
  • article
  • aside
  • b
  • bdi
  • bdo
  • blockquote
  • body
  • button
  • cite
  • canvas
  • code
  • content
  • datalist
  • del
  • details
  • dfn
  • dialog
  • dl
  • em
  • embed
  • fieldset
  • footer
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • head
  • header
  • i
  • ins
  • label
  • main
  • map
  • mark
  • math
  • menu
  • meter
  • nav
  • noscript
  • object
  • output
  • p
  • param
  • pre
  • progress
  • q
  • s
  • samp
  • section
  • shadow
  • small
  • span
  • strong
  • sub
  • sup
  • template
  • textarea
  • time
  • title
  • u

The really cool magic is that all these are done via one line of instruction;

<Code Language="html"><![CDATA[<$shortcut$>$selected$$end$</$shortcut$>]]></Code>

Damn that Mads guy is smart!

Now what about creating and sharing your own Pack? Mad's has that covered too.

Snippet Pack Project Template

A Visual Studio project template for creating code snippet packs targeting any supported language. The snippet pack will be an extension you can share with your team or upload to the Visual Studio extension gallery.

See the change log for changes and road map.

Features

  • Create snippet pack extensions
  • Works with all supported languages like C#, VB, JavaScript, HTML etc.
  • The snippet packs will work in Visual Studio 2012, 2013 and 2015.

How to use

Create a new project and select the Snippet Pack Extension.

image

That will create a VSIX project with the following structure:

image

Instructions will automatically show up on how to modify the snippets to your scenario.

Changing language

Snippets are per language, and this snippet pack is targeting JavaScript by default. It is easy to change so you can target any other language supporting snippets.

To do that, open Snippets/snippets.pkgdef and follow the instructions found at the top of that file.

You can also have snippets for multiple languages. To do that, add an additional entry in the Snippets/snippets.pkgdef for the new language and add an additional folder with snippets targeting that language.

Changing name

The Snippets folder contains a folder which has the name of your extension. You can name this folder whatever you want as long as you also change the name in snippets.pkgdef accordingly.

.snippet files

The .snippet must have a few properties set correctly for this to work.

Select one or more .snippet files and hit F4 to bring up the property grid. Set the following properties:

  • Build action : Content
  • Include in VSIX: True

Read more about the possibilities with code snippets on MSDN

Here are some packs created with this...

Examples

Here are some of the snippet packs made by this template:

And of course it's all open source;

Here’s a few more links you might find interesting:




Viewing all articles
Browse latest Browse all 453

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>