前端学习 开发编辑器 Atom使用配置

Posted baiiu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端学习 开发编辑器 Atom使用配置相关的知识,希望对你有一定的参考价值。

前言

android开发时,也经常使用使用文档编辑器。就是主要用在看一些比较简单的开源项目时,不想用IDE打开,仅仅是阅读一下代码,用文档编辑器就会方便很多。 stormZhang讲过一篇博客 Gradle命令详解与导入第三方包,里面提到了Sublime这个编辑器。刚开始自己用的这个,后来Atom出了,看了一眼,便非常喜欢,于是就转到Atom上来。

现在自己在学习前端开发基础,使用Atom作为编辑器,那么就摸索一下怎么配置Atom,才能方便前端开发,比如如何自动补全,如何智能提示等等功能。

这篇文章核心是Atom的配置,但也会从基础开始介绍。

1. 安装

就在Atom官网上直接下载下来解压就可以使用了。很舒服。

2. 介绍Atom基础术语

先了解Atom的使用的一些概念,在之后理解有很大帮助。

  • 缓冲区 Buffer :
    A buffer is the text content of a file in Atom. It’s basically the same as a file for most descriptions, but it’s the version Atom has in memory. For instance, you can change the text of a buffer and it isn’t written to its associated file until you save it.
    Atom会将文件中的文本内容全部加载到内存中,这就是缓冲区。当你修改文本内容时,实际上修改的是缓冲区中的内容。当按下 command + S 进行保存时,Atom会将缓存区内容写入到硬盘上进行持久化保存。

  • **窗格 Pane: **
    *A pane is a visual section of Atom. *
    窗格是Atom的可视化部分。就是一块一块的区域。

3. 介绍命令面板 Command Palette

快捷键 command + shift + P 快速调出命名面板,可以通过该命令面板查看所有的快捷键。
**官方这么说:If you only remember one keyboard shortcut, make it command + shift + P 。通过它可以查到其他快捷键。

更多快捷键在之后的使用中添加进来。

快捷键描述
command + S保存当前文件
command + shift + S另存为
command + alt + S全部保存
command + \\tooggle tree-view
ctrl 0focus tree-view
command + P在当前文件中搜索

注 : Mac下快捷键的符号所对应的按键
—> optionalt
—>shift
—>control
—>command
—>esc

4. 前端开发配置

了解了atom后,就可以开始配置atom,方便我们的编码工作。

  • 通过命令行安装插件(插件介绍可看文末链接)

      apm install emmet //前端常用
      apm install atom-beautify //格式化
      apm install minimap //代码地图
      apm install autoclose-html //自动闭包
      apm install linter //lint检查
      apm install linter-jshint//js检查
      apm install file-icons //文件视图图标
      apm install run-in-browser //使用浏览器预览
    

恩,配置完成后,就可以开心的编码啦。

5. Atom使用技巧

  1. 安装atom命令行
    导航栏中,点击Atom,选项会有 Install Shell Commands,安装后可在terminal中直接使用atom命令行直接打开该指定路径文件。

     atom xxx
    
  2. 修改快捷键
    在使用atom-beautify时,发现它的快捷键太难用了。control-alt-b 十分难按。在android开发中,格式化和代码保存最常用。于是就把格式化的快捷键改了。

    1. 打开atom菜单,选中KeyMap…选项

    2. 添加如下代码,复写atom内置的快捷键:

       'atom-text-editor':
           #格式化
           'alt-cmd-l': 'atom-beautify:beautify-editor'
           #用浏览器打开
           'alt-cmd-o': 'rib:run-in-browser'
      

      这里为alt-cmd-L,设置为和android studio一样,就方便书写代码了。哈哈哈。这里设置它的快捷键比andorid studio方便的多,真的佩服Atom这个编辑器。

  3. 查看markDown PreView
    使用 command + shift + P 后搜索 markdown preview,就可以打开窗口查看。

结语

Atom的用于前端开发自己也是刚刚开始,之前仅仅是作为单纯的文本编辑查看器了,目前还在不停的摸索阶段。不过这些插件用于目前学习基础的前端开发已经够用了。之后随着学习的深入,会不断补充。

关于摸索过程中翻到的好文章,链接全在下面啦,大家可以看看。


>文档: > Atom 中文社区 > Atom 官方文档

好文章:
Atom 新一代编辑器
Github开源编辑器Atom常用插件及安装方法
开发神器Atom编辑器优秀插件推荐

以上是关于前端学习 开发编辑器 Atom使用配置的主要内容,如果未能解决你的问题,请参考以下文章

新手学习配置atom编辑器进行安装插件如script

Python开发工具Atom

Atom编辑器入门到精通 编辑配置文件

Atom编辑器入门到精通 编辑配置文件

前端编辑器,Sublime,ATOM,VSCode那个好?

我的前端故事----优美的编辑器GitHub Atom