为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
前端开发工具技巧介绍—Sublime篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

前端开发工具技巧介绍—Sublime篇

GreenBoots Web前端工程师
难度入门
时长 1小时 0分
  • 在Javascript语法环境中,Tools->Command Palette… (shift+command+P) 打开命令模式,输入Snippet,选择“Snippet:function"命令可以快速创建函数,通过tab键可以快速切换输入参数和函数体,通过sublime Text自带输入的缩写词也能自动补全代码语句,如输fun 选择提示的fun Function,就会生成函数: function function_name (argument) { // body... }, 输人ife选第一个回车,就会生成: if (true) {} else{} 安装Javascript&NodeJs Snippets 以及jQuery插件, ,很方便的提高生产力,具体指令说明:https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets ,https://packagecontrol.io/packages/jQuery 方便的完成回调函数 安装Insert Callback插件,https://packagecontrol.io/packages/Insert%20Callback 按alt+C就能自动生成回调函数。 《Sublime Text3 snippets》 Snippet Function 1.[ctrl+shift+P]+輸入'pci'+輸入'Snippet: Function' 2.輸入'fun'+[Enter],自動產生 function 3.輸入'ife',自動產生 if else JavaScript snippets 1.[ctrl+shift+P]+輸入'pci'+輸入'JavaScript Completions' 2.輸入'gi',自動產生 getElementById JQuery snippets 1.[ctrl+shift+P]+輸入'pci'+輸入'JQuery' 2.輸入'get',自動產生 get請求 3.輸入'post',自動產生 post請求 Insert Callback 1.[ctrl+shift+P]+輸入'pci'+輸入'Insert Callback' 2.[alt+C],自動產生 callBack function
    查看全部
  • Snippets可以提高代码编写的效率 Snippet Function 1.[ctrl+shift+P]+輸入'pci'+輸入'Snippet: Function' 2.輸入'fun'+[Enter],自動產生 function 3.輸入'ife',自動產生 if else JavaScript snippets 1.[ctrl+shift+P]+輸入'pci'+輸入'JavaScript Completions' 2.輸入'gi',自動產生 getElementById JQuery snippets 1.[ctrl+shift+P]+輸入'pci'+輸入'JQuery' 2.輸入'get',自動產生 get請求 3.輸入'post',自動產生 post請求 Insert Callback 1.[ctrl+shift+P]+輸入'pci'+輸入'Insert Callback' 2.[alt+C],自動產生 callBack function 在Javascript语法环境中,Tools->Command Palette… (shift+command+P) 打开命令模式,输入Snippet,选择“Snippet:function"命令可以快速创建函数,通过tab键可以快速切换输入参数和函数体,通过sublime Text自带输入的缩写词也能自动补全代码语句,如输fun 选择提示的fun Function,就会生成函数: function function_name (argument) { // body... }, 输人ife选第一个回车,就会生成: if (true) {} else{} 安装Javascript&NodeJs Snippets 以及jQuery插件, ,很方便的提高生产力,具体指令说明:https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets ,https://packagecontrol.io/packages/jQuery 方便的完成回调函数 安装Insert Callback插件,https://packagecontrol.io/packages/Insert%20Callback 按alt+C就能自动生成回调函数。
    查看全部
  • package control 来管理插件 : sublime.wbond.net 安装完PC需要重启 ctrl + shift +p 启动命令模式 pci : 模糊匹配package control install theme : soda, flatland, spacegray
    查看全部
  • Sublime 管理跟新类库: 1,下载插件 nettus fetch 2,命令行: 管理 fetch:Manage(可配置需要的) 3,如何用fetch 快速下载JQuery 1)Ctrl+Alt+N 在public/js/jquery.js 创建文件 2)在文件中,Ctrl+Shift+P fetch File JQuery下载
    查看全部
  • 在Sublime内部,做服务器响应的测试Post请求: // POST http:// // Content-type: application/x-www-form-urlencoded // POST_BODY: // ac=weeklyregister_register&code=weeklyregister&wapid=ma_62
    查看全部
  • 在Sublime内部,做服务器响应的测试Get: 1,下载插件httprequest 2,注解标注 localhost:3000/users/ 快捷键:Ctrl+Alt+R ====>在新的Tab页里看到服务器的响应
    查看全部
  • 插件advanceNewfile :快速在指定目录下创建文件 Ctrl+Alt+N 输入文件名即可在当前文件夹下创建文件; Ctrl+Alt+N输入带路径的文件名即可在该路径下创建文件,如果路径不存在,便创建出该路径
    查看全部
  • 《Sublime Text3 snippets》 Snippet Function 1.[ctrl+shift+P]+輸入'pci'+輸入'Snippet: Function' 2.輸入'fun'+[Enter],自動產生 function 3.輸入'ife',自動產生 if else JavaScript snippets 1.[ctrl+shift+P]+輸入'pci'+輸入'JavaScript Completions' 2.輸入'gi',自動產生 getElementById JQuery snippets 1.[ctrl+shift+P]+輸入'pci'+輸入'JQuery' 2.輸入'get',自動產生 get請求 3.輸入'post',自動產生 post請求 Insert Callback 1.[ctrl+shift+P]+輸入'pci'+輸入'Insert Callback' 2.[alt+C],自動產生 callBack function
    查看全部
  • ctrl + shift +p 启动命令模式 pci : 模糊匹配package control install theme : soda, flatland, spacegray
    查看全部
  • 1,Ctrl+P 打开Goto anything #body 定位到当前页Body Ctrl+Enter 换行,在Body下插入一行 2,无序列表【装emmet插件之后】 ul> > 代表ul的子元素 . 代表class class 已item 开头 $ 代表序号 *10 代表输出10个 Ctrl+e 补齐功能,一次生成10行元素 Ctrl+} 增加缩进 Ctrl+{ 减少缩进
    查看全部
  • jshint配置文件以.jshintrc命名,基本格式为json格式,配置之后要把校验文件重新保存 jshint.com/docs/options网站对所有可配置的说明
    查看全部
  • linter为代码校验系统 sublimelinter是个总体框架,针对特定语言还需要安装特定的linter jshint为加强版的jslint
    查看全部
  • docblockr快速添加注释,输入/*、/**回车自动补齐,在函数functions上方输入/**,再Tab自动补齐为对函数的说明
    查看全部
  • 测试post请求,(无需表单模拟)
    查看全部
  • 测试get请求:注解需要测试的路由地址,选中路由地址,Alt+Ctrl+R(http requester插件),将在新tab页中看到测试结果。
    查看全部

举报

0/150
提交
取消
课程须知
1.具有前端开发经验; 2.对HTML+CSS+JavaScript内容熟悉掌握。
老师告诉你能学到什么?
1.快速提高编辑水平; 2.增加网络开发专业能力。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!