您对用于HTML,CSS和JavaScript开发的理想Sublime Text 2配置有何建议?

时间:2012-07-13 10:07:19

标签: javascript html css configuration sublimetext2

Sublime Text 2从一开始就不是一个功能齐全的编辑器,但似乎在幕后拥有巨大的力量。虽然网上有很多博客帖子给你一些乍看之下看起来都很有用的软件包,然后你会在编码过程中发现,你每天只使用一小撮必要的插件,而其余的一些甚至产生性能问题。

在Sublime Text 2中,几乎所有配置都是通过创建和编辑配置文件来完成的。也许你们中的一些人已经以这种方式设置了用于HTML,CSS和JavaScript开发的编辑器,可以共享配置文件以及有关安装内容(以及要阅读的文档)的分步说明。所以我的问题是:

如何自定义Sublime Text 2以便在HTML,CSS和JavaScript中进行编码以提高工作效率?

子的问题:

  • 您认为哪些特定设置更改必不可少(例如,未启用选项卡)?
  • 您觉得哪些包装必不可少?
  • 如何设置验证,实时语法检查和代码提示等功能?
  • 如何在两台计算机上同步编辑器(设置和包)(使用Dropbox或类似的东西)?

随意添加更多子问题。谢谢!

2 个答案:

答案 0 :(得分:10)

我不明白这个问题怎么会有一个单一的答案,因为它在很大程度上取决于你当时在做什么。

就个人而言,我喜欢Sublime,因为它具有灵活性和跨平台支持。对于许多任务而言,它已经足够用于没有任何更改的IDE。虽然我发现使用英国键盘,你必须更改默认的键组合才能打开和关闭控制台 - ctrl- \对我有用,ctrl-`是一个死键组合。

不确定你对Tabs的意思吗?是因为你打开了无干扰(全屏)设置吗?那让我很困惑,我更喜欢它。否则你肯定会默认获得标签。我喜欢分屏功能。

我最喜欢的是你可以关闭Sublime而不必保存东西!我倾向于将3或4个未保存的“文档”打开作为暂存 - 我永远不必担心丢失数据。

话虽如此,我想补充一些内容:

  • Sublime Linter - linting几种语言,包括JS和CSS。虽然默认设置需要稍微调整。
  • BracketHighlighter
  • ChangeTracker - 查看文件的哪些部分已更改
  • 一个shell实用程序(有几个可用)
  • Sublime v8& Node - 直接访问run和lint代码
  • SFTP用于直接远程访问文件
  • 一些Markdown插件 - 使用Markdown
  • 更好
  • DocBlockr - doc blocks的帮手
  • 差异插件
  • 自动备份
  • 咖啡脚本

所有这些(以及更多)都可以安装&使用Sublime Packages

进行管理

我还有一些TextMate捆绑插件,用于Jade和Apache conf文件等。

对于您的子问题:

您认为哪些特定设置更改必不可少(例如,未启用选项卡)?

  

如上所述更改控制台开关。更改JS linting的默认设置以允许更现代的样式。

您认为哪些包必不可少?

  

上面显示

如何设置验证,实时语法检查和代码提示等功能?

  

只需安装插件! JS linting对我的喜好有点过于激进,请看帖子末尾的设置。

如何将编辑器(设置和包)与机器同步(使用Dropbox或类似的东西)?

  

我没有。我真的不需要这个。我把它安装在两个盒子上,一个Windows和一个Linux。每个都有不同的用途,所以我不担心同步,我只是复制设置,如果我想要它们。 Dropbox同步很容易,但如果这是你想要的。只需将link Sublime设置文件夹放入dropbox文件夹即可。可能并不总是跨平台工作。


以下是更改的Sublime Linter设置:

"sublimelinter_fill_outlines": true,
"jshint_options":
{
    "evil": true,
    "regexdash": true,
    "browser": true,
    "wsh": true,
    "trailing": false,
    "sub": true,
    "latedef": true,
    "newcap": true,
    "regexp": true,
    "laxcomma": true
},

以下是控制台交换机的用户键映射更改:

[
    { "keys": ["ctrl+\\"], "command": "show_panel", "args": {"panel": "console", "toggle": true} }
]

答案 1 :(得分:6)

添加Zen Coding。 (现称为Emmet)

它让您有机会快速编写HTML代码并具有干净的结构。

http://code.google.com/p/zen-coding/

您可以在此处获得有关它可以执行的操作以及下载链接的更多信息。

它使用短标签来编写HTML结构,因此您无需自己编写每个元素。

例如(链接中的示例):

div#page>div.logo+ul#navigation>li*5>a

扩展为:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>