Autocomplete von available CSS classes in HTML JavaScript jQuery in Eclipse

2018-07-04 11:41:19

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: 在这里输入图像描述

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

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 - eg 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.

内容辅助窗口

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.

链接地址: http://www.djcxy.com/p/96034.html

上一篇: 通过pytesseract＆PIL提高文本识别的准确性

下一篇: Autocomplete von HTML中可用的CSS类JavaScript中的jQuery在Eclipse中