手记

Atom使用指南

Atom概述

Atom 介绍

  • Atom是由GitHub开发的开源文本编辑器

  • 可以以插件的方式进行定制

  • 该软件使用JavaScript,css,Html编写的

Atom特点

  • 跨平台,支持windows,linux,Mac OS

  • 插件以包的形式管理

  • 支持语言广泛

  • 高度定制

  • 上千种主题

常用快捷键

  • 模糊查找
    ctrl+ t
    Atom对象项目进行了索引,使用ctrl+t可以对项目中的文件进行模糊查找

  • 显示项目树(可切换)
    ctrl+ \

  • 生成html模版代码
    输入html:5然后按tab键 前提是你已安装emmet插件

  • 复制当前行
    ctrl+shift+d

  • 打开取色器
    ctrl+alt+c 已安装color-picker插件

常见设置

  • 设置项目默认目录
    file>settings>core>Project Home

  • 隐藏项目无关文件(.git .svn .DS_Store .Thumbs.db..)
    file>settings>packages>搜索 tree-view,在setting下面勾选Hide igorned Names

切换国内安装源

先切换为国内安装源,否则一些插件下载会连接超时或安装失败
需要使用atom自带的命令行工具apm
进入atom安装目录
对于atom 1.29版本的安装目录apm目录为:C:\Users\Administrator\AppData\Local\atom\bin
进入该目录,安装shift键,单击鼠标右键选择:在此处打开命令行窗口,然后运行如下命令:
apm config set registry http://registry.npm.taobao.org

编写html+css+js必装插件

如何安装软件包
file>settings>install

  1. Emmet 插件使用帮助:[https://docs.emmet.io/cheat-sheet/]

  2. autoclose-html 自动封闭html标签

  3. color-picker:取色器 打开取色器:ctr+alt+c

  4. minimap:代码地图

  5. atom-ternjs:js,jQuery,angular js代码自动补全

  6. linter-jshint:JS语法检查器,会自动安装依赖插件linter

  7. highlight-selected:高亮相同的单词或者变量

  8. simple-drag-drop-text:文件内拖拽文本

  9. pigments:自动根据代码中的颜色值为当前代码着色

  10. file-icons:根据文件类型自动使用不同图标区分文件

其他插件

  1. autocomplete-paths:自动填写路径(经测试在html,css中无效)

  2. platformio-ide-terminal:在当前编辑窗口开启cmd终端

  3. activate-power-mode:激活震撼效果

  4. project-manager:搜索及访问项目管理器 打开方式:Alt + Shift + P

  5. git-plus:git插件,不必切换到终端快速执行git命令,打开方式:Ctrl + Shift + H

  6. auto-update-packages:自动更新插件包(系统已自带该功能)

  7. autocomplete-modules:自动检测require/import 语句提示关联文件或模块

  8. docblockr:注释生成插件,匹配当前function自动完成注释

配置导出及导入

  1. 安装config-import-export插件

  2. 建立AtomConfigBackup目录

  3. 下载JSON文件到AtomConfigBackup目录

  4. 导入配置,点击Packages -> Config Import Export -> Import选择备份的JSON文件



作者:snowyvalley
链接:https://www.jianshu.com/p/7f28fc14116a


1人推荐
随时随地看视频
慕课网APP