精华内容
下载资源
问答
  • 提升开发效率—WebStorm的奇淫技巧 标题说是webstorm, 其实Jetbarins idea通用,最近买了webstorm, 花了钱就得物尽其用。利用闲暇时间整理一些以前没有注意到的功能。当然文中的功能VScode都有插件,不过这属于习惯...

    提升开发效率—WebStorm的奇淫技巧

    标题说是webstorm, 其实Jetbarins idea通用,最近买了webstorm, 花了钱就得物尽其用。利用闲暇时间整理一些以前没有注意到的功能。当然文中的功能VScode都有插件,不过这属于习惯问题不作讨论。

    1. 文件快速定位

    文件定位.gif

    2. favorites(类似收藏夹)

    文件特别多的时候,要找到常用的文件简直耗费时间。这时候可以把文件加入favorites,并且可以提供目录来分类
    tips: 只有一级目录
    favorites.gif

    3. 书签

    无独有偶,收藏夹都有了,像书签这样的功能怎么能少。在浏览代码的时候,可以在代码段加入书签,方便下次查找
    书签.gif

    4. TODO

    我们常常会用到Terminal(终端),但旁边的TODO却不知道是干嘛的。它可以帮助我们快速找到在开发时写的TODO注释
    TODO.gif

    5. 定位文件方法

    可以快速定位到文件中声明的函数
    func.gif

    6. git

    pycharm内置git,可以满足快速git的快速 pull和push的操作,前提是需要配置好项目的git

    # 新项目
    git init
    # git 用户名
    git config user.name 'xx'
    # git 邮箱
    git config user.email 'xx@xx.xx'
    # git 远程仓库地址
    git remote add origin 远程仓库地址
    # 这样可以直接 git push到远程的指定分支
    git branch --set-upstream-to=origin/master master
    

    git.gif

    7. 代码模板

    相信大家都使用过 html的模板 !+tab 快速生成代码。实际上代码模板可以自定义。
    具体在 settings(Perference) -> Editors -> Live template, 右方可以选择查看自己常用的语言,然后记住快捷键。如 React, rcc

    temp.gif

    并且可以自定义模板

    展开全文
  • webstorm右下角或者左下角有一个小人头像 点击 将进度拖到最左边即可(就是格式规划级别低) 解决前: 解决后: 最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~ 点击...

    背景:
    今天写vue项目时,出现了好多红色的水波线,看着有点别扭,网上找了找,给找找到了

    解决办法:
    webstorm右下角或者左下角有一个小人头像 点击 将进度拖到最左边即可(就是格式规划级别低)

    解决前:
    在这里插入图片描述

    解决后:
    在这里插入图片描述


    最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
    在这里插入图片描述

    点击进入Vue❤学习专栏~

    学如逆水行舟,不进则退
    
    展开全文
  • WebStorm前端开发进阶在...WebStorm自带代码风格自定义设置,保存代码时会自动格式化成用户设定的风格。 具体操作步骤如下: 打开设置:File → Settings… (对应的快捷键Ctrl + Alt+s) 打开:editor → code Style...

    模板语法(强烈推荐使用,开发效率快到飞起)

    WebStorm集成了对各个前端语言的快捷语法支持,这里以Vue(Angular,React同样支持)为例,在.vue文件的template标签内输入v-for然后按下tab键,工具会自动生成如下代码在这里插入图片描述

    输入完成后继续按tab光标会切换到对应的语法区域,方便修改。

    该功能还支持自定义语法模板(敲重点!),基本上组件够完善的话,一般的页面都不需要写代码了

    先看看完整示例:在这里插入图片描述
    已分页组件为例,下面开始操作步骤:
    1、打开模板语法设置:File | Settings | Editor | Live Templates
    2、新建一个模板组
    在这里插入图片描述
    3、新建一个组件模板,填写内容(以html为例)
    在这里插入图片描述
    $变量$ 这个符号在第5步需要用到,相当于告诉开发工具这个是变量,用户自己填的

    4、选择模板使用范围(这个必须要设置
    在这里插入图片描述
    5、填写第三步设置的值(记得需要双引号),当然工具也给我提供了例如当前日期类的变量,这个可自行搜索查看在这里插入图片描述
    6、完成

    配置好之后就可以愉快的使用了,已html为例,在vue文件的template标签内,输入jpage-html按下tab键,工具会自动生成配置好的内容

    7、顺便带上我最喜欢的console.log打印的写法
    在这里插入图片描述
    下面看效果
    在这里插入图片描述
    这样能够在你输入this.message的时候,后面字符串内容会自动加上this.message,很快捷的一种打印方式。

    代码格式化之ESLint一键格式化

    webstorm不仅支持代码格式化,同时支持用户自定义所有格式化配置与Eslint一键格式化

    一、自定义代码格式化配置(下面以JavaScript代码为例,其他同理):

    1. 打开模板语法设置:File | Settings | Code Style | JavaScript
      在这里插入图片描述
      左边勾选按钮,右边可以直接看到展示效果
      在这里插入图片描述
      这里可以配置使用单引号/双引号,是否需要分号等等

    二、ESLint一键格式化配置.

    通过webstorm的eslint自动格式化功能,开发者无需去记繁琐的eslint规范。

    1. 首先打开设置:File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint(可直接在搜索框输入eslint搜索),导入当前项目的ESLint配置文件。
      在这里插入图片描述
      2.将整个工程进行ESLint格式化:
      在这里插入图片描述
      使用该方式也可以对单个文件夹或者单个文件进行一键格式化操作,非常方便。
      3、同时也可以进行快捷键的配置:
      在这里插入图片描述
      每写完一个代码块,使用配置的快捷键进行格式化,好用!

    服务器直连,打包项目一键推送(抛弃繁琐的ssh,sftp软件)

    前端项目在完成之后发版会需要打包将dist(大众命名法)文件放在服务器中,webstorm强大的部署功能可以帮我们轻松的完成这一步:
    1、连接服务器
    在这里插入图片描述
    2、配置服务器参数
    在这里插入图片描述
    连接成功后下面会出现如下提示:
    在这里插入图片描述
    我们输入Linux命令,可以看到能够正常的显示在这里插入图片描述
    至此,远程SSH连接就搞定了(可以抛弃之前的SSH软件了)

    接下来开始配置SFTP,抛弃原来的FileZilla等软件

    • 打开设置,找到Deployment,新增一个SFTP连接在这里插入图片描述
      输入名称(自定义)
      在这里插入图片描述
      添加一个SSH服务器
      在这里插入图片描述
      在这里插入图片描述
      选择目标服务器文件夹(你要推送的目标服务器文件夹)
      在这里插入图片描述
      配置文件夹地址
      在这里插入图片描述
      搞定,接下来测试效果:
      先对项目进行构建,生成dist文件夹
      然后鼠标右键dist文件夹
      在这里插入图片描述
      选择Upload to (自己设置的名字)
      搞定!是不是很方便呢!(如果服务器上已经存在相同文件,会进行自动替换)
    展开全文
  • Sublime Text、webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: 一、快速编写HTML代码 1. ...

    Sublime Text、webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:

    一、快速编写HTML代码

    1.  初始化 

    HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键: 

    • html:5 或!:用于HTML5文档类型
    • html:xt:用于XHTML过渡文档类型
    • html:4s:用于HTML4严格文档类型

    2.  轻松添加类、id、文本和属性

    连续输入元素名称和ID,编译器会自动为你补全,比如输入p#foo:

    连续输入类和id,比如p.bar#foo,会自动生成:

        <p class="bar" id="foo"></p>  

    下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:

    <h1>foo</h1>  <a href="#"></a>  

    3.  嵌套 

    现在你只需要1行代码就可以实现标签的嵌套。

    • >:子元素符号,表示嵌套的元素
    • +:同级标签符号
    • ^:可以使该符号前的标签提升一行

    效果如下图所示: 

    4.  分组 

    你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码: 

    <div class="foo">      <h1></h1>  </div>  <div class="bar">       <h2></h2>  </div>  

    5.  隐式标签 

    声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。

    在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,编译器会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。 

    下面是所有的隐式标签名称: 

      • li:用于ul和ol中
      • tr:用于table、tbody、thead和tfoot中
      • td:用于tr中
      • option:用于select和optgroup中

     

    6.  定义多个元素 

    要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:

    <ul>        <li></li>        <li></li>        <li></li>  </ul>

    7.  定义多个带属性的元素 

    如果输入 ul>li.item$*3,将会生成如下代码: 

    <ul>        <li class="item1"></li>        <li class="item2"></li>        <li class="item3"></li>  </ul>  

    二、CSS缩写

    1.  值

    比如要定义元素的宽度,只需输入w100,即可生成 

    width: 100px;  

    除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:

    height: 10%;   margin: 5em;  

    单位别名列表: 

      • p 表示%
      • e 表示 em
      • x 表示 ex

    2.  附加属性

    可能你之前已经了解了一些缩写,比如 @f,可以生成:

    @font-face {    font-family:;    src:url();  } 

    一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:

        @font-face {        font-family: 'FontName';        src: url('FileName.eot');        src: url('FileName.eot?#iefix') format('embedded-opentype'),           url('FileName.woff') format('woff'),           url('FileName.ttf') format('truetype'),           url('FileName.svg#FontName') format('svg');        font-style: normal;        font-weight: normal;      }  

    3.  模糊匹配

    如果有些缩写你拿不准,编译器会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

    overflow: hidden;  

    4.  供应商前缀

    如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:

        -webkit-transform: ;      -moz-transform: ;      -ms-transform: ;      -o-transform: ;      transform: ;  

    你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:

        -webkit-super-foo: ;      -moz-super-foo: ;      -ms-super-foo: ;      -o-super-foo: ;      super-foo: ;  

    如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:

    -webkit-transform: ;  -moz-transform: ;  transform: ; 

    前缀缩写如下: 

      • w 表示 -webkit-
      • m 表示 -moz-
      • s 表示 -ms-
      • o 表示 -o-

    5.  渐变

    输入lg(left, #fff 50%, #000),会生成如下代码:

    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));  background-image: -webkit-linear-gradient(left, #fff 50%, #000);  background-image: -moz-linear-gradient(left, #fff 50%, #000);  background-image: -o-linear-gradient(left, #fff 50%, #000);  background-image: linear-gradient(left, #fff 50%, #000);

     

    =========================================================================================

     

    如在 “网络开发方面“ 遇到问题的  或  有项目需求,可加我微信:

    (专注:SEO优化营销、网站定制【PC站、微站、手机站、商城】、网络系统定制、微信小程序开发;10年技术经验)

    转载于:https://www.cnblogs.com/yeYu168/p/9424957.html

    展开全文
  • webstrom自带 2、Code Runner自动检测packjson文件执行npm命令。webstrom自带 3、样式Material Themewebstrom也有这样的插件,但是...5、GitLens — Git supercharged可以查看git所有提交记录,并且代码上面自动有提示
  • 自己个人开发的时候都喜欢用webstrom,webstrom各种细节,定义跳转,样式,都非常棒,奈何公司内网开发,逼着我用vscode,在新公司用vscode开发三周之后的今天(周六),我爆发了。下面是我必须推荐的几个插件一、插件...
  • webstorm简单介绍 官网地址:http://www.jetbrains.com/webstorm/features/index.html 参考地址:http://www.html5jscss.com/ide-webstrom-27.html 欲先善其事,必先利其器,我们可以理解 IDE 就是集成了很...
  • mmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:    Zen coding下的编码...
  • AngularJS最理想开发工具WebStorm(转)

    千次阅读 2017-06-06 09:26:53
    AngularJS最理想开发工具WebStorm AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs...
  • WebStorm(Amaze开发工具)--JavaScript 开发工具 一、总结 1、webstorm:前段开发神器,应该比sublime好用。 2、webstorm功能:支持显示图片宽高,标签重构,自带版本控制等功能 二、简介 WebStorm 是...
  • “无代码开发平台可以说是为“编程小白”量身打造的,使用者无需编程语言基础,通过简单拖拽、连接应用程序模块,即可开发出移动端或Web应用程序。 低代码平台是针对企业业务人员和专业开发人员构建的,业务人员...
  • WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaSc...
  • 借助WebStorm,您无需安装任何其他插件即可直接工作-所有核心功能立即可用。但是,如果您希望自己的编码工具更加个性化或者需要一些额外的功能,该怎么办?在此文中,我们将介绍用于JetBrains IDE开发的一些最方便的...
  • 代码开发平台是无需编码(0代码或无代码)或通过少量代码就可以快速生成应用程序的开发平台。它的强大之处在于,允许终端用户使用易于理解的可视化工具开发自己的应用程序,而不是传统的编写代码方式。构建业务...
  • AngularJS最理想开发工具WebStorm

    千次阅读 2017-02-13 10:38:50
    angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地把后台技术融入前端...
  • 一、低代码开发简介 低代码开发平台是通过少量代码就可以快速生成应用程序的开发平台。它的强大之处在于,允许企业业务人员或专职系统研发人员使用易于理解的可视化工具开发自己的应用程序,而不是传统的编写代码...
  • react的开发,发现react着实是一个好东西,但是蛋疼的是webpack这个东西好难配置,稍不注意就会导致自动编译失败,会出现一堆的问题,下面就请跟我一起从零开始学习React+webpack配置,并且如何在webstorm中很好的...
  • WebStorm建立在开源IntelliJ平台之上,JetBrains已经开发和完善了超过15年。其提供了统一的UI,可与许多流行的版本控制系统配合使用,确保在git,GitHub,SVN,Mercurial和Perforce之间提供一致的用户体验。WebStorm...
  • webstorm常用插件集合(2020)

    万次阅读 2020-07-10 11:47:11
    2016 年整理了一下自己常用的 webstorm 插件:webstorm常用插件集合 不过毕竟现在已经 2020 年了,常用的插件已经发生了一些变化,重新整理一下。
  • 作为一个FE开发者,在日常工作中用的最多的可能就是WebStorm与VsCode,我在工作的这几年一直使用的是WebStorm进行开发,今天为大家带来我工作中使用的一些Webstorm插件以及一些可以提效的配置方法,希望能够帮助...
  • JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发!采用前后端分离架构:SpringBoot2.x,Ant Design&Vue,Mybatis-plus,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任何代码! Jeecg...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,800
精华内容 720
关键字:

webstorm代码提升开发