#### 打造高效编辑器
```
```
#### [资料] Sublime 个性化配置
```
Sublime 个性化配置
跟一般软件一样，Sublime 提供自定义设置的能力，但是跟一般软件有点不一样的是，Sublime 不是通过弹窗展示选项的方式给
我们配置的，而是通过修改配置文件的方式去设定不同的配置项。下面我们来介绍下Sublime怎么自定义设置。
首先在工具栏点击 Preferences -> Settings（或者快捷键 Ctrl+Shift+P, 输入 settings, 选择 Preferences: Settings）
打开配置窗口。
Settings
在 Sublime 自动弹出的新窗口中我们可以看到 2 个配置文件，这 2 个文件都是通过JSON格式描述编辑器的配置，左边是系统配置
文件，罗列了一大堆 Sublime 的默认配置，该文件无法修改，右边是用户设置文件，配置项很少，可以修改。
我们修改Sublime配置的过程其实就是参考左边默认配置文件，修改右边用户配置文件的过程， 比如我们想修改字体大小，只需要复制
左边字体大小的配置项，粘贴到右边的JSON对象中，然后修改成我们想要的参数即可。
Settings
下面是我们提供了几个比较常用的配置项，大家可以尝试下配置自己的编辑器。
{
"translate_tabs_to_spaces": true, // 输入tab的时候自动转化为空格
"tab_size": 4, // 每个tab是4个空格
"word_wrap": true // 代码超过窗口大小自动换行
}
```
#### [资料] Sublime 快捷键
```
Sublime 快捷键
学习和熟练掌握Sublime的快捷键，让我们更好地发挥Sublime Text的编辑能力的同时，也显著地提高我们的代码编辑效率。
这里我们列举些常用的快捷键，以供大家查阅。快捷键呢，硬记是很难的，还是要多动手使用，等到不用经过大脑就可以按出来，
那就略有小成了。
常用快捷键
Ctrl+Shift+P 打开命令面板
Ctrl+P 搜索项目中的文件
Ctrl+G 跳转到第几行
Ctrl+W 关闭当前打开文件
Ctrl+Shift+W 关闭所有打开文件
Ctrl+Shift+V 粘贴并格式化
Ctrl+D 选择单词，重复可增加选择下一个相同的单词
Ctrl+L 选择行，重复可依次增加选择下一行
Ctrl+Shift+L 选择多行
Ctrl+Shift+Enter 在当前行前插入新行
Ctrl+X 删除当前行
Ctrl+M 跳转到对应括号
Ctrl+U 软撤销，撤销光标位置
Ctrl+J 选择标签内容
Ctrl+F 查找内容
Ctrl+Shift+F 查找并替换
Ctrl+H 替换
Ctrl+R 前往 method
Ctrl+N 新建窗口
Ctrl+K+B 开关侧栏
Ctrl+Shift+M 选中当前括号内容，重复可选着括号本身
Ctrl+F2 设置/删除标记
Ctrl+/ 注释当前行
Ctrl+Shift+/ 当前位置插入注释
Ctrl+Alt+/ 块注释，并Focus到首行，写注释说明用的
Ctrl+Shift+A 选择当前标签前后，修改标签用的
F11 全屏
Shift+F11 全屏免打扰模式，只编辑当前文件
Alt+F3 选择所有相同的词
Alt+. 闭合标签
Alt+Shift+数字 分屏显示
Alt+数字 切换打开第N个文件
按Ctrl，依点击或选取，可需要编辑的多个位置
按Ctrl+Shift+上下键，可替换行
选择类
Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等
Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样
Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容（继续选择父括号）。举个栗子：快速选中删除函数中的代码，重写函数体代码或重写括号内里的内容
Ctrl+M 光标移动至括号内结束或开始的位置
Ctrl+Enter 在下一行插入新行。举个栗子：即使光标不在行尾，也能快速向下插入一行
Ctrl+Shift+Enter 在上一行插入新行。举个栗子：即使光标不在行首，也能快速向上插入一行
Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码
Ctrl+Shift+] 选中代码，按下快捷键，展开代码
Ctrl+K+0 展开所有折叠代码
Ctrl+← 向左单位性地移动光标，快速移动光标
Ctrl+→ 向右单位性地移动光标，快速移动光标
shift+↑ 向上选中多行
shift+↓ 向下选中多行
Shift+← 向左选中文本
Shift+→ 向右选中文本
Ctrl+Shift+← 向左单位性地选中文本
Ctrl+Shift+→ 向右单位性地选中文本
Ctrl+Shift+↑ 将光标所在行和上一行代码互换（将光标所在行插入到上一行之前）
Ctrl+Shift+↓ 将光标所在行和下一行代码互换（将光标所在行插入到下一行之后）
Ctrl+Alt+↑ 向上添加多行光标，可同时编辑多行
Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行
编辑类
Ctrl+Shift+D 复制光标所在整行，插入到下一行
Ctrl+J 合并选中的多行代码为一行。举个栗子：将多行格式的CSS属性合并为一行
Tab 向右缩进
Shift+Tab 向左缩进
Ctrl+K+K 从光标处开始删除代码至行尾
Ctrl+Shift+K 删除整行
Ctrl+/ 注释单行
Ctrl+Shift+/ 注释多行
Ctrl+K+U 转换大写
Ctrl+K+L 转换小写
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+U 软撤销，感觉和 Gtrl+Z 一样
Ctrl+F2 设置书签
Ctrl+T 左右字母互换。
F6 单词检测拼写
搜索类
Ctrl+F 打开底部搜索框，查找关键字
Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找，略高端，未研究
Ctrl+P 打开搜索框。举个栗子：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名，
3、输入：和数字，跳转到文件中该行代码，4、输入#和关键字，查找变量名
Ctrl+G 打开搜索框，自动带：，输入数字跳转到该行代码。举个栗子：在页面代码比较长的文件中快速定位
Ctrl+R 打开搜索框，自动带@，输入关键字，查找文件中的函数名。举个栗子：在函数较多的页面快速查找某个函数
Ctrl+： 打开搜索框，自动带#，输入关键字，查找文件中的变量名、属性名等
Ctrl+Shift+P 打开命令框。场景栗子：打开命名框，输入关键字，调用sublime text或插件的功能，例如使用package安装插件
Esc 退出光标多行选择，退出搜索框，命令框等
显示类
Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页
Ctrl+PageDown 向左切换当前窗口的标签页
Ctrl+PageUp 向右切换当前窗口的标签页
Alt+Shift+1 窗口分屏，恢复默认1屏（非小键盘的数字）
Alt+Shift+2 左右分屏-2列
Alt+Shift+3 左右分屏-3列
Alt+Shift+4 左右分屏-4列
Alt+Shift+5 等分4屏
Alt+Shift+8 垂直分屏-2屏
Alt+Shift+9 垂直分屏-3屏
Ctrl+K+B 开启/关闭侧边栏
F11 全屏模式
Shift+F11 免打扰模式
Ctrl+k+2 折叠注释和方法
Ctrl+k+3 折叠if
Ctrl+k+4 折叠switch
参考资料
Sublime Text 官网:https://www.sublimetext.com/
```
#### [资料] Sublime 安装插件
```
Sublime 安装插件
Sublime Text（通常简称为 Sublime）是一款非常精巧美观的代码编辑器软件。
我们可以通过安装强大的插件来满足不同的编辑需求，使我们可以更优雅便捷地编写代码。目前Sublime已经发展到第三个大版本。
相对于前面的版本，第三版本的 Sublime 在启动和执行速度有了更大的提升，因此建议大家统一安装 Sublime Text 3 。
Package Control（包管理插件）
提到 Sublime 插件安装，就不得不提到 Package Control 。
Package Control 是 Sublime Text 用来管理插件的插件，让我们更好的安装和管理插件。
安装 Package Control
1、通过命令安装
在编辑器中按 Ctrl + ` 调出console的输入框（或者点击顶部菜单View->Show Console）
粘贴以下代码到底部命令行并 Enter 回车，并稍等片刻
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88';
pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener
( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen
( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print
('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open
(os.path.join( ipp, pf), 'wb' ).write(by)
安装完重启 Sublime Text 3 ，如果在 Perferences → package settings 中看到 package control 这一项，则安装成功。
2、手工安装
若不能通过以上方式成功安装，可尝试以下方式手动安装
打开Sublime的安装目录下的Packages目录中（可通过点击Sublime Text的菜单->preferences->Browse Packages打开目录
下载相关插件安装包并且拷贝到Packages目录下
重启Sublime
使用Package Control安装其他插件
安装好Package Control后，按下Ctrl+Shift+P调出命令面板输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。
也可以通过点击Sublime Text的菜单->preferences->Package Control打开安装插件命令面板。
相关问题
1、国内使用SublimeText3，如遇到连Package Control也无法安装的问题
则可以在别处拷贝一份关于Package Control的文件(Package Control.sublime-package)存放于Installed Packages目录之下即可。
2、如果在sublime 的 console 安装 package control 出现 275309 错误
那么去打开 Preferences->Settings 找到 ignored_packages 配置选项，删除其中对 Package Control 的约束即可。
如果有其他问题，可以在论坛中查找。
https://forum.sublimetext.com/
参考资料
Sublime Text 官网 :https://www.sublimetext.com/
Package Controller installation:https://packagecontrol.io/installation#st2
```
#### [资料] Sublime 常用插件
```
Sublime 常用插件
Sublime 编辑器有十分丰富的插件，下面我们接受几个前端比较常用的插件(插件安装方式可以参考我们前面的介绍)
Emmet
一个很方便生产html代码块的插件，比如要输入下面复杂的html结构，只需要这样输入 ul.nav>li.item*5>{常用插件 $}
然后按 Tab 即可快速生成。
<ul class="nav">
<li class="item">常用插件 1</li>
<li class="item">常用插件 2</li>
<li class="item">常用插件 3</li>
<li class="item">常用插件 4</li>
<li class="item">常用插件 5</li>
</ul>
SideBarEnhancements
增强侧边栏右键菜单，增加比如复制,高级查找等功能。
安装前：
SideBarEnhancements
安装后：
SideBarEnhancements
JsFormat
自动帮你格式化js代码的插件，可以帮助你对齐代码或者美化被压缩后的js代码。
格式化前：
function a() {console.log('a');}
function b() {
console.log('b');
}
格式化后：
function a() {
console.log('a');
}
function b() {
console.log('b');
}
DocBlockr
方便写注释的插件，还会自动分析函数名和参数，帮你自动生成函数注释。
DocBlockr
SublimeLinter
SublimeLinter插件可以对代码进行检测并且提示，经常配合SublimeLinter-jshint 和 SublimeLinter-csslint 等一起使用。
SublimeLinter
TrailingSpaces
代码里面经常会有一些看不到的没用的空格字符，这个插件可以自动帮你高亮这些字符, 并且可以一键删除。
```
#### [资料] Sublime 定制主题
```
Sublime 定制主题
Sublime Text 除了可以添加各种强大的插件之外，还可以自定义编辑器的主题，当然也可以使用其他开发者分享的第三方主题。
主题
主题（Theme），字面的意思非常宽泛，在我的编辑工具领域，主题特指编辑器的界面样式，也就是编辑器的长得模样。
底下的截图就是 Sublime 默认的界面。
大家应该看到图片上有个红框，整个界面的样式我们称作主题（Theme），而这个红框，也就是我们编辑代码的区域，它的样式，
在 Sublime 中可以单独定制，我们叫这个编辑区的样式为 Color Schema 。
说这么多，主要是为了让大家搞清主题的构成：一个是非编辑区，比如左侧导航、顶部菜单等等；另一个是编辑区，
它有专门定制样式的地方，Color Scheme 。
安装切换主题
搞清主题之后，接下来我们肯定就是尝试改变主题。Sublime 是一款非常流行的编辑器，所以社区的主题非常非常多，
我们可以在这里↗查找。
接下来我们以 Spacegray 为例，来介绍主题的安装和切换。
第一步，打开 Package Control 搜索对应的主题，你应该会看到下图的样子，选择“Theme - Spacegray”，确认。
不清楚 Package Control 的可以翻看我们前面的扩展资料。
安装完成后，界面并没有变化，这个时候就需要进行第二步了，配置主题。
第二步，配置主题，打开我们配置文件，不清楚配置文件的，还是翻看我们前面的扩展资料啊。
和我们主题相关的配置项有两个，分别是 theme 和 color_scheme ，如下：
{
"theme": "Spacegray Eighties.sublime-theme",
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme"
}
配置好保存，这个时候我们界面就会改变了，如图：
是不是顺眼很多呢？不顺眼也没关系，我们下面还会推荐更多流行的主题，大家可以根据自己的喜好选择。
另外，Spacegray 这个主题还有它自己的配置项，大家可以自己去试试看。
推荐主题
主题，更多的是和个人喜好有关，得自己多去动手发掘。
这里介绍几个业界流行的。
solarized
solarized 是一块通用的配色，有明暗两套风格，从 linux 上的终端到 windows 的 IDE 都有它的身影，官方网站↗ 。
Sublime 的 solarized 自然被开发出来，大家可以试试。
tomorrow
和 solarized 非常的像，tomorrow 也是一款通用的配色，官方网站↗ ，Sublime 也支持 。
Material
Material 真的是从 Sublime 里面流行开来的，估计也会慢慢演变为通用的配色方案，
[官方网站↗]（http://equinsuocha.io/material-theme/) 。
推荐主题的文章有很多，比如这个↗，大家平时多关注就好
自己动手
当然可以自己把主题修改成自己想要的样子，但是比较耗时间，感兴趣的同学可以参考这里↗。
参考资料
Color Schemes:http://docs.sublimetext.info/en/latest/reference/color_schemes.html
```
- Part 0：开启你的Web前端之旅
- 学习大纲
- Part 1：HTML 基础
- 认识HTML
- HTML元素
- 专业级开发环境
- 嵌套及HTML树
- Part 2：CSS 基础
- CSS 盒子
- CSS 基础
- 锻造利器——编辑器
- 属性和值
- 选择器
- 样式计算
- Part 3：HTML CSS
- CSS动画
- CSS布局
- CSS预处理
- 响应式
- Part 4：JS 基础
- BOM
- DOM
- JavaScript 语言基础
- jQuery 简单教程
- 流程控制
- 事件
- Part 5：JS 进阶
- Canvas进阶
- canvas入门
- 创建对象
- 继承
- Part 6：性能与工程
- nodejs简介
- 工程化
- 浏览器渲染简述
- 模块化
- 性能
- 网络通路简介
- Part 7：JS 应用开发
- Ajax
- React
- 设计模式
- 正则表达式
- Part 8：项目中的测试
- Jest
- 基本概念
- Part 9：安全攻防战
- Cookie
- CSRF
- XSS
- 更多安全
- Part 10：面经大放送
- 面试经验