在 Eclipse 中使用 Haml 和 Sass

Posted 2023-03-06

【中文标题】在 Eclipse 中使用 Haml 和 Sass

【英文标题】：Using Haml & Sass with Eclipse

【发布时间】：2010-12-01 05:44:57

【问题描述】：

是否有任何 Eclipse 插件可以添加语法高亮和其他用于编辑 Haml 和 Sass 的细节？ Google 搜索似乎只指向dead project on lucky-dip.net。

注意：我最感兴趣的是 Sass。在 Eclipse 中仅使用 Sass（或类似 less 的东西）的解决方案将满足我的需求。

另外，我正在使用适用于 Eclipse 的 App Engine 插件为 Google App Engine (Java) 进行开发。所以切换到另一个 IDE 不是一种选择。

---

更新：所以我现在使用Pascal's answer 进行语法突出显示，并且我已经安装了Ruby 和Compass 来将sass 编译成css。

但是我知道syntax of sass will be changing with 2.4，所以我仍然希望 Aptana 附带的 Haml 和 Sass 编辑器能够正常工作。当我尝试使用它们时，它们抛出异常并且不会显示文件。我很想知道这是因为我错误配置了 Aptana 还是编辑器中的实际错误。

我也非常对任何编译与 Ecplise 集成的 Sass 的方式感兴趣，这样我就不必运行与它分开的东西。 （或将 Sass/Compass 放入 Ecpise 构建过程的一种方式。）

【问题讨论】：

对于感兴趣的人，我从来没有得到任何令人满意的工作。我现在使用 Emacs 和 scss-mode 和 sassc :)

【参考方案1】：

那么，Aptana 呢？根据Haml/Saas Syntax Highlighting in Aptana/Eclipse 博文：

最近，我一直在使用Haml in 我的一些 Rails 项目。它简直 使您的视图清晰易读。 我遇到的一个问题是语法 在我最喜欢的 IDE 中突出显示， Aptana Studio。 Haml syntax highlighting support 已停止 不久前还有更多问题 在 Aptana 最近更新后提出。

经过一番研究，我发现了一个 Max Kostovetski 发布的解决方案， Haml Google 组的成员。现在，到 步骤：

将以下文件下载到您的硬盘：> http://haml.googlegroups.com/web/haml_lexer.lxr http://haml.googlegroups.com/web/haml.col http://haml.googlegroups.com/web/sass_lexer.lxr http://haml.googlegroups.com/web/sass.col 从 AptanaEclipse“窗口”菜单中，选择“首选项...” 在首选项窗口中，选择“编辑器”>“通用文本” 按“添加...”添加新的文件扩展名：*.haml 和 *.sass 对于每个新扩展，单击它并按“浏览...” 选择正确的词法分析器文件 (*.lxr) 要着色，请按“导入...”以导入 *.col 文件 按“确定” 欣赏 Haml 的美景

PS：请参阅原始博客文章，因为它提供了最新链接。

注意：这可以与Aptana RadRails Eclipse plugin 以及 Aptana Studio 一起使用

更新：在撰写本文时，RadRails 和 Studio 似乎支持 Haml 和 Sass，因此现在可能没有必要遵循上述步骤。

---

要在 Eclipse 中以“集成”方式编译 SaaS，您可以只使用 外部工具（运行 > 外部工具）。另一个更详细的选择是将“Program Builder”添加到您项目的Builders 中，如blog post。当然，所描述的解决方案需要适应 Saas，但其背后的原则似乎适用。警告：我自己没有实现它，这只是一个想法，我什至不确定它是否有意义。

【讨论】：

我正在为 Google App Engine (Java) 开发，使用适用于 Eclipse 的 App Engine 插件。切换到 Aptana 不是一种选择。

另外，我不确定为什么那篇文章提到了 Eclipse，其中的说明毫无意义，而且 lxr/col 文件似乎也不适用于 Eclipse。

嗯...我建议使用 Aptana Eclipse 插件，而不是独立版本。那么这些说明确实非常接近适用于 Eclipse 的mail-archive.com/[e-mail]/msg01886.html。我承认我自己没有对此进行测试，但我不明白为什么它在 Eclipse 中没有意义。请让我更新，我很好奇。

我没有意识到 Aptana 也是一个 Eclipse 插件。在安装 Aptana RadRails 插件时，可以选择安装 Haml 和 Sass 编辑器。所以这可能正是我所需要的，但是我想我可能会因为编辑器抛出异常而搞砸了安装。

这些使用 .lxr 和 .col 文件添加语法高亮的说明在 Eclipse Helios 中不再准确。有什么明显改变了，也许是 XText 的东西？

【参考方案2】：

请注意，最新的EclipseColorer 实际上同时支持 HAML 和 SASS。如果您不需要功能齐全的 Aptana IDE，而只是寻找编辑器，这可能是一个不错的替代选择。

EclipseColorer 还为您提供更好的语法混合支持：HAML 中的其他语言在其语法方面突出显示（ruby、javascript、css 甚至 sass 的混合）。

【讨论】：

感谢 Igor，您的插件看起来比 Aptana 更适合我的需求。下次我在做那个项目时，我得看看它。

【参考方案3】：

虽然似乎还没有任何 HAML 或 SASS 语法高亮工具，但您可能需要考虑通过一些可用的插件将 VIM（它确实支持 HAML 语法高亮显示）引入 Eclipse . Eclim 可能是一种可能性（虽然，我没有使用它 - 只是试图提供其他选择）。

另一种选择是采用现有的 Eclipse 语法高亮插件并为 Sass 和/或 HAML 添加语法高亮。像Eclipse Colorer 这样的东西可能值得研究。

【参考方案4】：

我知道这是一个老问题，但对于像我这样刚接触 SASS 和 Compass 的人来说，我刚刚安装了 Aptana Studio 3，它现在支持 .scss、.sass 和 .haml。享受吧。

【参考方案5】：

Aptana 给我带来了太多问题，所以经过大量搜索（找到了这个帖子），我发现 LiClipseText (https://marketplace.eclipse.org/content/liclipsetext)

它是一个插件，除其他外，还为 SASS/SCSS 文件提供语法高亮。它似乎有效，并且具有“语法突出显示（基于 LiClipse、TextMate 或 SublimeText）”，因此可能是相当可配置的（我没有经常使用它，但基本的语法突出显示功能对我有用，这不仅仅是Eclipse WST CSS 编辑器可以处理 SCSS 文件）。

它是我没用过的商业 LiClipse 插件 (https://marketplace.eclipse.org/content/liclipse) 的开源编辑器组件。

【参考方案6】：

我发现 Igor 的回答中的 Colorer 插件很有趣，但我使用 .scss 文件扩展名，它仅适用于 .sass 文件。以下是使其支持 .scss 文件扩展名的方法：

首先正常安装插件。在 Eclipse 的帮助菜单中选择 Install New software 并添加以下存储库：http://colorer.sf.net/eclipsecolorer。现在选择这个存储库，您应该会看到 Eclipse Colorer 安装选项。 AFAIK 没有拖动安装选项。

安装后，转到 Eclipse 插件目录中的 Colorer 插件文件夹。就我而言，这是eclipse/plugins/net.sf.colorer_0.9.9/。在那里你必须修改 3 个文件：

colorer/hrc/common.jar colorer/hrc/proto.hrc /plugin.xml

在执行以下任何操作之前，请备份文件夹中的所有文件，以便在出现问题时恢复它们。

修改common.jar

将 common.jar 解压到一个空文件夹。这是作为任何普通的 tar.gz 文件完成的。提取后，您必须修改其中的 2 个文件：

复制inet/haml.hrc 中的第 53 行和第 53 行并将其更改为 scss。结果应如下所示：

<block start='/^((\s\s)*):(sass)/' end='/^\M (\s*$|\y1\s)?! /ix' region='def:Insertion' region01='def:Outlined'
    region00='def:PairStart' region10='def:PairEnd' content-priority='low' scheme='sass:sass'/>
<block start='/^((\s\s)*):(scss)/' end='/^\M (\s*$|\y1\s)?! /ix' region='def:Insertion' region01='def:Outlined'
    region00='def:PairStart' region10='def:PairEnd' content-priority='low' scheme='scss:scss'/>

现在将inet/sass.hrc 复制到inet/scss.hrc 并更改相关行。生成的scss.hrc 应如下所示：

<?xml version="1.0" encoding='Windows-1251'?>
<!DOCTYPE hrc PUBLIC "-//Cail Lomecb//DTD Colorer HRC take5//EN"
  "http://colorer.sf.net/2003/hrc.dtd">
<hrc version="take5" xmlns="http://colorer.sf.net/2003/hrc"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://colorer.sf.net/2003/hrc http://colorer.sf.net/2003/hrc.xsd">

  <type name="scss">

    <annotation>
     <documentation>
      SCSS Sassy CSS 
     </documentation>
     <contributors><![CDATA[
     Igor Russkih irusskih at gmail dot com
     ]]></contributors>
    </annotation>

    <region name="ClassSelector" parent="def:TypeKeyword"/>
    <region name="IDSelector" parent="def:Keyword"/>
    <region name="IncludeMixin" parent="def:Label"/>

    <scheme name='PropertyNames'>
      <regexp match="/(\$)([\w\d\-]+)/" region='def:Var'/>
      <inherit scheme='css:PropertyNames'/>
    </scheme>

    <scheme name="PropertyWrapper">
       <block start="/~/" end="/(:|\s|$)/" scheme="PropertyNames" region10="def:Symbol"/>

       <regexp match="/(\$)([\w\d\-]+)/" region='def:Var'/>

       <inherit scheme="css:Property"/>
    </scheme>

    <scheme name="scss">
       <!-- property value after colon -->
       <block start="/\M([\$\w\d\-]+)\s*(:)/" end="/\M([\x22\x27]|$)/"
              scheme="PropertyWrapper" region02="def:Symbol"
       />
       <block start="/(:)\s*\M([\w\d\-]+)?/" end="/\M([\x22\x27]|$)/"
              scheme="PropertyWrapper" region02="def:Symbol"
       />
       <regexp match="/^ \s* \M[\.\#\=\@\!] (?def:Outlined[\w\d\-]+ ) /x" />

       <regexp match="/ \. (?ClassSelector[\w\d\-]+ ) /x" />
       <regexp match="/ \# (?IDSelector[\w\d\-]+ ) /x" />
       <regexp match="/ [\=\+] (?IncludeMixin[\w\d\-]+ ) /x" />

       <regexp match="/[\(\)&apos;&quot;]/" region='def:Symbol'/>

       <regexp match="/\/\/.*$/" region='def:Comment'/>

       <regexp match="/\@(import|extend|mixin)/" region='def:Keyword'/>

    </scheme>

  </type>
</hrc>
<!-- ***** BEGIN LICENSE BLOCK *****
   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   -
   - The contents of this file are subject to the Mozilla Public License Version
   - 1.1 (the "License"); you may not use this file except in compliance with
   - the License. You may obtain a copy of the License at
   - http://www.mozilla.org/MPL/
   -
   - Software distributed under the License is distributed on an "AS IS" basis,
   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
   - for the specific language governing rights and limitations under the
   - License.
   -
   - The Original Code is the Colorer Library.
   -
   - The Initial Developer of the Original Code is
   - Igor Russkih <irusskih at gmail dot com>
   - Portions created by the Initial Developer are Copyright (C) 2010
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s): 
   -
   - Alternatively, the contents of this file may be used under the terms of
   - either the GNU General Public License Version 2 or later (the "GPL"), or
   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
   - in which case the provisions of the GPL or the LGPL are applicable instead
   - of those above. If you wish to allow use of your version of this file only
   - under the terms of either the GPL or the LGPL, and not to allow others to
   - use your version of this file under the terms of the MPL, indicate your
   - decision by deleting the provisions above and replace them with the notice
   - and other provisions required by the LGPL or the GPL. If you do not delete
   - the provisions above, a recipient may use your version of this file under
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->

在此之后，在您提取 common.jar 的文件夹中运行以下命令以重新创建 jar 文件：

jar cf common.jar *

然后用这个替换原来的jar文件。

其他文件

现在，在 /plugin.xml 第 37 行包含 scss 扩展：

extensions="xml,xsd,xsl,dtd,hrc,hrd,html,htm,xhtml,rhtml,erb,yml,haml,sass,scss,css,asp,aspx,jsp,fo,svg,dbk, docbook,jhtml,jspf,php,php3,php4,phtml,sgm,sgml,shtm,shtml"

最后，复制colorer/hrc/proto.hrc 中的第 200-203 行。结果应如下所示：

<prototype name="sass" group="inet" description="SASS">
  <location link="jar:common.jar!inet/sass.hrc"/>
  <filename>/\.(sass)$/i</filename>
</prototype>
<prototype name="scss" group="inet" description="SCSS">
  <location link="jar:common.jar!inet/scss.hrc"/>
  <filename>/\.(scss)$/i</filename>
</prototype>

在重启 eclipse 之后，你应该有 .scss 文件的语法高亮显示。