您对在HTML、CSS和JavaScript中开发理想的Sublime Text 2配置有什么建议

What are your suggestions for an ideal Sublime Text 2 configuration for development in HTML, CSS and JavaScript?

本文关键字：Text Sublime 配置 什么 理想 开发 HTML CSS JavaScript      更新时间：2023-09-26

Sublime Text 2从一开始就不是一个功能齐全的编辑器，但似乎在幕后拥有巨大的力量。虽然网上有很多博客文章给你提供了包列表，乍一看这些包似乎都很有用，但你会在编码过程中发现，你每天只使用一大堆重要的插件，而其他一些甚至会产生性能问题。

在Sublime Text 2中，几乎所有的配置都是通过创建和编辑配置文件来完成的。也许你们中的一些人已经为HTML、CSS和JavaScript的开发设置了编辑器，这样就可以共享配置文件和关于安装内容（以及读取哪些文档）的分步说明。所以我的问题是：

您如何自定义Sublime Text 2以使用HTML、CSS和JavaScript进行编码，从而提高您的生产力？

子问题：

  • 您认为哪些特定的设置更改是必不可少的（例如，选项卡不是开箱即用的）
  • 你觉得哪些包裹是必不可少的
  • 如何设置验证、实时语法检查和代码提示等功能
  • 如何在两台机器上同步编辑器（设置和包）（使用Dropbox或类似的东西）

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

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

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

不知道你对标签是什么意思？是因为你打开了无干扰（全屏）设置吗？这让我很困惑，我更喜欢它。否则你肯定会默认得到选项卡。我喜欢分屏功能。

不过，我最喜欢的是，你可以关闭Sublime，而不必保存东西！我倾向于将3或4个未保存的"文档"作为草稿页打开——我永远不需要担心数据丢失。

话虽如此，我想补充几点：

  • Sublime Linter-多种语言的linting，包括JS和CSS。尽管默认设置需要稍微调整
  • 支架式荧光笔
  • ChangeTracker-查看文件的哪些部分已更改
  • shell实用程序（有几个可用）
  • Sublime v8&Node-直接访问run和lint代码
  • 用于直接远程访问文件的SFTP
  • 一些Markdown插件-使使用Markdown变得更好
  • DocBlockr-文档块的助手
  • 一个不同的插件
  • 自动备份
  • 咖啡脚本

所有这些（以及更多）都可以安装&使用Sublime Packages 管理

我还为Jade和Apache conf文件等提供了一些TextMate捆绑插件。

对于您的子问题：

您认为哪些特定的设置更改是必不可少的（例如，选项卡不是开箱即用的）？

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

你觉得哪些包裹是必不可少的？

上方显示

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

只需安装插件！JS linting对我来说有点太咄咄逼人了，请在帖子末尾查看我的设置。

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

我没有。我真的不需要这个。我把它安装在两个盒子上，一个Windows，一个Linux。每个都有稍微不同的用途，所以我不担心同步，如果我需要的话，我只需要复制设置。如果你想要的话，Dropbox同步就足够容易了。只需将Sublime设置文件夹link放入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} }
]

添加Zen编码。（现在称为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>
相关文章：