为了账号安全,请及时绑定邮箱和手机立即绑定

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

难度入门
时长 1小时 0分
学习人数
综合评分9.70
728人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.5 逻辑清晰
  •  file—是对文件的操作功能

    Edit—是对文件编辑的一些命令

    · line—duplicate line复制一行,delete line删除一行

    · comment 注释

    界面右下角会显示是打开的文件类型,例如:打开的是JavaScript文件,右下角会显示javascript。


  • 语法和编写风格的校验插件SublimeLinter 1. SublimeLinter插件是总框架,具体语言再另行安装 2. 具体语言风格例如js, 插件为SublimeLinter_JShint 3. 可以自定义校验风格 Eg. "eqeqeq":true //强制三等号验证 4. 需要安装npm包,安装node.js,再安装JShint,在命令行输入:npm install -g jshint,回车安装; 5. 自定义校验规则:在工程中创建配置文件,名字必须是.jshintrc ,用json语言编写。

    1Ctrl+Shift+p,输入pci,回车输入sublimelinter进行安装 2、然后在安装相应的代码提示,比如jshint--使用package Control安装 3、安装完之后再安装node.js 4、然后在node.js dos命令窗口安装jshint npm install -g jshint 自定义配置 .jshint { "eqeqeq":true}


  • 快速添加注释pci->docblock安装 在JS文件中输入 /* -> 按回车键,自动添加注释格式 输入 /** -> 按Table键,自动补全注释说明注释格式

    00:45
    看视频
  • 1,下载插件 nettus fetch 2,命令行: 管理 fetch:Manage(可配置需要的) 3,如何用fetch 快速下载JQuery 1)Ctrl+Alt+N 在public/js/jquery.js 创建文件 2)在文件中,Ctrl+Shift+P fetch File JQuery下载

  • 1.切换语言格式,ctrl+shift+p<br> 2.简化操作 ctrl+shift+p 输入 snippet:function 自动生成function的基本结构!<br> tab键 移动光标到下一个词<br> 自动补全功能,输入前几个英文字母,按enter 自动生成一段代码结构! 4.安装 javascript& nodejs snippets以及jQuery插件, ,很方便的提高生产力,具体指令说明:https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets ,https://packagecontrol.io/packages/jQuery 1.[ctrl+shift+P]+輸入'pci'+輸入'Snippet: Function' 2.輸入'fun'+[Enter],自動產生 function 3.輸入'ife',自動產生 if else

  • 233

    1、Ctrl + H :查找替换
    2、Ctrl + D :选择游标所在单词,连续Ctrl+D 实现多行选择(选择与第一次选择相同的单词)

    3、Ctrl + K    Ctrl + D 跳过当前选择,选择下一个

    4、Ctrl + shift + D:复制并换行粘贴游标所在行

    5、Alt + F3:选择所有与游标所在单词相同的单词

    6、Ctrl+A   Ctrl+Shift+L :多行全选

    7、Shift     鼠标右键拖动:产生多行游标


  • 好看的sublime UI插件:

    Spacegray

    package control官网中查找

  • 语法和编写风格的校验插件SublimeLinter 1. SublimeLinter插件是总框架,具体语言再另行安装 2. 具体语言风格例如js, 插件为SublimeLinter_JShint 3. 可以自定义校验风格 Eg. "eqeqeq":true //强制三等号验证 4. 需要安装npm包,安装node.js,再安装JShint,在命令行输入:npm install -g jshint,回车安装; 5. 自定义校验规则:在工程中创建配置文件,名字必须是.jshintrc ,用json语言编写

  • 快速添加注释 DocBlockr 下载DocBlockr插件,Ctrl+Shift+P打开命令模式,输入"pci"(Package Control:Install Package),在提示框输入"docb",选"DocBlockr"进行安装,完成后可以自行测试,如输入"/*"回车,会自动补全注释块"*/";输入"/**"回车,会自动补全注释块"**/",每次回车时"*"会跟着出现;如输入一个函数: function func (a,b) { return a; } 在函数上面输入"/**",然后按"tab"键,会自动补齐一个注释格式(包含函数的相关信息,函数说明、参数和返回等): /** * [func description] * @param {[type]} a * @param {[type]} b * @return {[type]} */

  • Sidebar enhancement功能:增强Sidebar的功能<br> 功能之一:把文件在浏览器中打开 步骤:下载插件---用GOTO ANYTHING找到需要在浏览器中打开的文件--在Sidebar中找到此文件--点击右键,选择Open in browser--文件即在浏览器中打开

  • 1,下载插件 nettus fetch 2,命令行: 管理 fetch:Manage(可配置需要的) 3,如何用fetch 快速下载JQuery 1)Ctrl+Alt+N 在public/js/jquery.js 创建文件 2)在文件中,Ctrl+Shift+P fetch File JQuery下载

  • htttpRequester node.js的express框架 下载httpRequesterer 1.在Sublime内部,做服务器响应的测试Get请求 router.get('/',function(req,res){res.send('request with a resource');}); 注释需要测试的路由地址//localhost:3000/users/并选中

  • 1.Ctrl+Shift+P--->pci--->adavancedNewFile选中,安装<br><br> 2.Ctrl+Alt+N 新建并保存<br><br> (热键冲突时候为:.Ctrl+Alt+shift+N)<br> 3..Ctrl+Alt+N然后输入创建文件、文件夹及其路径

  • 1.切换语言格式,ctrl+shift+p<br> 2.简化操作 ctrl+shift+p 输入 snippet:function 自动生成function的基本结构!<br> tab键 移动光标到下一个词<br> 自动补全功能,输入前几个英文字母,按enter 自动生成一段代码结构! 4.安装 javascript& nodejs snippets以及jQuery插件, ,很方便的提高生产力,具体指令说明:https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets ,https://packagecontrol.io/packages/jQuery 1.[ctrl+shift+P]+輸入'pci'+輸入'Snippet: Function' 2.輸入'fun'+[Enter],自動產生 function 3.輸入'ife',自動產生 if else

  • 插件安装
    插件官网:https://packagecontrol.io/installation
    步骤:
    (1)复制链接(很长的那个)
    (2)在sublime中输入ctrl+` 输入上面的代码 + 回车 安装完成后重启软件(这里需要国外代理ip翻墙才可以在线安装)
    (3)安装 ctrl+shift+p输入PCIP安装自己需要的插件
    (4)安装自己喜欢的主题,可以在官网查看主题theme
    具体:ctrl+shift+p----》PCIP(安装某个插件)---->theme-spacegray(主题名字)回车

    其他插件方法同上

  • ctrl D

         可选中光标所在位置的单词

        用鼠标选中内容中,按下ctrl D可以选择下方内容的同样内容,在按ctrl D可以选择再下方的重复内容。

    ctrl D + alt  F3

          选中不昂表所在位置的内容之后,按下alt+F3,可以选择页面中所有相同的内容。

    ctrl K

         同ctrl D联合使用,先按ctrl  D可以选中同样的内容,按ctrl  K可以跳过这个内容不进行选择,此时按下ctrl  D可以对再下方的同样内容进行选择。

    ctrl   N

         产生一个新的编辑页面。

    ctrl A

         选中页面所有的编辑内容

    ctrl   L

          选中光标所在行。

    ctrl A  + ctrl  shift   L

           在页面所有内容的每一行后面都会出现光标。

    用鼠标进行拖拽出现多行游标

           按下shift,在按下鼠标的右键,并慢慢往下拖拽,就会在每一行出现光标

            


  • 产生多行游标的3种方式:
    1、使用 Ctrl+D 选择词的过程中可以使用 Ctrl+K、Ctrl+D 跳过;<br>
    2、使用 ALT+F3 可以整页选中选择的词;<br>
    3、默认情况下,使用 “shift+ 鼠标右键点击”可以产生多行游标。<br>

  • 快捷生成固定html标签:!+Ctrl+E  用的是emmet插件

    1、ctrl+shirt+enter 在当前上方添加一行

    2、Ctrl +  enter     在当前下方添加一行

    3、ul>.item$*10{content})+(ctrl+E) > 号生成子元素 ,$ 产生序号,{ }产生内容

    4、Ctrl+] 增加缩进 [ 减小缩进。

    5、alt+f3 全选,可以选中一部分再选择所有有该部分的元素。如 >< 标签之间的两个符号

    6、ctrl+shift+v 保持缩进粘贴

    7、Ctrl  + E    快速生成闭合标签

    8、Alt   +   >.   快速生成闭合标签



  • 1、Ctrl + H :查找替换
    2、Ctrl + D :选择游标所在单词,连续Ctrl+D 实现多行选择(选择与第一次选择相同的单词)

    3、Ctrl + K    Ctrl + D 跳过当前选择,选择下一个

    4、Ctrl + shift + D:复制并换行粘贴游标所在行

    5、Alt + F3:选择所有与游标所在单词相同的单词

    6、Ctrl+A   Ctrl+Shift+L :多行全选

    7、Shift     鼠标右键拖动:产生多行游标

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1.具有前端开发经验; 2.对HTML+CSS+JavaScript内容熟悉掌握。
老师告诉你能学到什么?
1.快速提高编辑水平; 2.增加网络开发专业能力。
意见反馈 帮助中心 APP下载
官方微信