Is there any way to get HTML syntax highlighting working for JsRender templates (as part of an aspx file) in Visual Studio 2010?
My aspx files typically look like this:
<%# Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test._Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jsrender.js"></script>
<script type="text/javascript" src="Scripts/Default.js">
</head>
<body>
<script id="defaultTemplate" type="text/x-jsrender">
<div>
<table>
<thead>
<tr>
<th>Customername</th>
<th>Contact</th>
<th>Url</th>
<th>Details</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{{for CustomerData}}
<tr>
<td>{{>Name}}</td>
<td>{{>Contact}}</td>
<td>{{>Url}}</td>
<td>Click</td>
<td>Click</td>
</tr>
{{/for}}
</tbody>
</table>
<div id="navContainer">Next</div>
</div>
</script>
</body>
There is no support for JsRender syntax highlighting in VS 2010, but if you have VS 2012, there is a a Web Essentials plugin which adds syntax highlighting within script blocks (of type other than text/javascript). It also provides hightlighting on {{foo }} tags.
In a future release it will likely be built in...
The Web Essentials plugin download is here
Update: VS 2012 and VS 2013 now include syntax highlighting for JsRender tempates.
Related
I'm developing a web app in Vue 3, with components described in Javascript files, containing HTML templates in Javascript string literals, for example:
app.component('my-alert', {
props: {
status: String,
content: String,
},
template:
`<div class="alert" :class="'alert-'+status" role="alert">
{{content}}
</div>`
})
My IDE is Visual Studio 2019. I'm aware of plugins for Visual Studio Code which enable that IDE to highlight HTML syntax in JS string literals like the above. (See this question and this other question for example.) What I want to know is, are there any similar plugins for Visual Studio 2019? If there are more than one, are any of them especially designed for Vue.js development?
Try es6-string-html extension for Visual Studio Code
Comment /*html*/ before your string
In my master layout file, I have the HTML5 doctype:
<!DOCTYPE html>
But, in one of my views, I have implemented a Twitter button, and Visual Studio is complaining. Code:
Tweet #Google
The warning I get:
Warning Validation (XHTML 1.0 Transitional): Attribute 'data-size' is not a valid attribute of element 'a'.
I'm using ASP.NET MVC3 and Visual Studio 2010.
Came across this question whilst looking for the answer. The solution seems to change the validation type by going to Tools -> Options -> Text and choosing 'HTML5' as per image below
You may need VS210 Tools update to have that as an available option.
Whenever I type out tags that don't require an end tag, Visual Studio adds a forward slash to it, as if they were XHTML.
I think this is unclean and annoying, and I'm hoping anyone can tell me how to fix or work around this issue.
It even happens when I complete <!DOCTYPE html with a >, and it'll form <!DOCTYPE html />.
For completeness I'm posting this answer. Although we're in 2014 now, with Visual Studio 2013 and HTML5 is getting more and more supported by the major browsers, Visual Studio still behaves the same as ... like always?
The option is just a bit different than in 2010 I assume (based on accepted answer).
What you could do is disable the auto closing tag option in Visual Studio.
Go to Tools >> Options >> Text Editor >> HTML >> Formatting
Uncheck the "Auto insert close tag" option.
This will now allow you to type <br> (for example) and it won't auto-complete it as <br />
For Visual Studio 2012, go to Tools -> Options -> Text Editor -> HTML -> Formatting and click Tag Specific Options.
Under Default Settings -> Client tag does not support contents, set Closing tag to No closing tag.
Is there any add-in for vs 2010 which can format html? ReSharper can't do it.
For example. I wanna get something like this
<tr>
<td>Header1</td>
<td>Header2</td>
</tr>
instread of
<tr>
<td>Header1</td>
<td>Header2</td>
Just hit CTRL+K, CTRL+D (Format Document - works for almost any document type).
Consider the feature in Visual Studio 2010 for snippets in the HTML Source view of a web page.
type a control name in plaintext with no markup or brackets!
... e.g. hyperlink.
Then hit Tab
Your web control has been auto-completed for you. It's up to you to fill in the other details that you need.
This works for form as well:
<form action="default.aspx" method="post">
</form>
This looks like a real time saver. This is supported in WebForms and ASP.NET MVC projects.
What other snippets are available in Visual Studio 2010 in the Source view of a page?
For the authoritative list of snippets, check out the VS2010 installation folders where the snippets are stored:
C:\Program Files\Microsoft Visual Studio 10.0\Web\Snippets\HTML\1033
There is one folder for ASP.NET and one for plain HTML snippets.
Also, if you use jQuery a lot, there is a set of jQuery snippets that you can add to Visual Studio as well.
Here are a ton (100's) of the short cuts in Visual Studio right from MSDN:
http://msdn.microsoft.com/en-us/library/da5kh0wa.aspx
The one thing that has been around forever but a lot of people forget about is block selection done by holding down the ALT key and use the mouse to select a block of text. Great when you want to copy/cut/delete a bunch of code that is lined up but you don't want the whole line.
Yeah, this is a really cool new set of snippets in VS2010. Here are the articles I used to learn it:
Walkthrough: Using HTML
Snippets
Using HTML Code Snippets in Visual
Studio 2010