atom 前端开发插件推荐

1、配置镜像

在国内下载atom插件,因为连接的是亚马逊的服务器,所以速度非常慢,有时还会超时,好在国内淘宝做了个镜像,方便国内的朋友们下载,所以在powershell或者terminal中使用以下命令配置镜像(apm是Atom的包管理器,类似于npm)

  apm config set registry https://registry.npm.taobao.org

在设置了镜像之后,就可以在atom中下载插件,或者使用apm install {{ package-name }}来安装插件

2、插件列表

1、代码辅助类

1 Emmet

使用Emmet语法快速编写HTML。

2 eslint

eslint atom插件,用于检索javascript代码,可以自定义配置,根据自己的风格或者团队风格来检索代码(需要下载Atom-linter依赖)。

3 docblockr

一键生成注释模板,使写注释更高效。


docblockr
docblockr
4 autocomplete-paths

在写路径的时候的自动补全。


autocomplete-path
autocomplete-path
5 goto-definition

直接跳转到函数(变量)的定义处,支持Hyperclick即Ctrl/Command + 鼠标左键直接跳转,不过需要根据文档自行设置。

goto-definition
goto-definition

6 atom-beautify

支持多种语言的格式化代码插件,可以自定义设置,很好用。


atom-beautify
7 double-tag

在修改Html标签的时候,可以同步修改标签的开始和结束部分,使Html的修改更高效。


double-tag
double-tag

2、Git功能

1 git-plus

使用atom命令行来进行基本的Git操作(例如Commit,Pull,Push等)。


git-plus
git-plus
2 git-log

在Atom中查看Git提交记录。


git-log
git-log

3、开发辅助(项目管理和小工具)

1 project-manager

项目管理,存储当前项目,快速进入指定项目。


project-manager
project-manager
2 open-in-browser

使用快捷键,自动在系统默认浏览器中打开当前Html文件。

3 atom-clock

在atom界面的右下角显示当前时间(时间格式可自定义),防止各位写代码写得废寝忘食。


atom-clock

4、美化

1 file-icons

文件前面显示图标,增加辨识度的同时使界面更好看。


file-icons
2 主题推荐

主题每个人审美不同,笔者用的主题是atom-material-ui,使用的代码颜色主题是atom-material-syntax,笔者觉得挺好看的,这也是笔者放弃VScode转投Atom的原因,一个高颜值的编辑器在写代码的时候可以让人心情舒畅。

atom-material-ui 加上 atom-material-syntax
atom-material-ui 加上 atom-material-syntax

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容