在Eclipse中使用Haml和Sass

40
有没有适用于eclipse的插件,可以为编辑HamlSass添加语法高亮和其他好处?谷歌搜索似乎只指向lucky-dip.net上的死项目
注意:我最感兴趣的是Sass。在Eclipse中仅使用Sass(或类似于less的东西)的解决方案将满足我的需求。
另外,我正在为Google App Engine(Java)开发,使用Eclipse的App Engine插件。因此,切换到另一个IDE不是选项。

更新:我现在使用Pascal的答案实现了语法高亮,并安装了RubyCompass将Sass编译成CSS。

然而,我知道Sass 2.4的语法将会改变,所以我仍想让Aptana附带的Haml和Sass编辑器工作。当我尝试使用它们时,它们抛出异常并且无法显示文件。我想知道这是因为我没有正确配置Aptana还是编辑器中存在实际的bug。

我也非常感兴趣能否有一种与Ecplise集成的编译Sass的方式,这样我就不必从其他地方运行它了。(或者一种将Sass/Compass放入Ecplise构建过程中的方法。)


对于感兴趣的人,我从未成功地让任何东西令人满意。我现在使用带有 scss-modesassc 的 Emacs :) - Sam Hasler
6个回答

28

好的,那么Aptana呢?根据在Aptana/Eclipse中使用Haml/Saas语法高亮博客文章所述:

最近,我在一些我的Rails项目中使用Haml。它可以使您的视图更加清晰易读。我遇到的一个问题是,在我喜欢的IDE Aptana Studio 中进行语法突出显示。 Haml的语法突出显示支持已经停止了一段时间,而且在Aptana最近的更新之后出现了更多问题。 经过一些研究,我找到了Haml Google组的成员Max Kostovetski发布的解决方案。现在,按照以下步骤操作:
  1. 将以下文件下载到您的硬盘:>
  2. AptanaEclipse的“Window”菜单中选择“Preferences...”
  3. 在首选项窗口中,选择“Editors”>“通用文本”
  4. 按“添加...”以添加新的文件扩展名:*.haml*.sass
  5. 对于每个新扩展名,单击它并按“浏览...”以选择正确的词法分析器文件(*.lxr
  6. 对于颜色设置,按“导入...”以导入*.col文件
  7. 按“确定”
  8. 享受您的Haml视图

PS: 请参考原博客文章,以获取最新链接。

Note: 这个可以与Aptana RadRails Eclipse插件以及Aptana Studio一起使用。

UPDATE: 在写作时,RadRails和Studio似乎支持Haml和Sass,因此现在可能无需按照上面的步骤操作。


为了在Eclipse中以“集成”的方式编译SaaS,您可以尝试使用一个“外部工具”(Run > External Tools)。另一个更详细的选项是将“程序构建器”添加到项目的“构建器”中,就像这篇博客文章中所述。当然,所描述的解决方案需要适应SaaS,但其背后的原则似乎适用。注意:我自己没有实现它,这只是一个想法,我甚至不确定它是否有意义。

我正在使用Eclipse上的App Engine插件开发Google App Engine (Java)应用程序。转换到Aptana不是一个选项。 - Sam Hasler
此外,我不确定为什么那篇文章提到了Eclipse,因为它的指示在Eclipse中没有任何意义,而且lxr/col文件似乎也无法在Eclipse中使用。 - Sam Hasler
嗯...我建议使用Aptana Eclipse插件,而不是独立版本。然后这些说明确实非常接近适用于Eclipse的http://www.mail-archive.com/haml@googlegroups.com/msg01886.html。我承认我没有亲自测试过这个,但我不明白为什么在Eclipse中没有意义。请让我知道最新情况,我很好奇。 - Pascal Thivent
我没有意识到Aptana也是一个Eclipse插件。在安装Aptana RadRails插件时,有一个选项可以安装Haml和Sass编辑器。所以这可能正是我需要的,但我认为我可能搞砸了安装过程,因为编辑器抛出了一个异常。 - Sam Hasler
2
使用.lxr和.col文件添加语法高亮的说明已经过时,自Eclipse Helios以来不再准确。显然有些变化,也许是XText的东西? - Jonathan Hanson
显示剩余2条评论

11

请注意,最新的EclipseColorer实际上支持HAML和SASS两者。如果您不需要完整功能的Aptana IDE,只是想要一个编辑器,那么它可能是一个很好的替代选择。

EclipseColorer还为您提供更好的语法混合支持:HAML内的其他语言会根据其语法进行突出显示(例如,Ruby、JavaScript、CSS甚至Sass的混合)。


谢谢Igor,你的插件看起来比Aptana更适合我的需求。下次我在这个项目上工作时会去看一下。 - Sam Hasler

1
Aptana给我带来了太多问题,所以经过大量搜索(其中找到了这个主题),我找到了LiClipseText插件(https://marketplace.eclipse.org/content/liclipsetext)。它是一个插件,提供了SASS/SCSS文件的语法高亮等功能。它似乎可以工作,并且有“语法高亮显示(基于LiClipse、TextMate或SublimeText)”,因此可能非常可配置(我没有玩得很多,但基本的语法高亮特性对我有效,这比Eclipse WST CSS编辑器对SCSS文件做的更多)。它是商业LiClipse插件的开源编辑器组件(https://marketplace.eclipse.org/content/liclipse),我没有使用过。

1

虽然目前还没有 HAML 或 SASS 语法高亮器,但你可能想考虑通过一些可用的插件将支持 HAML 语法高亮的 VIM 引入 Eclipse。Eclim 可能是一个选择(虽然我没有使用过,只是试图提供其他选择)。

另一个选择是使用已有的 Eclipse 语法高亮插件并为 Sass 和/或 HAML 添加语法高亮。类似 Eclipse Colorer 的东西可能值得一看。


1

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

首先按照正常方式安装插件。在Eclipse的帮助菜单中选择安装新软件,并添加以下存储库:http://colorer.sf.net/eclipsecolorer。现在选择此存储库,您应该看到Eclipse Colorer安装选项。据我所知,没有拖放安装选项。

安装后,进入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文件获得语法高亮显示。


1

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接