CSS Intellisense not working for MVC 4 project in Visual Studio 2012 Ultimate

Question

Have created a brand new Visual Studio 2012 Ultimate SP2 MVC4 project but unable to get CSS class selector intellisense to work?

When I type <p class="m" .... I should get the class "myClass" appearing in intellisense dropdown but nothing happens.

The file I have listed below is: \Views\Shared\_Layout.cshtml

Any Ideas ?

Edit: Have re-installed VS2012 on brand new windows 7 system (running on Mac OSX parallels 8) and still acting in the same way. Also seems the same for MVC 3 projects.

Extensions installed:

Answer 1

Try adding Web Essentials 2012 extension for Visual Studio 2012: http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6?SRC=VSIDE

And/Or

Try adding Microsoft Web Developer Tools extension.

I have both of these and using your same example the intellisense works like a charm.

Answer 2

I tried all the above mentioned remedies and suggestions. None of these worked in my environment. According to Microsoft (Under Microsoft connect's bug id 781048), they have not implemented CSS class intellisense for MVC/Razor files but are working on including this in a future release.

I have a 10 minute webcast example of extending VS2012 intellisense that adds one solution that will add intellisense to your VS2012 environment: a Visual Studio Intellisense Extension

The webcast uses MEF to extend Visual Studio to add an intellisense completion source that scans the currently loaded project for CSS class names to add as an intellisense completion set. Here is the css completion source class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel.Composition;
using Microsoft.VisualStudio.Language.Intellisense;
using Microsoft.VisualStudio.Text;
using Microsoft.VisualStudio.Text.Operations;
using Microsoft.VisualStudio.Utilities;
using EnvDTE;
using System.Text.RegularExpressions;
using System.Configuration;
using System.Collections.Specialized;

namespace CssClassIntellisense
{
   internal class cssClassList
   {
      public string cssFileName { get; set; } //Intellisense Statement Completion Tab Name

      public HashSet<string> cssClasses { get; set; }
   }

   internal class CssClassCompletionSource : ICompletionSource
   {
    private CssClassCompletionSourceProvider m_sourceProvider;
    private ITextBuffer m_textBuffer;
    private List<Completion> m_compList;
    private Project m_proj;
    private string m_pattern = @"(?<=\.)[A-Za-z0-9_-]+(?=\ {|{|,|\ )";
    private bool m_isDisposed;

    //constructor
    public CssClassCompletionSource(CssClassCompletionSourceProvider sourceProvider, ITextBuffer textBuffer, Project proj)
    {
        m_sourceProvider = sourceProvider;
        m_textBuffer = textBuffer;
        m_proj = proj;
    }

    public void AugmentCompletionSession(ICompletionSession session, IList<CompletionSet> completionSets)
    {

        ITextSnapshot snapshot = session.TextView.TextSnapshot;
        SnapshotPoint currentPoint = (SnapshotPoint)session.GetTriggerPoint(snapshot);

        if (TargetAttribute.Inside(currentPoint))
        {
            var hash = new List<cssClassList>();
            //read any .css project file to get a distinct list of class names
            if (m_proj != null)
                foreach (ProjectItem _item in m_proj.ProjectItems)
                {
                    getCssFiles(_item, hash);
                }

            //Scan Current Editor's text buffer for any inline css class names 
            cssClassList cssclasslist = ScanTextForCssClassName(
                    "Inline", snapshot.GetText());

            //If file had any css class names add to hash of files with css class names
            if (cssclasslist != null)
                hash.Add(cssclasslist);

            var _tokenSpanAtPosition = FindTokenSpanAtPosition(session.GetTriggerPoint(m_textBuffer), session);

            foreach (cssClassList _cssClassList in hash)
            {
                m_compList = new List<Completion>();
                foreach (string str in _cssClassList.cssClasses.OrderBy(x => x))  //alphabetic sort
                    m_compList.Add(new Completion(str, str, str, null, null));

                completionSets.Add(new CompletionSet(
                    _cssClassList.cssFileName,    //the non-localized title of the tab 
                    _cssClassList.cssFileName,    //the display title of the tab
                    _tokenSpanAtPosition,
                    m_compList,
                    null));

            }
        }
    }

    private ITrackingSpan FindTokenSpanAtPosition(ITrackingPoint point, ICompletionSession session)
    {
        SnapshotPoint currentPoint = (session.TextView.Caret.Position.BufferPosition) - 1;
        ITextStructureNavigator navigator = m_sourceProvider.NavigatorService.GetTextStructureNavigator(m_textBuffer);
        TextExtent extent = navigator.GetExtentOfWord(currentPoint);
        return currentPoint.Snapshot.CreateTrackingSpan(extent.Span, SpanTrackingMode.EdgeInclusive);
    }


    private void getCssFiles(ProjectItem proj, List<cssClassList> hash)
    {
        foreach (ProjectItem _item in proj.ProjectItems)
        {
            if (_item.Name.EndsWith(".css") &&
                !_item.Name.EndsWith(".min.css"))
            {
                //Scan File's text contents for css class names
                cssClassList cssclasslist = ScanTextForCssClassName(
                    _item.Name.Substring(0, _item.Name.IndexOf(".")),
                    System.IO.File.ReadAllText(_item.get_FileNames(0))
                    );

                //If file had any css class names add to hash of files with css class names
                if (cssclasslist != null)
                    hash.Add(cssclasslist);
            }
            //recursively scan any subdirectory project files
            if (_item.ProjectItems.Count > 0)
                getCssFiles(_item, hash);
        }
    }

    private cssClassList ScanTextForCssClassName(string FileName, string TextToScan)
    {

        Regex rEx = new Regex(m_pattern);
        MatchCollection matches = rEx.Matches(TextToScan);
        cssClassList cssclasslist = null;

        if (matches.Count > 0)
        {
            //create css class file object to hold the list css class name that exists in this file
            cssclasslist = new cssClassList();
            cssclasslist.cssFileName = FileName;
            cssclasslist.cssClasses = new HashSet<string>();

        }

        foreach (Match match in matches)
        {
            //creat a unique list of css class names
            if (!cssclasslist.cssClasses.Contains(match.Value))
                cssclasslist.cssClasses.Add(match.Value);
        }

        return cssclasslist;
    }

    public void Dispose()
    {
        if (!m_isDisposed)
        {
            GC.SuppressFinalize(this);
            m_isDisposed = true;
        }
    }
}

}

As an FYI, you can also address this issue using Resharper. But that is a 3rd party product that needs to be purchased for Visual Studio