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

Question

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

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

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

子问题:

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

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

Answer 1

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

就个人而言,我喜欢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块的帮助器
• 差异加法
• 自动备份
• 咖啡脚本

所有这些(以及更多)都可以使用Sublime Packages进行安装和管理

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

对于您的子问题:

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

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

您觉得哪些包装必不可少？

如上所示

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

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

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

我不.我真的不需要这个.我把它安装在两个盒子上,一个Windows和一个Linux.每个都有不同的用途,所以我不担心同步,我只是复制设置,如果我想要它们.Dropbox同步很容易,但如果这是你想要的.只需link将Sublime settings文件夹放入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} }
]

Answer 2

添加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>