atom web插件_针对Web开发人员的10个最有用的Atom软件包

您尝试过Atom吗？ 尽管它很新，但是许多人都爱上了GitHub制作的文本编辑器Atom，它允许您管理GitHub项目以及其他优势，并且可以免费使用。 Atom附带了一些内置程序包，例如与Git和树视图的集成。 但是，出于开发目的，您肯定需要其他软件包。

在本文中，我们选择了Web开发人员必须具备的一些软件包。 有些非常有用，可以帮助您整理凌乱的代码，而另一些则可以帮助您在不离开Atom的情况下更好地访问文件。 这是您的10个必备Atom软件包。

顾名思义，此程序包使您可以选择颜色，就像右键单击并选择“颜色选择器”一样简单。 另外，也可以通过按CMD / CTRL + SHIFT + C来完成 。 如果光标位于包含以下一种颜色格式CSS / SASS / LESS文件上的文本上，则拾色器将起作用：HEX，HEXa，RGB，RGBa，HSL，HSLa，HSV，HSVa，VEC3和VEC4，或SASS或LESS。 它还具有在格式之间进行转换的能力。

无论您的文本编辑器环境如何， Emmet似乎都是您需要安装的插件。 Emmet的主要功能（例如扩展缩写和缩写包装）使您可以在编写HTML，CSS，Sass / SCSS和LESS语法时快速工作。 例如，在HTML中，键入p>a.mylink然后点击TAB键以获取完整HTML标签<p><a href class="mylink"></a></p> 。 备忘单将帮助您快速学习Emmet的缩写语法。

如果您习惯了Sublime Text，那么您可能会熟悉右侧窗口中的迷你预览。 该功能对于快速滚动源代码（对于窗口高度而言太长）非常有用。 使用Minimap ，您可以获得Atom的功能。 您甚至可以将位置设置在左侧或右侧，打开/关闭代码突出显示等等。 Minimap甚至带有一些扩展其功能的插件 ，例如color Highlighter 。

Beautify将使您的凌乱代码更整洁并更具可读性。 它对编程语言（例如HTML，CSS，JavaScript，PHP，Python，Ruby，Java，C，C ++，C＃，Objective-C，CoffeeScript，打字稿和SQL）提供了强大的支持。 安装此软件包后，要运行它，只需右键单击并选择“美化编辑器内容” ，或通过“ Packages > Atom Beautify > Beautify 。

Atom Linter是主要语言的linting插件的“家”，为linter提供了顶级API。 有适用于JavaScript，CoffeeScript，CSS / SASS / SCSS / LESS / STYLUS，Ruby，Python的短绒。 在一种语言中，可以有更多的可用插件，例如JSHint，JSCS和JSXHint for JavaScript。

文件图标根据相应的文件类型将图标添加到文件名。 在选项卡或树形视图上打开文件时，它将增加视觉效果。 文件图标是可自定义的：您可以添加自己的图标并通过packages/file-icons/styles目录中的LESS文件更改颜色。 默认图标有8种颜色和3种变体（浅，中和深）。

JavaScript代码片段可让您快速编写JS源代码的一部分。 使用已定义的缩写，您无需一个字一个字地写代码，例如，只需键入cl即可创建console.log而gi可以使getElementById 。 该功能类似于Emmet，但它在JavaScript代码上运行。 这个Atom包提供了许多JavaScript语法，例如函数，控制台和循环。

CSS Comb使您的样式表代码保持一致的格式，看起来整洁漂亮。 您可以使用基于Yandex，Zen或CSSComb本身的预制排序首选项，甚至可以使用自己的首选项来制定排序规则。 安装此程序包后，可以通过按CTRL + ALT + C来完成排序作业，也可以通过“ Packages > CSS comb > Comb从上下文菜单中进行访问。

Git Plus使您无需离开Atom编辑器即可使用Git。 在编辑器中，您可以执行Git提交，签出，推/拉，diff和其他git命令。 您需要在git config文件上设置user.name和user.email才能使所有功能正常工作。 要访问所有git命令，请使用CMD + SHIFT + H打开面板，或选择Package > Git Plus 。

远程编辑可帮助您查看和编辑远程文件，而无需离开编辑器或使用其他ftp应用程序。 首先，首先创建一个新主机，然后通过菜单Packages > Remote Edit > Add New Host并插入您的登录信息。 现在，您可以浏览到远程文件，使用CTRL + ALT + B浏览注册的主机并查看文件。

翻译自: https://www.hongkiat.com/blog/useful-atom-packages/