MacSublime Text3 前端开发环境配置

一.下载Sublime-安装PackgeControl

1. Sublime下载地址
2. 打开Sublime Text控制台（快捷键Ctrl+`）在控制台粘贴以下代码，按回车执行.

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)

3. PackgeControl的基本操作:
   3.1 shift+command+p 打开管理面板
   3.2 Install Package 把插件名输入就可以了找到你想要的插件点击下载安装就可以了
   3.3 Remove Package 移除插件
   3.4 Upgrade Package 更新插件

二.通过PackgeControl下载安装插件

1. AutoFileName:引用文件路径补全

2. ColorPiker:调色板，需要输入颜色时，可直接选取颜色。使用快捷键ctrl+shift+c即可打开调色板。需要注意的是，这个快捷键可能会打不开调色板，原因是该快捷键被占用了，最直接的解决办法是直接在Preferences→Key Bindings-User中配置：“{ "keys":["ctrl+shift+c"],"command": "color_pick"},”
   convertToUTF8和ColorPicker快捷键冲突，convertoUTF8的默认转换GBK的快捷键 和 ColorPicker打开调色板的快捷键都是ctrl+shift+c 可以去修改convertoUTF8的快捷解决。

3. Doc​Blockr: 代码块注释
   /:回车创建一个代码块注释
   /*:回车在自动查找函数中的形参等等

4. Emmet: 不做解释

5. HTML-CSS-JS-Prettify:
   格式化HTML,CSS,javascript和Json代码格式。使用该插件，需要安装nodejs，而且要在Packages-Setting→HTML/CSS/JS Prettify→set node path中设置你node的安装路径。使用过程：Tools→Command Palette(或者Ctrl+Shift+P)，输入选择htmlprettify即可完成整个文档的格式化。也可以设置快捷键：Packages-Setting→HTML/CSS/JS Prettify→set keyboard shortcuts，因为我的ctrl+shift+h已经被占用，所以我改成ctrl+shift+alt+h。

6. SideBarEnhancements:我常用的两个功能是设置文件使用浏览器打开的快捷键F12和重命名F2，需要自己往Key-Bindings-User里面添加{ "keys": ["f12"], "command": "side_bar_open_in_browser","args":{"paths":[], "type":"testing", "browser":""}},
   { "keys": ["f2"], "command": "side_bar_rename"},

7. ColorHighlighter 它可以展示你所选择的颜色代码（像“#FFFFFF”, “rgb(255,255,255)”, “white”）的真正颜色。同时它还包含一个颜色选择器让你可以方便地更改颜色。
   查看介绍

8. BracketHighlighter: 括号以及标签层级显示，不用担心选中的代码属于哪个代码块，一目了然。

9. CSS3 语法高亮、CSS语法提示，美中不足的是缺少游览器私有属性高亮。

10. ConvertToUTF8:
    通过本插件，您可以编辑并保存目前编码不被 Sublime Text 支持的文件，特别是中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP 等。可以通过 File→Set File Encoding to 菜单对文件编码进行手工转换。例如，您可以打开一个 UTF-8 编码的文件，指定保存为 GBK，反之亦然。

11. JavaScript Completions: 或者 SublimeCodeIntel js代码智能提示

12. SublimeLinter:代码校验
    12.1 Package Control: Install Package 安装 SublimeLinter-jshint
    12.2 这个工具需要依赖node.js 访问官网下载Node.js，并进行安装。
    Windows平台：按Windows键+X，在弹出的菜单中选择命令提示符（管理员），输入以下代码进行安装：npm install -g jshint
    Mac OS X平台：在工具中，打开终端，输入 sudo -s，获取root权限，然后输入以下代码进行安装： npm install -g jshint
    jshint -v 可查看安装的jshint版本。
    12.3 csslint的安装方法与jshint一致，只需要在sublime text 3的package control中再安装SublimeLinter-csslint，然后在命令行中以下代码安装csslint即可。
    输入 csslint --version可查看安装的csslint版本。

13. JsFormat
    JsForma可以自动帮助你格式化JavaScript代码，形成一种通用的格式，比如对压缩、空格、换行的js代码进行整理，使得js代码结构清晰，易于观看。在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F），如果该热键被占用了，可以在Preferences→Key Bindings-User中配置： { "keys": ["ctrl+shift+alt+j"], "command": "js_format","context": [{"key": "selector", "operator": "equal", "operand": "source.js,source.json"}]},

14. Alignment
    对定义的变量进行智能对齐,一般是“=”号对齐，默认的快捷键是Ctrl+Alt+A，但这个热键和QQ截屏的热键冲突不能使用，需要自己重新设置，我通常设置成Ctr+Alt+Shift+A，以下粘贴到Key-Bindings-User里面：{ "keys": ["ctrl+alt+shift+a"], "command": "alignment" },

15 CSS Format
CSS Format可以将任意的 CSS、SASS、SCSS、LESS 代码格式化为展开、紧凑、压缩的形式，选中需要格式化的样式代码，右键选中CSS Format，选择需要形成的格式即可。

16. JavaScript Next：完美支持ECMAScript 6
    JavaScript Next 提供了比默认JavaScript Package更好的语法高亮，而且他完美支持ECMAScript 6。 建议完全使用 JavaScript Next代替JavaScript Package。

17. sublime-autoprefixer
    功能：CSS添加私有前缀
    简介：CSS还未标准化，所以要给各大浏览器一个前缀以解决兼容问题
    使用：Ctrl+Shift+P，选择autoprefixer即可。需要安装node.js。
    其他设置如快捷键请参考：https://sublime.wbond.net/packages/Autoprefixer
    

    

    1.png

18. Git :版本控制
    可视化的操作：帮助你与你的Git repo协议进行交互。它支持很多命令像init, push, pull, branch, stash,等等。了解更多关于你在Sublime Text里面究竟能使用哪些Git功能，以提高您的工作流程。使用参考
    17.1GitGutter:Sublime Text 有了 Git 插件之后，GitGutter 更好的帮助开发者查看文件之前的改动和差异，提升开发效率。

三. 注意点

1. 插件下载完可能会有快捷键冲突需要自己手动修改
   直接打开
   

   屏幕快照 2018-07-05 下午4.32.29.png
   
   找对应插件的默认配置文件
   

   屏幕快照 2018-07-05 下午4.32.54.png
   
   这里你可以了解到每个功能使用的快捷键和一些其他信息。
2. sublime text 3 在写 css 时自动提示类名的解决方案
3. 自己写的js代码外部引入不提示问题，小编也很费解,不过在解决上面的问题后，js提示有效了。（是个坑，也可能导入js 时没有保存所以不提示,可以command+s,试试）
4. 需要使用angular 或者 jQuery bootstrap 可以直接下载相关插件，会有友好的代码提示.
5. 下面是小编的全部插件列表（有些上面可能没介绍可以自行百度）
   
   

   屏幕快照 2018-07-07 下午1.34.49.png

屏幕快照 2018-07-07 下午1.35.01.png

屏幕快照 2018-07-07 下午1.35.12.png

屏幕快照 2018-07-07 下午1.35.27.png

屏幕快照 2018-07-07 下午1.35.40.png

五 Sublime 的基本操作

1. 界面
   File：文档相关，新建文件,打开文件或文件夹等。
   Edit：文件编辑相关，复制，剪切等（CVS大法好）。除此之外还有一些强大的功能。
   Selection：选择相关，帮助选择代码。
   Find：查找替换相关。这个和其它编辑器区别好像不大。
   Ctrl+F查找、Ctrl+H替换等。
   View：对Sublime_Text编辑器本身的一些配置。
   SideBar:开启侧边栏Ctrl+k,b
   Show console：打开控制台窗口，安装package control需要使用.
   Goto：快捷导航：下面介绍。Goto Anything
   tools:工具，一些命令。
   new Snippet：自定义代码片段，保存到user下
   Project: 项目相关，用的少。
   Preferences：对于sublime_text进行一些个性化定值。
   Help：如同名字。注册在这里

2. 快捷键
   Ctrl+Shift+D：复制当前行
   Ctrl+Shift+K：删除当前行
   Ctrl+j: 合并一行
   Ctrl+Enter：在当前行下添加新行。After
   Ctrl+Shift+Enter：在当前行上添加新行。Before
   Comment注释：
   Ctrl+/：行注释。
   Ctrl+Shift+/：块注释
   Ctrl+Shift+P：调用命令面板，快速查找，例如：改变语法模式等。

   模糊匹配，可以减少对快捷键的记忆。
   Shift+Alt+1，2，3，4，5：开启对应数字的多栏编辑
   Ctrl+P：Goto Anything
   Ctrl+P: 查找项目中的文件：
   直接输入名称：在不同文件中切换，支持级联的目录模式
   :：+ 行号：Ctrl+G 定位到具体的行。
   @：+ 符号：Ctrl+R定位到具体的符号，例如：JS函数名，CSS选择器名。
   #：+ 关键字：Ctrl+;匹配到具体的匹配的关键字。主要是模糊匹配。
   多行游标
   Ctrl+D：选中当前光标所在位置的单词。连续使用时，进行多光标选择，选中下一个同名单词。
   Ctrl+K：配合Ctrl+D可以跳过下一个同名单词。
   Ctrl+L：选择当前光标所在位置的行。连续使用时，继续选中下一行。
   Ctrl+Shift+L：在多行选中后，在所有选中的行后产生游标。
   Alt+F3：选中文档中所有的同名单词。
   Shift+鼠标右键：向下拖动，产生多个光标。

【初来匝道请大家多多指教】