CODEWITHSUNDEEP
visual-studio-2012visual-studio-2013
Rowan Freeman
Rowan Freeman

Reputation: 16358

Why don't I get CSS class intellisense from CSS files?

One of the nice features of VS2012 was that when I'm editing an HTML (or .cshtml) file, it provided great intellisense.

When I start to type:

<a href="

The editor would open a prompt with "Pick URL..." and a list of possible options based on the current directory of the file.

Pick URL example

^ Visual Studio 2012

Furthermore, in VS2012 the editor would detect any referenced CSS file(s), like this:

<link rel="stylesheet" type="text/css" href="bootstrap.css" />

And would provide autocompletion of all CSS classes inside that file.

So if I type:

<div class="

I would be prompted with all Bootstrap3 classes automatically. Like this:

CSS class intellisense

^ Visual Studio 2012

However in VS2013 both of these features seem to be missing.

Now when I look for CSS classes I only get classes that I've already used inside the file:

VS2013 CSS completion

^ Visual Studio 2013

According to the articles HTML Editing Features in Visual Studio 2013 Preview and HTML Editing Features in Visual Studio 2013 RC by Microsoft, these issues seem to be touched on but are more aimed at the Release Candidate or beta versions of VS2013. I'm using VS2013 Ultimate 12.0.21005.1 REL with all the latest update that I'm aware of.

Why is VS2013 not detecting CSS files for class autocompletion and not prompting me for URLs when writing href=?

Upvotes: 11

Views: 28154

Answers (7)

codys-hole
codys-hole

Reputation: 193

The Html editor wouldn't show css intellisense for me unless the style was embedded in the page itself. What worked for me was opening the html file using the Html Form Editor. Right click on the file and select open with and then choose Html Form Editor. This is for Visual Studio 2013 Community Edition.

Upvotes: 13

Leon Faircloth
Leon Faircloth

Reputation: 1

The solution identified above for VS2012 will work with a slight variation. You must include the folder like this within the css reference for the stylesheet. Once you add this and save the page the intellisense will work. This not the correct solution just a work around the bundling issue.

Upvotes: 0

Crismogram
Crismogram

Reputation: 936

This also happened to me when I create a web application in Visual Studio 2013, VS created automatically this code in the header but intellisense is sure not working for css classes. 

<webopt:bundlereference runat="server" path="~/Content/css" />

What I did is just to manually link all my css one by one and can probably delete them after development.

<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" /

It sure did the trick but I was hoping they will fix on the next update.

Upvotes: 3

basp
basp

Reputation: 51

After intellisense worked fine for a few weeks, I just ran into the same problem as the OP. Uninstalling and re-installing packages using NuGet did not resolve it.

Deleting the bin and obj directories from the project and the .suo file from the solution directory resolve it.

Upvotes: 5

roland
roland

Reputation: 900

As Rowan Freeman wrote:

In Visual Studio 2013, CSS files that are included in your project/solution will now automatically be parsed and all HTML documents will gain CSS class intellisense.

But:

ASPX and other WebForm files using the legacy editor do not benefit from this implementation in VS 2013, but may adopt the new system in future releases.

But you can still use this feature as follows:

  1. right click on the "default.aspx" file in the Solution Explorer
  2. "open with"
  3. select "HTML Editor"
  4. "ok"

Upvotes: 2

Rowan Freeman
Rowan Freeman

Reputation: 16358

This was a change between Visual Studio 2012 and Visual Studio 2013.

Previously, simply opening a file in Visual Studio 2012 (not a solution, just an HTML file) and using

<link rel="stylesheet" href="bootstrap.css" />

in the HTML file meant that Visual Studio would read inside the CSS file and give CSS class intellisense. Microsoft abandoned this approach, because:

it failed to work in cases where files were included dynamically, or where ASP.NET Bundling and Minification was utilized

[Source]

In Visual Studio 2013, CSS files that are included in your project/solution will now automatically be parsed and all HTML documents will gain CSS class intellisense.

Upvotes: 7

James K
James K

Reputation: 925

I had the same problem.

I have a Master page that contains the link to bootstrap - 

<link href="../css/bootstrap.css" rel="stylesheet" />

It was working before, which is why this was puzzling, and furthermore the website successfully uses the bootstrap CSS - it's just the intellisense feature that wasn't working.

I open the page that uses the Master page, and then click on VIEW, then MANAGED STYLES. It displayed the bootstrap.css with a cautionary sign next to it. When I hover over it said it could not find ../css/bootstrap.css.

So to fix the problem I changed the link in the Master page to use a tilde instead of periods:

<link href="~/css/bootstrap.css" rel="stylesheet" />

Now all of the bootstrap CSS items appear in Manage Styles, and my intellisense is working.

Upvotes: 2

Related Questions