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)
  1. 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版本。

  1. 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"}]},

  2. 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,选择需要形成的格式即可。

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

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

    1.png

  3. 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+鼠标右键:向下拖动,产生多个光标。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 11,310评论 1 34
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    晚晴幽草阅读 710,852评论 149 1,114
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,474评论 0 27
  • Eclipse常用快捷键 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/)快速...
    山不转人自转阅读 1,434评论 0 10
  • 前言 相信对于很多写代码的小伙伴来说,对于开发编辑器都不会陌生,什么editplus,dw,webstorm,hu...
    itclanCoder阅读 1,594评论 1 8