webstorm基础使用总结

webstorm基础使用总结(不仅仅是一堆快捷方式)

注:转载请注明出处

本次写的内容是我想到那个就写那个,都是本人平时写代码的时候的一些习惯,未必是最好的,贵在交流!

1:  shift+enter

解释:不管光标在任何位置,都会跳的下一行;

举例:在写代码时难免会有些自动补全的代码,比如我们敲 func 会提示一个函数生成,而此时光标在圆括号里,我们又不用写形参,这是按shift+enter是最好的;

这里光标由1跳到了2

2:多光标编辑代码 Alt+鼠标左键

解释:我们在写css或者html时难免会同时修改不同行的相同代码,这时我们按住鼠标alt键,鼠标点击选择不同行要修改的地方

举例:

   我敲了一遍aaa   ---》   

取消时只需点击其他地方就可以退出

3:快速编码开发html

解释:就是能很快的开发html代码(哈哈!)

用法:在html《body》里输入:   div>div>ul>li+li+li  按table后,猜猜会发生什么?看图————》》

有人会说了,我写这些,那我还要加我的id和class了,哈哈,那你就加啊!我想说的是别急!

再试下这个(记得按table键啊)

div#idName>div.className>ul.className>li.clssName+li+li

再猜猜会发生什么?--》》猜你妹啊,快点上图

还有很多写法,记得多学习啊!

4:再说个关于快速添加注释符号的  ctrl+/  和  ctrl+shift+/

 解释:这个在css,html,js中都很有用的,而且会按各自的标准去添加

用法:这个也要教,气死吧!

5:说过js的包含代码块(懂不?) ctrl+alt+T

解释:就是我们在开发js的时候写了一些代码,比如alert(‘你个SB‘),最后觉得这个骂一句不爽,我要来个for循环,多骂几句,就用这个,

  常规我们是鼠标移到alert(‘你个SB‘)这行代码上选中按  ctrl+x 之后再写下for循环再  ctrl+v 才算完成了现在不用了

用法:

   看见for前边有个  数字0   了吗?对,按 0 就可以了,还有,这里不选中代码块则包裹整行代码;

6吃饭去喽,未完待不待续....

时间: 2024-08-05 04:23:55

webstorm基础使用总结的相关文章

WebStorm基础设置项

设置 快捷键设置 可以采用多种风格,这里采用Visual Studio风格,便于习惯使用其它IDE的用户迁移. JavaScript版本设置 JavaScript的主流版本已升至ESMAScript6,在此设置后,开发过程中IDE可以更智能地进行排版处理.

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

HTML 基础知识及webstorm基本快捷键

一.webstorm快捷键编写HTML标签的快捷键: 标签名+TAB键(修改格式,格式化代码)快捷键: ctrl+shift+f [此快捷键在webstorm中无效](用ctrl+alt+L)同时编写多个相同的标签的快捷键 :标签名*个数+tab键同时编写多行代码快捷键: alt+鼠标左键注释快捷键 ctrl+/(?)二.基本标签2.1 <head>标签允许包含的标签 <style></style> - 定义CSS代码 <link> 引入外部CSS文件 &l

【webstorm使用手册】如何让webstorm支持nextcss基础语法?

第一步, 安装 PostCss插件 如果不知道如何安装插件,参看:http://www.cnblogs.com/codelovers/p/7048113.html 第二步,设置文件类型解析方式 打开Files->Settings->Editor->File Types,在PostCss中添加Registered Patterns, *.pccs, *.css.具体添加*.pss,还是*.css,根据自己的文件后缀名决定. 延伸:如何让文件按照自己设定的类型进行解析?使用File Type

前端基础(一)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000;

Webstorm功能详解及插件推荐

Web前端开发神器--Webstorm不用多介绍,强大的智能提示只是它的一个功能特性,它还具有许多有用的特性,比如版本控制.本地历史.即时模板等.Webstorm还内置了对 SASS.NodeJS.CoffeeScript.Jade 的支持,并且可自定义代码格式化规则.   Webstorm有哪些优势? 1.         图片宽高提示 平时在做前端开发时,一个页面中会碰见很多图片,如果我们在写img标签时能清楚的看见每个图片的宽高,岂不是太爽了?这一点Webstrom便可以实现. 2.   

前端基础知识

1.了解web前端基础 (1) 网页介绍 组成: 文字,图片,按钮,输入框,视频等等元素组成的 (2)web标准 :制作网页的规范 a.结构标准(HTML) b.表现标准(CSS) c.行为标准(JavaScript) 2.浏览器 谷歌    内核 :blink IE(高版本) 内核:trident 苹果浏览器: 内核webkit 欧鹏  内核: Presto  现在用的是webkit 火狐  内核: gecko 3.HEML(Hyper Text markup Language) 超级文本标记

React Native 从零到高级- 0基础学习路线

React Native QQ交流群(美团,饿了么,阿里的大神都在里面):576089067 React Native  从0 基础到高级 视频教程正在重录中,要了解最新进度可以关注菜鸟窝微信公众号(下图),旧版视频教程可以点击这里在线学习 学习路线(文章版),江清清老师出品,点击这里关注江清清 ,同时可以关注一下他的课程 基础入门:1.React Native For Android环境配置以及第一个实例2.React Native开发IDE安装及配置3.React Native应用设备运行(

从零基础入门JavaScript(2)

在上次的学习当中,我已经对JavaScript有了一定基础上的理解,比如:JavaScript的发展史,JavaScript中变量的命名,各种运算符,以及数据的类型与它们之间的转化.还有就是一些最基本的语句,if-else, switch-case,for循环,while循环,以及它们之间的嵌套关系.这些语句中的嵌套关系需要很明确的了解,因为在正真开发当中很少能够只用一种语句就能完成编译的.此外,当嵌套关系很多很复杂时,要当心发生混乱,只要有一个大括号书写位置错误,就可能导致全盘皆输的现象,还有