慕课网

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

最热最新

CMinC

snippets以模板的方式编程编码过程中使用snippets使编码速度更快，保持良好的编码风格以JavaScript为例介绍snippets 将语法模式切换为JavaScript，定义函数： function foo(name) { console.log(name); } 使用snippets简化操作： 1.使用命令模式 Ctrl+Shift+P打开命令模式，输入"snip"（选择"Snippet:Function"），自动生成function定义的结构： function function_name (argument) { // body... } 把"function_name"改为"foo"，按'tab'键跳到"argument"，改为"name,height"，再按'tab'键跳到"// body..."，改为"console.log(name + height);" 2.使用自动补全功能输入"fun"回车，生成function定义的结构： function function_name (argument) { // body... } 输入"ife"回车，生成if-else的基本结构： if (true) {} else{}; 输入"fun"回车，将function定义为： function Person (name) { this.name = name; } //给Person类定义一个实例函数输入"p"（Prototype）回车，生成如下结构： class_name.prototype.method_name = function(first_argument) { // body... }; 把"class_name"改为"Person"，按'tab'键跳到"method_name"，把函数名起为"speak"，继续按'tab'键跳到"first_argument"，参数改为"content"，再按'tab'键跳到"// body..."，改为"console.log(this.name + 'speak ' + content);"

查看全部

0 采集收起来源：snippets以模板的方式编程
2018-03-22
一张白纸_

ctrl p

查看全部

0 采集收起来源：学以致用——Sublime综合技巧运用
2016-07-26
慕粉3696513

ctrl + shift + p 快速更改文件类型 ctrl + p 快速查找并打开文件如：wista/index.html ctrl + p 快速定位并边界如：@body 可以快速定位到当前文件的body标签也可以把上面两个操作合二为一如wista/index.css@body 可以快速打开index.css文件并找到body标签

查看全部

0 采集收起来源：Goto Anything
2016-07-26
大蜗牛0 01:53

本节需要再学习，本地快速测试

查看全部

0 采集收起来源：Sublime辅助技巧 - httpRequest
2016-07-25
慕工程2957023

1.Ctrl+Shift+p,输入pci,回车输入sublimelinter进行安装 2、然后在安装相应的代码提示，比如jshint--使用package Control安装 3、安装完之后再安装node.js 4、然后在node.js dos命令窗口安装jshint npm install -g jshint 自定义配置 .jshint { "eqeqeq":true} http://jshint.com/docs/options 安装sublinmelinter-cssint npm install -g csslint csslint -version SublimeLinter 1.[ctrl+shift+P]+輸入'pci'+輸入'SublimeLinter' 2.[ctrl+shift+P]+輸入'pci'+輸入'sublimeLinter-jshint' 3.下載'nodejs'，網址'http://nodejs.org/' 4.開啟命令提示字元，輸入'npm install -g jshint' 5.重新開啟Sublime，[ctrl+shift+P]+輸入'ssjs'，即可使用jslint 6.在路徑下新增檔案'.jshintrc'，即可定義規則參考網址'http://jshint.com/docs/options/' Ex: { "eqeqeq":true } 進行3等號校驗道格拉斯·克罗克福德（Douglas Crockford），http://www.ueren.com/person/view_16335.shtml JSLint，对JS进行语法校验 ·http://www.jslint.com - JSLint,The JavaScript Code Quality Tool ·http://www.jshint.com - JSHint, a JavaScript Code Quality Tool SublimeLinter，一个Linter系统/框架在安装JSHint之前，需要先安装Node.js npm install -g jshint (使用Node的版本管理进行安装) 在Sublime Text使用JSHint需要其版本大于2.4 Lint自定义规则 > .jshintrc文件，具体的规则定义方式可详见jshint网站

查看全部

0 采集收起来源：Sublime-使用lint进行语法及风格校验
2018-03-22
慕工程2957023

一些插件及与其相关的快捷键的使用：（1）Emmet插件：安装Packet：菜单栏View->Show Console->粘贴text2或text3的Packet配置信息->重启软件->Ct+N（新建文档）->Ct+Sh+P->输入pci->查找要安装的插件，如emmet 安装好Emmet插件后：！+Ct+E:迅速生成html的基础元素 Ct+P:查找时加 #元素名；找到后，若要在该行下新加一行，可按 Ct+Enter 在文档中写： ul>.item$*10 ,再按Ct+E，则一次性生成10个<li class="item(1/2/3/../10)"></li> 即父元素> .（表示有class标签或用 # 表示有id值）类名（id名）$*（子元素出现次数），再Ct+E 在文本中写 h2{this is good} 再按Ct+E,则生成 <h2>this is good</h2> Ct+ 键盘上含 } 的键：文本缩进 Ct+Sh+V：粘贴时保持复制时的格式，如缩进等（2）insert callback插件 Alt+C：删除多于的符号（3）advanNew 用于创建文档的同时命名、保存该文档 Ct+Alt+N:在不用打开相关文件夹的情况下新建文档，需填写路径到文档名.html（或其他类型文档）（4）httpRequester 用于测试地址 Alt+Ct+R:测试 localhost（:端口号）/... (5)netauke Snip (6)sidebar enhancement 右击对应文档，有直接浏览该页的选项（7）docblockr 用于简化注释拼写 /** +Tab键：可有函数的注释格式 /** 或 /* + 回车键：其余注释符自动补充（8）sublimelinter-jshlint 用于语法、风格的检验安装jsnode插件 -> 安装sublimelinter-jshlint插件 ->运行cmd，输入 npm install -g jshint ->最后到sulimt软件里检验补充9.html代码对齐插件 html beautiful；安装后快捷键ctr + alt + shift + f

查看全部

0 采集收起来源：Sublime-使用lint进行语法及风格校验
2018-03-22
学渣君丶

ctrl+shift+p:打开命令模式

查看全部

0 采集收起来源：Sublime-命令模式
2016-07-25
慕工程2957023

1,新建立一个js的文件，Ctrl+shift+p输入pci安装docblockr 2,输入/*按回车，补充注释。 3，输入/**按回车，补充多行注释。 4，在写好的函数上方输入/**按tab键，自动补充函数说明

查看全部

0 采集收起来源：Sublime-快速添加注释
2016-07-25
慕工程2957023

设置sublime text2/3支持浏览器预览 1. 安装SideBarEnhancements插件 ctrl+shift+p —> Install Package —> 找到SideBarEnhancements SideBarEnhancements 2. 配置预览快捷键 Preferences —> Key Bindings - User 将以下代码复制到数组中。 // chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe", "extensions":".*" } }, // firefox { "keys": ["f3"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "D:/Program Files (x86)/Mozilla Firefox/firefox.exe", "extensions":".*" } }, // ie { "keys": ["f4"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Program Files/Internet Explorer/iexplore.exe", "extensions":".*" } } 上面的代码中有两处需要注意的地方，一个是keys表示快捷键，即f2可以启动chrome进行预览。另一个是application，表示浏览器所在的安装路径，只有路径配置正确，才能够正常调用浏览器

查看全部

0 采集收起来源：Sublime辅助技巧 - sidebarenhancement
2018-03-22
学渣君丶

ctrl+shift+d:复制 ctrl+d:多行光标 shift+鼠标右键：多行光标 alt+f3

查看全部

0 采集收起来源：Sublime-多行游标
2016-07-25
慕工程2957023

sideBarEnhancements插件只对project起作用对单个打开的文件无效直接在左侧工具栏里右键，选择'Open In Browser'进行浏览器预览

查看全部

1 采集收起来源：Sublime辅助技巧 - sidebarenhancement
2016-07-25
YshuuuJ

Ctrl+H,查找替换 Ctrl+D，选择当前光标所在单词，重复Ctrl+D进行多次选择，产生多行游标，Ctrl+K加Ctrl+D跳过不需要操作的内容使用单词选择产生多行游标方式一：多次使用Ctrl+D选择单词，可用Ctrl+K加Ctrl+D跳过不需要操作的单词方式二：选中第一个单词，输入Alt+F3选中所有相同的单词方式三：通过拆行的方式产生多行游标，输入Ctrl+A，再输入Ctrl+Shift+L 方式四：使用鼠标进行拖拽，可在任何地方产生多行游标，按住Shift键，再按住鼠标右键，向下拖拽产生多行游标

查看全部

0 采集收起来源：Sublime-多行游标
2016-07-25
慕工程2957023

htttpRequester node.js的express框架下载httpRequesterer 1.在Sublime内部，做服务器响应的测试Get请求 router.get('/',function(req,res){res.send('request with a resource');}); 注释需要测试的路由地址//localhost:3000/users/并选中 ctrl+alt+R 200 OK服务器响应正确在Sublime内部，做服务器响应的测试Post请求: // POST http:// // Content-type: application/x-www-form-urlencoded // POST_BODY: // ac=weeklyregister_register&code=weeklyregister&wapid=ma_62

查看全部

0 采集收起来源：Sublime辅助技巧 - httpRequest
2018-03-22
慕工程2957023

htttpRequester node.js的express框架下载httpRequesterer 1.在Sublime内部，做服务器响应的测试Get请求 router.get('/',function(req,res){res.send('request with a resource');}); 注释需要测试的路由地址//localhost:3000/users/并选中 ctrl+alt+R 200 OK服务器响应正确在Sublime内部，做服务器响应的测试Post请求: // POST http:// // Content-type: application/x-www-form-urlencoded // POST_BODY: // ac=weeklyregister_register&code=weeklyregister&wapid=ma_62

查看全部

0 采集收起来源：Sublime辅助技巧 - advanceNewfile
2018-03-22
慕工程2957023

ctrl+n:新建 ctrl+s：保存；安装advanceNewFile插件，ctrl+alt+n在该目录下创建文件或者命名文件； Ctrl+Alt+N输入文件名即可在当前文件夹下创建文件； Ctrl+Alt+N输入带路径的文件名即可在该路径下创建文件，如果路径不存在，便创建出该路径

查看全部

0 采集收起来源：Sublime辅助技巧 - advanceNewfile
2016-07-25

首页上一页 77 78 79 80 81 82 83 下一页尾页

0/150

提交

取消

该课程已下架

课程须知: 1.具有前端开发经验； 2.对HTML+CSS+JavaScript内容熟悉掌握。

老师告诉你能学到什么？: 1.快速提高编辑水平； 2.增加网络开发专业能力。