8

I am using the latest Eclipse version. Right now I am coding with Javascript, jQuery, HTML, and CSS. How do I get autocomplete (show all available classes defined in CSS) for classes, which I have defined in CSS, displayed in HTML?

I have a class called "display" in my CSS file.

file.css:

.display {
background:green;
}

How to get the display class suggested with autocompletion?

HTML: enter image description here

What kind of plug-in/addon would I need?

3
  • Posssible duplicate of stackoverflow.com/questions/7900575/… Commented Apr 13, 2017 at 10:10
  • the other question has no solution. It might help you to get the word "class" autocompleted when you start writing "cl" and press ctrl+space, but not the available classes, which are defined in a .css file. Commented Apr 13, 2017 at 11:09
  • Please refer this bug in eclipse. bugs.eclipse.org/bugs/show_bug.cgi?id=500859 Commented Apr 17, 2017 at 21:29

2 Answers 2

9
+150

The default WTP plugin bundled with the Eclipse installation doesn't support this. You will have to install an extension plugin (WTP Web resources).

Go to Help -> Install New Software and add the following URL in the 'Work with' text box and press Add.

http://oss.opensagres.fr/eclipse-wtp-webresources/1.1.0/

After a while, you'll be presented with a check list. Check the plugin and click Install.

After the installation is complete, restart Eclipse. Then open up an HTML file and add a link to a CSS file like in the following example:

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body >




</body>
</html>

sample.css

.one { padding: 10px; } 
.two { padding: 20px; }

Now add an element within the body of the HTML file - e.g. div - and add a class="" attribute. Pressing Ctrl+Space within the double quotes will bring up the content assist window showing you all the available classes from the linked CSS file.

content assist window

Sign up to request clarification or add additional context in comments.

3 Comments

I will check this out and report back!
it works, but in the beginning, it did not work for already existing projects. I had to create first a new project and suddenly it worked for all projects.
Glad I could help :)
0

Bring up the Properties dialog for your web project and you can change the default CSS profile for that project on the Web Content Settings page. If the CSS file is not in Your web project yet, or if you don't want to use the project default, you can also set it using the file's Properties dialog (also Web Content Settings page).. then it will Work.

Since Eclipse is not File based. Its Project Based.

1 Comment

Sir, Do you agree on this bug?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.