Atom使用教程
删除Atom
使用的360进行删除,删除后会发现 C:\Users\你的用户名\
有一个隐藏的文件夹 .atom
将其删除,不删除的话重新安装atom的时候依旧会保留原来的配置及插件
插件
安装完 Atom 之后自带了79个插件,基本的功能都已经可以使用了
安装插件
在 setting 页面可以看到
Packages
和Install
两个选项,Packages
查看已经安装的插件,Install
来安装插件的,可以使用ctrl+Shift+p
进入这个页面
插件 | 是否安装 |
---|---|
file-icons | yes |
pigments | no |
minimap | yes |
autocomplete-paths | no |
atom-ternjs | no |
emmet | yes |
docblockr | yes |
vim-mode | no |
platformio-ide-terminal | no |
atom-beautify | yes |
php-debug | yes |
linter-jshint | yes |
simplified-chinese-menu | no |
goto-definition | yes |
Highlight Selected | yes |
- file-icons 显示文件类型对应的图标
- pigments css/less 写表示颜色时显示颜色
- minimap 右边代码预览框
- autocomplete-paths 补全路径
- atom-ternjs 补全Js
- emmet 前端实用工具 教程
docblockr 代码注释
vim-mode 在 Atom 上使用 Vim
Highlight Selected 选中单词所有相同的高亮
platformio-ide-terminal Atom 中集成终端
atom-beautify 美化代码段 快捷键
ctrl + alt + b
,如果弹出出错信息,可能是需要依赖一些其他插件,比如 php的 就需要装 php-cs-fixer 插件linter-php 检查php语法错误 ,可能需要将php配置成全局 ,安装它的时候会让安装一些依赖插件,按照提示安装即可
linter-jshint 检查js语法错误 ,需要安装node,使用npm 全局安装jshint (没有配置成功,报错incompatible values for the esversion and es3 linting option ,配置文件写错了) 相关资料 jshint配置 linter-jshint配置
首先安装 node ,使用npm 全局安装jshint
在
~
(~
,表示用户目录,在windows下是C:\Users\dingran
)文件下放置js配置文件.jshintrc
配置文件atom 配置插件,如下图
勾选lint inline javaScript,可以在html或php中检查js
点击open config folder
找到配置文件,查看配置文件config.cson
123"linter-jshint":disableWhenNoJshintrcFileInPath: falselintInlineJavaScript: truephp-debug xdebug调试
goto-definition 文件跳转,放到方法或类名上右键
goto definition
就会出现列表,选择跳转,有快捷键,还是不用了remote-ftp sftp上传工具
插件配置:把auto upload on save
由aways
改为nerver
可以在 packages->Remote-Ftp->Create ……
来生成配置文件 .ftpconfig
(生成在添加到Atom项目文件根目录,上传的时候也是在根目录中寻找配置文件,限制啊),上传只能在左边 menu
菜单来选中上传和下载 (限制啊)
|
|
Markdown相关
Markdown相关
Markdown相关
markdown-scroll-sync 预览同步滚动
tidy-markdown Markdown美化,在保存的时候或者主动调用插件时触发
python相关
编辑器里运行直接运行代码 js、python
等都可以
atom-runer编辑器运行代码
快捷键看插件介绍
win配置
mac配置
装逼神奇
快捷键
Atom 兼容sublime快捷键,同时也有自己的快捷键
|
|
折叠
|
|
Markdown
|
|
Markdown 语法补全
|
|
更改快捷键
有些时候需要更改快捷键,比如快捷键冲突时
- 打开快捷键设置,如图
搜索要改的快捷键 如ctrl-shift-m
,发现有两个,出现了冲突,这时可以自定义一个(优先级最高)将其覆盖
点击需要自定义快捷键的最左边的小按钮进行复制 - 打开自定义文件(点击链接 your keymap file)
- 将复制的快捷键定义粘贴在自定义文件中,如图
备份插件
将配置文件上传到github
备份
使用快捷键 Ctrl + Shift + P
呼出命令栏,输入 sync backup
恢复备份
使用快捷键 Ctrl + Shift + P
呼出命令栏,输入 sync restore
补充 获取 Gist Id
- 进入到github,点击你的头像会看到
Your gists
,点击进去 - 如果没有,则需要创建一个:起个名称(用途),写个简介
- 获取
Gist Id
,进入创建好的Gist
看到连接https://gist.github.com/Ibunao/654a98d3e154348eaebba448312b0152
其中654a98d3e154348eaebba448312b0152
就是Gist Id
xdebug调试
相关教程
- atom 安装
php-debug
插件,不用配置 - php开启xdebug
win上安装的是wamp所以xdebug都是有的
php.ini 配置
|
|
调试
- 开启debug插件 atom左下角debug按钮打开debug,没有监听到时显示的是
Listening on address:port 127.0.0.1:9000
- 在方法中打断点 (断点要注意了,如果打到空行,或者for循环里面将会无法监听到) 如图
- 浏览器中访问能进入到打断点的方法中 ,如
www.basic.com/test/test
如果操作正确将会看到监听状态由Listening on address:port 127.0.0.1:9000
改变成Connected
,此时就可以使用debug调试了
- 开启debug插件 atom左下角debug按钮打开debug,没有监听到时显示的是
如果没有改变监听状态,可能就是断点打错了,请检查
如果atom的debug启动不起来,可能是9000端口被占用了,更改插件端口和php.ini 中的xdebug配置的端口即可
操作详解
进入到断点将会输出一下内容,如下图
其中,主要的有两部分内容 栈信息Stack
和变量值信息 Context
其中 Stack
显示的是走到这个断点所经过的方法,如图从7到0,可以点击不同的栈来查看他的 变量值信息 Context
Context
中显示的是变量信息,
其中 Locals
显示的是方法中的变量值信息Superglobals
显示的是全局的信息 ,如 $_COOKLE、$_POST
等一些全局的信息User defined constants
显示的是定义的常量
操作 添加断点
在代码的左边栏上点击,因为比较窄不好点击,也可以使用快捷键 alt + f9
Stop
释放掉监听 alt + f5
Continue
走向下一个断点 Step Over
一步一步往下走 alt + f6
Step In
进入到方法内 alt + f7
Step Out
跳出方法 alt + f8
Restore Panels
恢复原始的展示窗口
其他两个就是切换展示位置的
xdebug使用 xdebug使用 xdebug使用 xdebug使用 xdebug相关 xdebug相关 mac 安装
设置代码段 snippet 代码块
有一点不好的是,只能在某个语言环境中触发为某个语言设置的代码段
实例
|
|
问题
ctrl+,
快捷键无法打开 setting ,可能是因为快捷键冲突
Atom问题与解决
打开多个窗口时,在一个窗口添加项目,项目目录变的不可见点击并会报错
解决 : 参考注意:先保存任何未保存的作业
win系统cmd运行 atom --clear-window-state
即可