在Eclipse中的HTML JavaScript jQuery中自动完成von可用的CSS类

Question

I am using the latest Eclipse version. 我使用的是最新的Eclipse版本。 Right now I am coding with Javascript, jQuery, HTML, and CSS. 现在我用Javascript，jQuery，HTML和CSS编写代码。 How do I get autocomplete (show all available classes defined in CSS) for classes, which I have defined in CSS, displayed in HTML? 我如何获得自动完成（显示CSS中定义的所有可用类）的类，我已在CSS中定义，以HTML格式显示？

I have a class called "display" in my CSS file. 我的CSS文件中有一个名为“display”的类。

file.css: file.css：

.display {
background:green;
}

How to get the display class suggested with autocompletion ? 如何获得自动完成建议的显示类？

HTML: HTML：

What kind of plug-in/addon would I need? 我需要什么样的插件/插件？

Answer 1

The default WTP plugin bundled with the Eclipse installation doesn't support this. 与Eclipse安装捆绑在一起的默认WTP插件不支持此功能。 You will have to install an extension plugin ( WTP Web resources ). 您必须安装扩展插件（ WTP Web资源）。

Go to Help -> Install New Software and add the following URL in the 'Work with' text box and press Add. 转到帮助 - >安装新软件，然后在“使用”文本框中添加以下URL，然后按添加。

http://oss.opensagres.fr/eclipse-wtp-webresources/1.1.0/ 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. 安装完成后，重新启动Eclipse。 Then open up an HTML file and add a link to a CSS file like in the following example: 然后打开一个HTML文件并添加一个CSS文件的链接，如下例所示：

sample.html 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 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. 现在在HTML文件的主体中添加一个元素 - 例如div - 并添加一个class =“”属性。 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. 在双引号内按Ctrl + Space将打开内容辅助窗口，显示链接的CSS文件中的所有可用类。

Answer 2

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. 打开Web项目的“属性”对话框，您可以在“Web内容设置”页面上更改该项目的默认CSS配置文件。 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. 如果CSS文件尚未在您的Web项目中，或者您不想使用项目默认值，您也可以使用文件的“属性”对话框（也是“Web内容设置”页面）进行设置..然后它将起作用。

Since Eclipse is not File based. 因为Eclipse不是基于文件的。 Its Project Based. 以项目为基础。

在Eclipse中的HTML JavaScript jQuery中自动完成von可用的CSS类

问题描述

2 个解决方案

解决方案1
7 已采纳 2017-04-21 18:46:27

sample.html sample.html

sample.css sample.css

解决方案2
0 2017-04-20 17:49:30

在Eclipse中的HTML JavaScript jQuery中自动完成von可用的CSS类

问题描述

2 个解决方案

解决方案1 7 已采纳 2017-04-21 18:46:27

sample.html sample.html

sample.css sample.css

解决方案2 0 2017-04-20 17:49:30

解决方案1
7 已采纳 2017-04-21 18:46:27

解决方案2
0 2017-04-20 17:49:30