首页 > 其他分享 >Sublime Text在前端中的使用

Sublime Text在前端中的使用

时间:2023-04-20 12:48:26浏览次数:46  
标签:Ctrl Text 前端 快捷键 html Shift 代码 Sublime

新建文件时快速生成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代码自动提示

在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 补全标签代码
tab 补全标签代码 比如,在html文件中输入div,然后 按住tab键后,会自动生成<div></div>
Ctrl + Shift + D Cmd + Shift + D 复制当前行到下一行
Ctrl+Shift+K 快速删除整行
Ctrl+鼠标左键单击 集体输入
Ctrl+H Option+Cmd+F 查找替换
Ctrl+/ 注释单行
Ctrl+Shift+/ 注释多行
Ctrl+L 快速选中整行,继续操作则继续选择下一行,效果和 Shift + ↓ 效果一样
Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行 经常与上一个快捷键结合起来使用
Ctrl + Shift +【↑/↓ Ctrl + Cmd +↑/↓ 移动当前行
F11 全屏

推荐阅读

我自己整理的。

参考链接

标签:Ctrl,Text,前端,快捷键,html,Shift,代码,Sublime
From: https://www.cnblogs.com/full-stack-linux-new/p/17336372.html

相关文章

  • context:component-scan扫描使用上的容易忽略的use-default-filters
    评:问题如下方式可以成功扫描到@Controller注解的Bean,不会扫描@Service/@Repository的Bean。正确Java代码收藏代码<context:component-scanbase-package="org.bdp.system.test.controller"><context:include-filtertype="annotation"expression="org.spri......
  • AES算法 前端JavaScript加密 后端Java解密
    CryptoJShttps://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js中文文档https://cryptojs.gitbook.io/docs/varAES=function(){ constuuid32="00010203-04050607-08090A0B-0C0D0E0F".toString();constparam=Array.from(uuid32......
  • 前端跨域解决方案——JSONP
    JSONP(JSONwithPadding)是一种跨域请求的解决方案,它允许在不受同源策略限制的情况下从一个域中向另一个域中请求数据。JSONP的基本原理是利用<script>标签的src属性没有跨域限制的特性来实现跨域数据访问。在使用JSONP时,需要在客户端创建一个script标签,将需要访问的资......
  • http 前端5种请求优化方法
    1、减少请求数量:可以通过将多个资源(例如JavaScript、CSS、图像等)合并为单个文件,从而减少HTTP请求的数量。另外,使用CDN(内容分发网络)也可以减少跨地                域的请求延迟。2、缓存请求结果:对于一些不会频繁更新的资源,可以将它......
  • winform panel动态添加textbox控件
    //控件宽高intcontrol_w=159;intcontrol_h=55;//间隔距离intinterval_x=20;intinterval_y=20;//列可放置数量introw_count=3;///<summary>///动态加载人员选择框......
  • Sublime Text4 如何修改主题,如何修改配色方案
    第一步,打开SublimeText4,在顶部的菜单找到:Preferences,点击并在下拉菜单选择SelectColorScheme,在弹出的窗口,点击Monokai,这样配色方案就切换为旧版本的样式了。......
  • 前端面试题总结
     1递归是什么?  递归确定只是函数自调用吗? 如果非得要用递归渲染一个菜单,你要怎么做.说具体的步骤. 说核心.//第n项的和sum(n)=sum(n-1)+n终止条件n=1functionsum(n){if(n==1)return1returnsum(n-1)+n}letamount=sum(100)console.log......
  • 前端(七)
    前端(七)jQuery属性操作#属性操作就是给标签增加删除之类的#js中如果是自带属性就是点语法不是自带属性就是div.setAttritube('k','v')JQuery: 1.attr(attrName);#获取匹配到的属性2.attr(attrName,value);#设置一个属性3.romoveAttr(attrName);#删......
  • 漫谈前端自动化测试演进之路及测试工具分析
    作者:京东零售杜兴文随着前端技术的不断发展和应用程序的日益复杂,前端自动化测试也在不断演进。Web前端UI自动化测试发展史可以追溯到2000年,当时最早的Web应用程序越来越复杂,开发人员开始使用自动化测试工具来确保应用程序的正确性和可靠性。在早期,自动化测试是通过使用......
  • web前端
    工程认知——Web前端Week1一、课程概要、要求和学习方法概要:本课程将系统地学习现代软件前端开发的实用技术,在前端技术中属于中级实用技术范畴。课程包含前端三大部分HTML5、CSS3、JavaScript、前端框架和后端框架,循序渐进地将每一部分的实用技术结合讲解、演示,最后交予学生不......