前端学习总结-06-Sublime Text在前端中的使用.pdfVIP

新建⽂件时快速⽣成Html 安装如下插件： FileHeader ：⾃动创建⽂件开头模板，并且会根据最后的保存时间修改更新时间。官⽹链接。 CSS Format ：css格式化。 Emmet ：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是⼀个能⼤幅度提 ⾼前端开发效率的⼀个⼯具。这个软件的安装过程⽐较久。官⽹教程。 开始使⽤： 新建⽂件，输⼊ html:5 ，按[Ctrl + E] 或者 Tab 键， 参考链接：Sublime Text 新建⽂件快速⽣成Html 【头部信息】和【代码补全】、【汉化】 常⽤插件 SublimeCodeIntel ：JavaScript 代码⾃动提示（不好⽤） 安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开 配置⽂件。 将 "codeintel_selected_catalogs": ["jQuery"] 改为： "codeintel_selected_catalogs": ["JavaScript"] 保存后重启软件。 参考链接：# javascript complet ：JavaScript 代码⾃动提示 官⽹链接 GitHub链接 在google上搜关键字"sublime javascript complete"找到的。另外还搜到⼀个SublimeAllAutocomp lete JsFormat ：JS 代码格式化 快捷键是：选中JS 代码，然后按ctrl+alt+f。 或者，先⽤快捷键打开命令⾯板 “ctrl + shift + p”, 再输⼊ “Format: Javascript” 就可以使⽤格式化命令 Sublime Server 我们如果右键在浏览器中打开html⽹⻚，其实是以⽂件路径的⽅式打开的，导致很多api⽆法操作。最 好的办法是：将html在服务器上打开。 我们如果安装 Sublime Server ，就可以让⽹⻚在本地的服务器上打开。 安装成功之后，使⽤步骤如下： （1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。 （2）在html⽂档⾥，右键选择 "View in SublimeServer" 。 如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭⽅式容易导致软件卡死。 代码快速⽣成 （1） > 符号的技巧： 输⼊ ul>li*9 ，然后按tab键，⽣成的代码如下；（符号 > 是包含的关系） <div> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </div> </div> sublime text 快捷键 Win快捷键 Mac快捷键 作⽤ 备注 html:5+tab html结构代码 tab 补全标签代码 ⽐如，在html⽂件中输 ⼊ div ，然后按住tab键 tab 补全标签代码 后，会⾃动⽣成 <div> </div> 。 Ctrl + Shift Cmd + Shift +