Sublime Text3 和Atom相关插件的安装和使用

最新推荐文章于 2021-03-12 15:39:39 发布

音韵者天-waker

最新推荐文章于 2021-03-12 15:39:39 发布

阅读量1.7k

点赞数 2

分类专栏：前端工具文章标签：前端开发

前端工具专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Sublime Text3

一、Sublime Text3安装preap主题

Sublime Text3作为前端开发的神器，一直备受fer的青睐。下面给Sublime Text3安装preap主题来替换默认主题。
先上图：

这里写图片描述

安装

通过Package Control安装，先安装Package 然后再搜索preap直接安装。或者直接下载安装包https://github.com/equinusocio/preap/releases/tag/v1.2.8 ，然后改名“Preap”,放到Packages目录下。
修改Settings-User文件

用如下配置替换该文件保存，主题替换成功。

{
    "color_scheme": "Packages/User/SublimeLinter/Preap (SL).tmTheme",
    "findreplace_small": true,
    "font_size": 14,
    "ignored_packages":
    [
        "Vintage"
    ],
    "sidebar_default": false,
    "sidebar_font_big": true,
    "sidebar_font_small": false,
    "sidebar_large": true,
    "sidebar_xlarge": false,
    "static_modified_tab": true,
    "tabs_border": false,
    "tabs_medium": true,
    "tabs_small": false,
    "theme": "preap.sublime-theme"
}

文章来源：https://packagecontrol.io/packages/Preap

二、利用 Node.js 添加 JavaScript 控制台

首先需要安装node，可以查看这里！
打开Sublime Text，选择 Tools > Build System > New Build System

粘贴以下内容并保存为Node.sublime-build，或者其他名字：

{

"cmd": ["node", "$file"],

"selector": "source.js"

}

在 Tools > Build System 里选择刚刚创建好的“Node”，按下Command + B就可以调试了.
这里写图片描述

三、使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码

这个插件依然基于node，同样需要先安装node。
通过package安装 HTML-CSS-JS Prettify
安装完后在打开的文件里面右键HTML/CSS/JS Prettify > Set Plugin Options保证插件路径与Node.js安装路径一致，Ctrl+s保存!

然后通过鼠标右键HTML/CSS/JS Prettify > Prettify Code格式化代码。

Atom

最近尝试了下Atom，感觉相当不错，这款基于web技术开发的editor，并且拥有github的强大后盾，虽然目前性能上不是太好，但相信以后应该会更出色。
哦，还有完全开源，各种package。。。

https://github.com/kompasim/atom-plugins

Atom 快捷键

文件切换
ctrl-shift-s 保存所有打开的文件
cmd-shift-o 打开目录
cmd-\ 显示或隐藏目录树
ctrl-0 焦点移到目录树
目录树下，使用a，m，delete来增加，修改和删除
cmd-t或cmd-p 查找文件
cmd-b 在打开的文件之间切换
cmd-shift-b 只搜索从上次git commit后修改或者新增的文件

导航
（等价于上下左右）
ctrl-p 前一行
ctrl-n 后一行
ctrl-f 前一个字符
ctrl-b 后一个字符
alt-B, alt-left 移动到单词开始
alt-F, alt-right 移动到单词末尾
cmd-right, ctrl-E 移动到一行结束
cmd-left, ctrl-A 移动到一行开始
cmd-up 移动到文件开始
cmd-down 移动到文件结束
ctrl-g 移动到指定行 row:column 处
cmd-r 在方法之间跳转

书签
cmd-F2 在本行增加书签
F2 跳到当前文件的下一条书签
shift-F2 跳到当前文件的上一条书签
ctrl-F2 列出当前工程所有书签

选取
大部分和导航一致，只不过加上shift
ctrl-shift-P 选取至上一行
ctrl-shift-N 选取至下一样
ctrl-shift-B 选取至前一个字符
ctrl-shift-F 选取至后一个字符
alt-shift-B, alt-shift-left 选取至字符开始
alt-shift-F, alt-shift-right 选取至字符结束
ctrl-shift-E, cmd-shift-right 选取至本行结束
ctrl-shift-A, cmd-shift-left 选取至本行开始
cmd-shift-up 选取至文件开始
cmd-shift-down 选取至文件结尾
cmd-A 全选
cmd-L 选取一行，继续按回选取下一行
ctrl-shift-W 选取当前单词


编辑和删除文本

基本操作
ctrl-T 使光标前后字符交换
cmd-J 将下一行与当前行合并
ctrl-cmd-up, ctrl-cmd-down 使当前行向上或者向下移动
cmd-shift-D 复制当前行到下一行
cmd-K, cmd-U 使当前字符大写
cmd-K, cmd-L 使当前字符小写

删除和剪切
ctrl-shift-K 删除当前行
cmd-backspace 删除到当前行开始
cmd-fn-backspace 删除到当前行结束
ctrl-K 剪切到当前行结束
alt-backspace 或 alt-H 删除到当前单词开始
alt-delete 或 alt-D 删除到当前单词结束

多光标和多处选取
cmd-click 增加新光标
cmd-shift-L 将多行选取改为多行光标
ctrl-shift-up, ctrl-shift-down 增加上（下）一行光标
cmd-D 选取文档中和当前单词相同的下一处
ctrl-cmd-G 选取文档中所有和当前光标单词相同的位置

括号跳转
ctrl-m 相应括号之间，html tag之间等跳转
ctrl-cmd-m 括号(tag)之间文本选取
alt-cmd-. 关闭当前XML/HTML tag

编码方式
ctrl-shift-U 调出切换编码选项

查找和替换

cmd-F 在buffer中查找
cmd-shift-f 在整个工程中查找

代码片段
alt-shift-S 查看当前可用代码片段
在~/.atom目录下snippets.cson文件中存放了你定制的snippets
定制说明

自动补全
ctrl-space 提示补全信息

折叠
alt-cmd-[ 折叠
alt-cmd-] 展开
alt-cmd-shift-{ 折叠全部
alt-cmd-shift-} 展开全部
cmd-k cmd-N 指定折叠层级 N为层级数

文件语法高亮
ctrl-shift-L 选择文本类型

使用Atom进行写作
ctrl-shift-M Markdown预览
可用代码片段 b, legal, img, l, i, code, t, table

音韵者天-waker

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sublime Text3 和Atom相关插件的安装和使用

一、Sublime Text3安装preap主题Sublime Text3作为前端开发的神器，一直备受fer的青睐。下面给Sublime Text3安装preap主题来替换默认主题。先上图：安装通过Package Control安装，先安装Package 然后再搜索preap直接安装。或者直接下载安装包https://github.com/equinusocio/preap/releases/
复制链接

扫一扫