精华内容
下载资源
问答
  • webstorm快捷输入html代码 使用webstorm时,使用以下方法可以更高效的码代码,来自搬运,作为一个成长记录,希望对你们有用,一起来看看吧。 <!DOCTYPE html> <html lang="en"> <head> <meta ...

    webstorm快捷输入html代码

    使用webstorm时,使用以下方法可以更高效的码代码,来自搬运,作为一个成长记录,希望对你们有用,一起来看看吧。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webstorm快键键</title>
    </head>
     
    <body>
     
    <!--
    正常情况:
    先输入:<h1
    再输入:>
     -->
    <h1></h1>
     
    <!--
    >:下一个子标签
    *:多少个标签
    $:标签的名称序号
    {}:标签的内容
    -->
     
    <!--输入:h1,按tab键-->
    <h1></h1>
     
    <!--输入:div#abc,按Tab键-->
    <div id="abc"></div>
     
    <!--输入:div.abc,按Tab键-->
    <div class="abc"></div>
     
    <!--输入: div>p*6 ,按Tab键-->
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
     
    <!--输入 a[href=#] 按tab键-->
    <a href="#"></a>
     
    <!--输入:ul.menu>li*6>a[href=#]{HTML} 按tab键-->
    <ul class="menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">HTML</a></li>
    </ul>
     
    <!--输入  ul>li*5>a[href=#]{我是第$个} 再按tab键-->
    <ul>
        <li><a href="#">我是第1个</a></li>
        <li><a href="#">我是第2个</a></li>
        <li><a href="#">我是第3个</a></li>
        <li><a href="#">我是第4个</a></li>
        <li><a href="#">我是第5个</a></li>
    </ul>
     
    <!--输入 img[src='images/$.jpg']*3 再按tab键-->
    <img src="images/1.jpg" alt="">     
    <img src="images/2.jpg" alt="">     
    <img src="images/3.jpg" alt="">
     
    <!--输入 li*3>div.img>img[src='images/$.jpg'] 再按tab键-->
    <li>
        <div class="img"><img src="images/1.jpg" alt=""></div>
    </li>
    <li>
        <div class="img"><img src="images/2.jpg" alt=""></div>
    </li>
    <li>
        <div class="img"><img src="images/3.jpg" alt=""></div>
    </li>
     
    </body>
    </html>
    
    展开全文
  • 意思就是打完快捷输入后按tab键 例子: 语法五:最后来个嵌套多的。(细品,你细品就会发现很多时候都会用到。) #page>div.logo+ul#nav>li*5>a{Item $} <div id="page"> <div class=...

    HTML模板生成,这个貌似 sublime Text 中用的多,不过也应该知道一下。

    ! +Tab  (Emmet语法默认最后都是+Tab ,下面我就不再多说了)

     意思就是打完快捷输入后按tab键

    例子:

    语法五:最后来个嵌套多的。(细品,你细品就会发现很多时候都会用到。)

    #page>div.logo+ul#nav>li*5>a{Item $}
    <div id="page">
        <div class="logo"></div>
        <ul id="nav">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </div>

     

     

    注:

    1、在 Emmet插件 中,可以利用如:h1{元素内容$}*n 的方式,自动复制生成 n行,$ 的作用是自动升序生成序号,便于测试。

    2、在 Emmet插件 中,loremn(n为字母个数) 可自动输出 n个字母组成 的文本内容。

     

    转自cnblogs.com/byx1024/p/12837934.html

    展开全文
  • webstorm 快捷输入自定义模板总结

    千次阅读 2018-12-24 19:51:00
    修改方法 打开"设置"(Ctrl + Alt + S) 模板 console.log() 插入式 console.log($PARAN$); 包围式 选中被包围的内容按 Ctrl + Alt + J console.log($SELECTION$); function() {} ......
        

    修改方法

    打开"设置"(Ctrl + Alt + S)


    4804567-cb0c46599e1a3464.png

    模板

    console.log()

    • 插入式
    console.log($PARAN$);
    
    • 包围式
      选中被包围的内容按 Ctrl + Alt + J
    console.log($SELECTION$);
    

    function() {}

    function($MODULE_VAR$) {
    $END$
    });
    

    alert()

    alert($PARAN$);
    

    ajax

    $.ajax({
        url: '$PARAN$',
        data:{},
        type: 'post',
        dataType: 'JSON',
        success:function(res) {}
    });
    

    axios

    axios.get(``, {}).then(res => {
        console.log(res);
    }, rej => {
        console.log(rej);
    }).catch(err => {
        console.log(err);
    });
    
    展开全文
  • sudo vim /usr/share/applications/webstorm.desktop 大部分linux的图标入口都在/usr/share/applications/文件夹下 输入内容 “` [Desktop Entry] Categories=Development; Comment[zh_CN]= Comment= E
    1. 系统版本:Ubuntu 16.04
    2. 首先创建一个文件
    sudo vim  /usr/share/applications/webstorm.desktop 

    大部分linux的图标入口都在/usr/share/applications/文件夹下

    1. 输入内容

    “`
    [Desktop Entry]
    Categories=Development;
    Comment[zh_CN]=
    Comment=
    Exec=/home/liangxiaodong/devel/WebStorm-171.3780.79/bin/webstorm.sh
    GenericName[zh_CN]=IDE
    GenericName=IDE
    Icon=/home/liangxiaodong/devel/WebStorm-171.3780.79/bin/webstorm.svg
    MimeType=
    Name[zh_CN]=WebStorm
    Name=WebStorm
    Path=
    StartupNotify=true
    Terminal=false
    Type=Application
    X-DBUS-ServiceName=
    X-DBUS-StartupType=
    X-KDE-SubstituteUID=false
    X-KDE-Username=owen
    ~

    这里写图片描述
    Exec:是文件目录
    Icon:是图标目录
    Terminal:值为false表示启动时不启动命令行窗口,值为true表示启动命令行窗口【建议为false】

    Categories:这里的内容决定创建出的起动器在应用程序菜单中的位置,按照上面的写法创建的起动器将出现在应用程序-Internet中,以此类推,如果想在应用程序-办公中创建起动器,上述最后一行应该写成:Categories=Application;Office;
    4.复制图标到桌面
    这里写图片描述
    我们可以看到Webstorm图标,这时我们可以复制粘贴到桌面
    5.最终效果
    这里写图片描述
    错误分析:目录填写错误,可以先通过pwd命令打印出文件所在位置,复制粘贴

    展开全文
  • WebStorm快捷方式

    2019-01-18 22:32:35
    WebStorm快捷方式   生成标签的方法:直接输入标签名,然后按下tab键即可,比如输入div,然后按下tab键,就可以生成&lt;div&gt;&lt;/div&gt;。   如果想要生成多个相同标签,加上*就可以了。比如div...
  • WebStorm自定义快捷注释 一.点击File,找到Settings,搜索Live Templates,选中需要在那个模块下生成,然后点击加号,添加快捷生成代码 二.Abbreviation填写你要生成的快捷代码,如下图都选择Enter(输入//,按Enter生成...
  • 输入标签,然后按Tab键,无需输入尖括号<> . 其他指令也类似,用tab键来启动自动生成代码指令. 示例: 输入div按tab键,自动出现 <div></div> 一、手机端页面适配快捷键 输入: meta:vp 再按tab键就...
  • WebStorm添加快捷补全

    2019-08-13 10:09:05
    WebStorm添加快捷补全 1.复制你想进行快捷补全的代码 //这里是你自己需要的代码 <script src="jquery/jquery-1.12.4.js"></script> <script> $(function () { }) </script> 2.开始操作 ...
  • WebStorm常用快捷方式

    2018-07-06 23:27:06
    WebStorm常用快捷键/快捷方式 常用快捷键/快捷方式 Ctrl+/ 注释 /**+Enter JS函数注释 Ctrl+Alt+Insert 创建新文件 End 光标移至末尾 Home 光标移至最前面 Alt+上下拖动鼠标 多行同级输入相同内容 Ctrl+R 文字...
  • 0.WebStorm代码快捷输入的基本使用方式 输入标签,然后按Tab键,无需输入尖括号 示例: 输入div按tab键,自动出现 1.手机端页面适配快捷键 输入: meta:vp 再按tab键就出来了. 这行代码,会将HTML5自动适配成手机端...
  • 然后找到Live Templates 选择你要添加自动补全的语言,比如说我要在写JavaScript的时候,输入con就能自动补全console.log('');我就选择JavaScript 。然后点击右侧的添加按钮,添加一个live template. 3.直接上截图 ...
  • 1.依次进入File ---> Setting ---> Editor ---> Live Templates ---> Javascript ... 3.在模板内写入自己需要定义的代码 4.下方蓝色字体的Define,把Javascript全勾选上(因为我们现在自定义的代码属于...
  • webstorm中提供了一些zencoding快捷编码提示,只要输入左边缩写,就可以快速生成代码注:所有快捷都是按下tab键快速生成代码。html:5 //html5结构按下Tab键回会生成以下代码:<!doctype html> <title>...
  • 快捷方式设置 Setting->Editor->Live Templates->选择你要添加的位置 如果你想要添加的编程文本。 选择添加文件 1、设置快捷名;2、设置描述,可写可不写;3、快捷转化文本;4、转化文本的变量函数转化 3...
  • https://pan.baidu.com/s/1kVqoPJh二、安装过程(包含输入注册码永久使用)双击下一步下一步即可,过程中有几个步骤说明一下:1. 配置 Webstorm 安装项选择 64 位,防止桌面 Webstorm 快捷方式打不开。配...
  • Webstorm 超实用教程

    2018-10-09 10:01:06
    选择 64 位,防止桌面 Webstorm 快捷方式打不开。 配置 Webstorm 安装项 2. 是否导入 Webstorm 配置信息 这里的意思是之前使用过 Webstorm ,并且配置过,Webstorm 配置信息可以起到优化性能的作用,因为它本身...
  • 默认会自动配置,若没有自动配置,按以下步骤手动配置即可 1.打开设置 ctrl+shift+s 2.输入关键字node 3.选择本地的node.exe的路径 这一步要勾上表示启用node的语法快捷提示 ...
  • ubuntu安装webstorm

    2017-11-29 10:49:34
    Ubuntu 16.04安装WebStorm前提:必须正确安装JDK。 在载Liunx在的webstorm版本;...在终端命令输入 /webstorm.sh (快捷操作输入w按下tab建自动补全) 这样就可以了,点击左上角图标,输入webstorm就可以了
  • Webstorm 超实用配置教程 一、下载安装包 ...选择 64 位,防止桌面 Webstorm 快捷方式打不开。 配置 Webstorm 安装项 \2. 是否导入 Webstorm 配置信息 这里的意思是之前使用过 Webstorm ,并且配置过,Webstor
  • 在js中,console.log() 这样的结构写的非常多,这时我们可以设置...(这里以webstorm举例,IDEA等JetBrains家族软件都是这样) 步骤 其中$PARAM$ 表示完成时光标定位的位置 效果 输入csl 按Tab(或回车) 完成 ...
  • webstorm zencoding

    千次阅读 2016-10-08 10:34:53
    webstorm中提供了一些zencoding快捷编码提示,只要输入左边缩写,按下tab键就可以快速生成html代码。一些常用的快捷提示:快捷提示1:html:5 //html5结构按下Tab键回会生成以下代码:<!doctype html> ...
  • webstorm模板快速生成

    2021-01-07 16:44:37
    前言 我们在使用webstorm开发项目的时候,有时会重复写多个很相似的代码块,经常要从别的代码处复制粘贴后修修改改。那么能不能将这些重复经常写的代码块抽象...3、添加模板,输入你要取的快捷名,模板介绍等等。...
  • 就像Vscode里,输入感叹号就可以填充Html5的模板 在Vue文件里输入<号就可以填充Vue文件的模板, <br> webstorm怎么设置才能快捷填充模板呢?
  • webstorm 自定义注释内容

    千次阅读 2019-05-14 16:22:56
    注释在我们很多项目中都要应用,今天打算为webstorm配置一个快捷注释的方法,让我们写注释更加方便,结果找了一个多小时,不得不说这地方的文档太少了,而且不精确,最后自己研究了一下还是配置好了。 点击file-&...
  • WebStorm中配置浏览器方法

    千次阅读 2018-07-04 14:50:05
    之前把google chrome换了个文件夹之后就出现WebStorm不能通过快捷按钮打开chrome浏览器了。每次都会提示“windows找不到'chrome'……”这样的一段话。后面自己摸索着弄出来了。我的是WebStorm 8 。设置步骤如下:1、...
  • 1. 直接生成批量数据 ul>li*5 2. 带序号带属性的批量数据 img[src='images/$.jpg']*...有以上这3个快捷方式,通过举一反三,可以衍生出其他好多的快捷键,您可以自己研究。比如加个id,层级关系再复杂些等等 ...
  • webstorm 中使用zencoding

    2017-04-17 17:08:22
    webstorm中提供了一些zencoding快捷编码提示,只要输入左边缩写,按下tab键就可以快速生成html代码。 一些常用的快捷提示: 快捷提示1: html:5 //html5结构11 按下Tab键回会生成以下代码: ...
  • 输入账户密码的时候,因为手一抖,完犊子账户填错了,结果就是push 500;分享一个方便快捷重置账户密码的方法;...WebStorm Idea 两个工具是一样方式; 然后再次push,就可以再次输入账户密码了! ...

空空如也

空空如也

1 2 3
收藏数 44
精华内容 17
关键字:

webstorm快捷输入