-
webstorm快捷输入html代码
2021-03-06 14:07:54webstorm快捷输入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>
-
Webstorm快捷输入Emmet简单语法
2021-02-05 11:29:24意思就是打完快捷输入后按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)
模板
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); });
-
如何在linux桌面上创建webstorm快捷方式
2017-05-19 20:26:11sudo vim /usr/share/applications/webstorm.desktop 大部分linux的图标入口都在/usr/share/applications/文件夹下 输入内容 “` [Desktop Entry] Categories=Development; Comment[zh_CN]= Comment= E展开全文- 系统版本：Ubuntu 16.04
- 首先创建一个文件
sudo vim /usr/share/applications/webstorm.desktop大部分linux的图标入口都在/usr/share/applications/文件夹下
- 输入内容
“`
[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:35WebStorm快捷方式 生成标签的方法:直接输入标签名,然后按下tab键即可,比如输入div,然后按下tab键，就可以生成<div></div>。 如果想要生成多个相同标签,加上*就可以了。比如div... -
WebStorm自定义快捷注释
2021-03-19 10:26:44WebStorm自定义快捷注释 一.点击File,找到Settings,搜索Live Templates,选中需要在那个模块下生成,然后点击加号,添加快捷生成代码 二.Abbreviation填写你要生成的快捷代码,如下图都选择Enter(输入//,按Enter生成... -
WebStorm代码快捷《控制代码输入》
2019-02-18 11:44:43输入标签,然后按Tab键,无需输入尖括号<> . 其他指令也类似,用tab键来启动自动生成代码指令. 示例: 输入div按tab键,自动出现 <div></div> 一、手机端页面适配快捷键 输入: meta:vp 再按tab键就... -
WebStorm添加快捷补全
2019-08-13 10:09:05WebStorm添加快捷补全 1.复制你想进行快捷补全的代码 //这里是你自己需要的代码 <script src="jquery/jquery-1.12.4.js"></script> <script> $(function () { }) </script> 2.开始操作 ... -
WebStorm常用快捷方式
2018-07-06 23:27:06WebStorm常用快捷键/快捷方式 常用快捷键/快捷方式 Ctrl+/ 注释 /**+Enter JS函数注释 Ctrl+Alt+Insert 创建新文件 End 光标移至末尾 Home 光标移至最前面 Alt+上下拖动鼠标 多行同级输入相同内容 Ctrl+R 文字... -
webstorm快速添加手机端适配代码快捷键-代码自动生成指令快捷输入
2017-03-25 00:41:390.WebStorm代码快捷输入的基本使用方式 输入标签,然后按Tab键,无需输入尖括号 示例: 输入div按tab键,自动出现 1.手机端页面适配快捷键 输入: meta:vp 再按tab键就出来了. 这行代码,会将HTML5自动适配成手机端... -
webstorm 自定义代码的补全提示,快捷输入
2019-10-04 10:27:15然后找到Live Templates 选择你要添加自动补全的语言，比如说我要在写JavaScript的时候，输入con就能自动补全console.log('');我就选择JavaScript 。然后点击右侧的添加按钮，添加一个live template. 3.直接上截图 ... -
webStorm自定义代码的补全提示,快捷输入
2019-10-01 02:58:211.依次进入File ---> Setting ---> Editor ---> Live Templates ---> Javascript ... 3.在模板内写入自己需要定义的代码 4.下方蓝色字体的Define,把Javascript全勾选上(因为我们现在自定义的代码属于... -
webstorm 使用zencoding快捷编码
2017-04-28 16:51:25webstorm中提供了一些zencoding快捷编码提示，只要输入左边缩写，就可以快速生成代码注：所有快捷都是按下tab键快速生成代码。html:5 //html5结构按下Tab键回会生成以下代码：<!doctype html> <title>... -
记录一下如何在webstorm添加自己的默认头（采用快捷输入方式创建与设置默认格式文件）
2020-07-18 21:17:26快捷方式设置 Setting->Editor->Live Templates->选择你要添加的位置 如果你想要添加的编程文本。 选择添加文件 1、设置快捷名；2、设置描述，可写可不写；3、快捷转化文本；4、转化文本的变量函数转化 3... -
webstorm 两个文件对比不同_Webstorm 超实用配置教程
2020-12-19 08:08:59https://pan.baidu.com/s/1kVqoPJh二、安装过程(包含输入注册码永久使用)双击下一步下一步即可，过程中有几个步骤说明一下：1. 配置 Webstorm 安装项选择 64 位，防止桌面 Webstorm 快捷方式打不开。配... -
Webstorm 超实用教程
2018-10-09 10:01:06选择 64 位，防止桌面 Webstorm 快捷方式打不开。 配置 Webstorm 安装项 2. 是否导入 Webstorm 配置信息 这里的意思是之前使用过 Webstorm ，并且配置过，Webstorm 配置信息可以起到优化性能的作用，因为它本身... -
nodeJs整合到webstorm，启用node语法快捷提示
2019-10-08 11:21:55默认会自动配置，若没有自动配置，按以下步骤手动配置即可 1.打开设置 ctrl+shift+s 2.输入关键字node 3.选择本地的node.exe的路径 这一步要勾上表示启用node的语法快捷提示 ... -
ubuntu安装webstorm
2017-11-29 10:49:34Ubuntu 16.04安装WebStorm前提：必须正确安装JDK。 在载Liunx在的webstorm版本；...在终端命令输入 /webstorm.sh (快捷操作输入w按下tab建自动补全) 这样就可以了，点击左上角图标，输入webstorm就可以了 -
Webstorm 超实用配置教程
2020-07-04 00:24:26Webstorm 超实用配置教程 一、下载安装包 ...选择 64 位，防止桌面 Webstorm 快捷方式打不开。 配置 Webstorm 安装项 \2. 是否导入 Webstorm 配置信息 这里的意思是之前使用过 Webstorm ，并且配置过，Webstor -
webstorm、pycharm、IDEA等JetBrains家族软件的自定义代码快捷补全
2019-02-13 11:12:51在js中，console.log() 这样的结构写的非常多，这时我们可以设置...（这里以webstorm举例，IDEA等JetBrains家族软件都是这样） 步骤 其中$PARAM$ 表示完成时光标定位的位置 效果 输入csl 按Tab（或回车） 完成 ... -
webstorm zencoding
2016-10-08 10:34:53webstorm中提供了一些zencoding快捷编码提示，只要输入左边缩写，按下tab键就可以快速生成html代码。一些常用的快捷提示：快捷提示1：html:5 //html5结构按下Tab键回会生成以下代码：<!doctype html> ... -
webstorm模板快速生成
2021-01-07 16:44:37前言 我们在使用webstorm开发项目的时候，有时会重复写多个很相似的代码块，经常要从别的代码处复制粘贴后修修改改。那么能不能将这些重复经常写的代码块抽象...3、添加模板，输入你要取的快捷名，模板介绍等等。... -
Webstorm怎么快速填充模板？
2020-09-23 11:20:34就像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、... -
webstorm批量编辑快捷键【跳转到指定行，批量输入】
2016-11-18 14:30:001. 直接生成批量数据 ul>li*5 2. 带序号带属性的批量数据 img[src='images/$.jpg']*...有以上这3个快捷方式，通过举一反三，可以衍生出其他好多的快捷键，您可以自己研究。比如加个id，层级关系再复杂些等等 ... -
webstorm 中使用zencoding
2017-04-17 17:08:22webstorm中提供了一些zencoding快捷编码提示，只要输入左边缩写，按下tab键就可以快速生成html代码。 一些常用的快捷提示： 快捷提示1： html:5 //html5结构11 按下Tab键回会生成以下代码： ... -
WebStorm、Idea使用git账户密码重置
2021-04-25 17:04:22在输入账户密码的时候，因为手一抖，完犊子账户填错了，结果就是push 500；分享一个方便快捷重置账户密码的方法；...WebStorm Idea 两个工具是一样方式； 然后再次push，就可以再次输入账户密码了！ ...
收藏数
44
精华内容
17