madskristensen / zencodingvs

A Visual Studio extension

ZenCoding

Download this extension from the Marketplace or get the CI build.

---

Provides ZenCoding for the HTML Editor - full support for static HTML, Razor and WebForms.

See the change log for changes and road map.

Features

• HTML ZenCoding
• Lorem Ipsum generator
• Lorem Pixel image generator
• PlaceHold.it image generator

HTML ZenCoding

ZenCoding is a quick way to generate HTML markup by using a CSS based syntax.

To invoke ZenCoding, write the syntax and hit the TAB key to generate the markup.

Examples:

Syntax ul>li*3 generates:

Syntax #foo>span generates:

Syntax ul>li*4>a{test $} generates:

Lorem Ipsum generator

As part of ZenCoding, you can now generate Lorem Ipsum code directly in the HTML editor. Simply type lorem and hit TAB and a 30 word Lorem Ipsum text is inserted.

Type lorem10 and a 10 word Lorem Ipsum text is inserted. This can be used in conjuction with ZenCoding like so: ul>li*5>lorem3

Lorem Pixel generator

As part of ZenCoding, you can also generate Lorem Pixel code directly in the HTML editor. Simply type pix-200x200-animals and hit TAB and a img tag with a 200x200 image of an animal is inserted:

PlaceHold.it generator

ZenCoding also support PlaceHold.it if you prefer blank images. Type place-50 and hit TAB to have a 50 pixels square image. Use place-200x100 to insert a rectangular image:

You can choose the background color by adding the hexadecimal value after the size like this place-150x240-EEEDDD. You can even add text to the image by using place-150x240-EEE-t=This%20is%20some%20text.

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

zencodingvs's Issues

Support wrapping

Installed product versions

• Visual Studio: 2017 prof
• This extension: 1.2.11

Description

I could not find any mention of support for abbreviation wrapping (link)

Current behavior

Couldn't find anything in docs or command set in VS

Expected behavior

Awesome feature of emmet - allows for very easy copy pate and manipulation of lists

Does not work in Visual Studio 2022

Installed product versions

• Microsoft Visual Studio Enterprise 2022, Version 17.0.0
• ZenCoding 1.2.15

Description

Does not work in Visual Studio Enterprise 2022

Steps to recreate

1. Open razor, cshtml or html file.
2. Type ul and press tab.

Current behavior

Nothing happens when the tab key is pressed in * .razor and * .cshml files. In * .html files Studio crashes (not always).

Expanding inputs whit type doesn't work whell with repetitions

Installed product versions

• Visual Studio: 2017 Enterprise
• This extension: 1.2.12

Description

When doing varous inputs the type of the imput is not expanded

Steps to recreate

on a htm file write
input:time*3
press tab

Current behavior

it expands:

<input` type="" value="" />
<input type="" value="" />
<input type="" value="" />

it misses the time type.

Expected behavior

it should expand this:

<input type="time" value="" id="" />
<input type="time" value="" id="" />
<input type="time" value="" id="" />

One would belive multipliying the expansion should not change it,

Latest update causing VS crashes when attempting to use ZenCoding

Installed product versions

• Visual Studio: 2019 Enterprise
• This extension: 1.2.15

Description

In a CSHTML file, every time I try to use auto-completion, my visual studio crashes. This did not happen until the most recent update.

Steps to recreate

1. Create a CSHTML file
2. Try to use ZenCoding
3. Crash

Current behavior

I should be able to, for example, type ".testDiv" and hit Tab, then ".testDiv" should expand to <div class="testDiv"></div> However, when I type ".testDiv" then hit Tab, my visual studio crashes.

Expected behavior

I should be able to, for example, type ".testDiv" and hit Tab, then ".testDiv" should expand to <div class="testDiv"></div>.

IntelliSense implementation as a proposal

Installed product versions

• Visual Studio: 2017 Community
• This extension: 1.2.11

Description

Maybe it would be a nice feature if intelliSense popup shows after typing (basing on CSS files in projects or standard HTML tags). It will for sure eliminate a typo mistakes.

Steps to recreate

N/A

Current behavior

No intelliSense available

Expected behavior

as standard IntelliSense in general.

Typing #jim>a{test $} starts debugging

Installed product versions

• Visual Studio: 2022 Comunity
• This extension: 1.1.20

Description

I typed...

#jim>a{test $}

...and hit Tab and VS started debugging, just as if I'd hit f5. I tried this a few times and it consistently did the same. At some point it stopped, and now doesn't do it.

Expected behavior

I expected it to expand to some HTML, not run my project!

Unable to find settings in Tools -> Options

Installed product versions

• VS2019 Professional
• This extension: 1.2.12

Description

Unable to locate options to change configuration, not showing as expected in Tools -> Options or Extensions

Steps to recreate

Installed Web Essentials 2019
Click on Tools -> Options
Look for either Web Essentials or Zen Coding in the list, neither is visible.

Current behavior

Unable to locate settings.

Expected behavior

Show settings so I can fine tune all the Web Essentials extenions.

Does not install on vstudio code 1.49.2

Installed product versions

• Visual Studio: [example 2015 Professional]
• This extension: [example 1.1.21]

Description

Replace this text with a short description

Steps to recreate

1. Replace this
2. text with
3. the steps
4. to recreate

Current behavior

Explain what it's doing and why it's wrong

Expected behavior

Explain what it should be doing after it's fixed.

VS2017 RC: Error 'Specified argument was out of the range of valid values' when indenting

Installed product versions

• Visual Studio: 2017 RC Enterprise (15.0.0-RC.4+26206.0)
• This extension: 1.1.10

Description

When indenting text in the HTML editor (not outdenting), an error message appears:

The specified argument was out of the range of valid values. Parameter name: length

Disabling the extension causes the error to disappear.

Steps to recreate

1. Install Zen Coding in VS2017 RC
2. Open a HTML/CSHTML file
3. Attempt to indent by pressing Tab

Current behavior

Showing error instead of indenting text

Expected behavior

The text should just be indented.

Typing #jim>span produces #jim><span></span>

Installed product versions

• Visual Studio: 2022 Community
• This extension: 1.1.20

Current behavior

I typed...

#jim>span

...and pressed Tab. It produced...

#jim><span></span>

Expected behavior

I expected it to produce...

<div id="jim"><span></span></div>

Zen Coding not working with cshtml and razor files

Installed product versions

• VS2019 Professional
• This extension: 1.2.12

Description

When using a cshtml or razor file TAB Expansion does not work.

Steps to recreate

Create either a cshtml or razor file.
Create some standard HTML markup
Enter any standard appreviation i.e div.row then press tab.

Current behavior

The cursor just tabs across the page

Expected behavior

Expand text as in a regular html page.

VS 2019 Crashes out on tab

Installed product versions

• Visual Studio: 2019 16.11.2
• This extension: 1.2.15

Description

Open a view type div hit tab and VS goes down in flames

Steps to recreate

1. Open cshtml file
2. Type div
3. hit tab
4. VS 2019 crashes out

Current behavior

VS Crashes
This worked fine on Friday 11-6-2021 - I assume you updated this for the 2022 release today. Also have R#, OzCode, Telerik extensions

Expected behavior

Expand to div tag with open and closing tags

ZenCoding extension does not work with visual studio 2017 anymore.

I have Visual Studio Professional 2017 installed in my Windows 10 PC. Although, I already installed Web Essentials 2017 by Mads Kristensen in Extension and Updates of VS, I can't see ZenCoding installed in the extension list as per mentioned in the Visual Studio marketplace site. When I try to install ZenCoding separately from Tools > Extensions and Updates > Online > Search, it doesn't appear in the list at all.

While checking the site for ZenCoding, it is mentioned that ZenCoding works with VS 2019 and 2020. Does that mean it doesn't work with VS 2017 anymore? Otherwise, how can I make use of it in VS Professional 2017?

Visual Studio 2022 Support

Installed product versions

• Visual Studio: 2022 All Versions

Description

Make the extension available in Visual Studio 2022.

Steps to recreate

1. Download the extension installer.
2. Run the installer.

Current behavior

Message that it is already installed to all applicable products appears even though it is not installed in Visual Studio 2022.
It is also not listed in Online Extensions in Manage Extensions Visual Studio 2022.

Expected behavior

Installs and works in Visual Studio 2022.

Note: Sorry for the all the extra details. I probably could have stopped with the title on this one.

Tab expand only last element in html files

Installed product versions

• Visual Studio: 2017 Professional
• ZenCoding 1.2.11

Description

only the last element expands, i.e. p>input become p>

Steps to recreate

1. Create empty project
2. create empty index.html from templates
3. type p>input
4. type TAB

Current behavior

p><input type="type" name="name" value="" />

Expected behavior

<p><input type="type" name="name" value="" /></p>

Tab competing class(#) or id(.) with name of tags doesn't work properly.

Installed product versions

• Visual Studio: Community 2017 15.7.1
• ZenCoding: 1.2.11

Description

When tab competing class(#) or id(.) with name of tags doesn't work properly.
For example #main produces #<main></main>

I've tried resting my visual studio environment and still happening.

Steps to recreate

Go into a html/cshtml file type any of the following

#main 
#header 
#div 
#map

They will produce

#<main></main>
#<header></header>
#<div></div>
#<map></map>

Expected behavior

It should produce the following output...

<div id="main"></div>
<div id="header"></div>
<div id="div"></div>
<div id="map"></div>

Interesting (#main^#header^#div^#map) produces expected outcome.

Support for completion in .jsx files

Installed product versions

• Visual Studio: [example 2017 Enterprise]
• This extension: [example 1.1.21]

Description

No Completion for html in jsx files.

Steps to recreate

create a .jsx file
add html,
add zen code
press tab

Current behavior

tab adds a space, nothing else

Expected behavior

Should work as shown in HTML files.

"#header>ul#menu>li*6>a^^^div#main" doesn't function right.

Installed product versions

• Visual Studio: Community 2017
• This extension: 1.2.11

Description

This code doesn't function right:
#header>ul#menu>li*6>a^^^div#main

Steps to recreate

1. Run "#header>ul#menu>li*6>a^^^div#main" under "body"

Current behavior

When you run the code, it should be like this.

<div id="header">
	<ul id="menu">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>
<div id="main"></div>
<div id="main"></div>
<div id="main"></div>
<div id="main"></div>
<div id="main"></div>
<div id="main"></div>

I think that it's happened by the bug of "^."

Expected behavior

I want it to show this code.

<div id="header">
	<ul id="menu">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>
<div id="main">

Undo Command - (Ctrl + Z) Doesn't work after using ZenCoding "syntax" (like emmet)

Installed product versions

• Visual Studio: [Community 2022 Version 17.0.0]
• This extension: [example 1.2.17]

Description

Undo Command - (Ctrl + Z) DOESN'T work after using ZenCoding "syntax" (like emmet)
Save Command - (Ctrl + S) works after using ZenCoding "syntax" though

Steps to recreate

1. Open a .cshtml file
2. type .random then Tab (output: <div class="random"></div> )
3. do an Undo (Ctrl + Z)

Current behavior

The modified file doesn't undo. It just stays as it is. But, when I close the modified .cshtml file (saved or unsaved), and reopen it, I can now use undo (Ctrl + Z), but when I use ZenCoding "syntax" (like emmet), undo command will not work again.

When I type <div class="random"></div> manually, I am able to undo it though.

Expected behavior

To undo changes made in a .cshtml file.

`tr>th` works incorrectly

Installed product versions

• Visual Studio: 2017 Community 15.6.7
• This extension: 1.1.21

Description

tr>th works incorrectly

Steps to recreate

1. Type tr>th or tr>td .
2. Press Tab key.

Current behavior

tr><th></th>

Expected behavior

<tr>
         <th></th>
</tr>

Note

tr>th*1 works fine

Incorrect expansion

Installed product versions

• Visual Studio: 2017 Community - 15.2 (26430.6)
• extension: 1.2.11

Description

meta attributes (or probably all containing = as value) are not correct expanded

Steps to recreate

1. Enter meta[name="viewport" content="width=device-width"]
2. expand with Tab

Current behavior

output:
<meta name="viewport" content="" width" />

Expected behavior

<meta name="viewport" content="width=device-width" />

Extension doesn't work inside a razor code block

Installed product versions

• Visual Studio: 2017 Professional version 15.4.1
• This extension: 1.2.11

Description

It doesn't work inside a razor code block, for example inside a @foreach(...){} or inside a @using(Html.BeginForm(){} block

Steps to recreate

1. create a @foreach block.
2. type h1.
3. Press TAB button.

Current behavior

You'll receive a tab space.

Expected behavior

It should generate a <h1></h1> as usual.

ZenCoding with .js files

Is possible use ZenConding autocomplete on .js files?

Does not expand some valid input

Installed product versions

• Visual Studio: Community 2022 (64-bit) Version 17.0.5
• This extension: 1.2.20

Description

Does not expand some valid input.

Steps to recreate

Tpye div>p and press tab.

Current behavior

Expands to: div><p></p>.
That is, the div tag is not expanded but the p tag is expanded.

Expected behavior

Should expand to:

<div>
    <p></p>
<div>

Additional info

Typing div>p*2 and pressing tab works as expected. Infact, div>p*1 also works expected.

Support .tsx files

Hi,

It would be great!

Thanks!

Extension cannot be installed on VS2017

Installed product versions

• Visual Studio: 2017 Professional v15.9.43
• This extension: 1.2.20

Description

vsix installer stops at the beginning with error:
Extension cannot be installed for the currently installed products.
(wording may vary - I translated from German)

Steps to recreate

1. doubleclick vsix file

Logfile Content VSIXInstaller_[...].log

25.01.2022 13:33:49 - Supported Products :
25.01.2022 13:33:49 - Microsoft.VisualStudio.Community
25.01.2022 13:33:49 - Version : [16.0,17.0)
25.01.2022 13:33:49 - Microsoft.VisualStudio.Community
25.01.2022 13:33:49 - Version : [17.0,18.0)
[...]
25.01.2022 13:33:49 - VSIXInstaller.NoApplicableSKUsException: