精华内容
下载资源
问答
  • webstorm插件开发

    千次阅读 2017-11-03 05:59:28
    最近有开发webstrom插件的需求,可是百度一下发现网上关于webstorm插件开发的文章实在是寥寥无几,本文记录一下本次插件开发走的路和踩的坑。希望对后来的同学能有些许的帮助。 正文 准备工作 intelliJ平台的所有...

    前言

    最近有开发webstrom插件的需求,可是百度一下发现网上关于webstorm插件开发的文章实在是寥寥无几,本文记录一下本次插件开发走的路和踩的坑。希望对后来的同学能有些许的帮助。

    正文

    准备工作

    intelliJ平台的所有插件开发都是基于java语言,所以在进入开发工作之前必须对java语言有一定的了解,本人作为java门外汉,花了大概一周左右的时间学习java语法。

    文档利器

    • intelliJ插件开发官方文档(文档介绍的虽然简单,但是可以让你大致知道开发一个插件的流程,来启动你的第一个插件项目吧)
    • webstorm js插件开发博客(这是我在medium上找到的一篇英文博客,详细介绍了如何开发一个用于webstrom的插件,稍后有时间我会翻译一下)

    记录踩的坑

    1. 注意IDEA的版本:这是我踩的第一个坑,由于IDEA community版本不支持js语言的插件,如果开发的插件想要操作js插件,则需要安装IDEA utimate版本,而这个版本则是需要破解的,送佛送到西,破解方法贴给大家破解
    展开全文
  • APICloud开发工具:WebStorm插件
  • webStorm插件推荐

    千次阅读 2019-03-08 16:32:43
    webStorm插件推荐 CodeGlance 代码的缩略图,VScode,sublime编辑器都有这个功能 {:height="200" width="400"} Material Theme UI 修改主题颜色,图标那些等等 AngularJS 支持 angularjs 的语法提示 ideaVim 可以让 ...

    webStorm插件推荐

    CodeGlance

    代码的缩略图,VScode,sublime编辑器都有这个功能

    {:height="200" width="400"}

    Material Theme UI

    修改主题颜色,图标那些等等

    AngularJS

    支持 angularjs 的语法提示

    ideaVim

    可以让 webstorm 编辑器支持 vim

    AceJump

    快速定位光标位置,有了它你可以丢弃鼠标了。

    eslint

    语法检查的插件

    activate-power-mode

    装逼插件,不解释不解释

    {:height="200" width="400"}

    SVNToolBox

    svn工具

    APICloud Plugins

    APICloud提供的WebStorm标准插件,用于在WebStorm中进行APICloud应用开发,包括:创建应用、应用框架、页面模板、代码提示、代码管理、真机同步、本地打包、日志输出、管理自定义AppLoader等功能,其它的功能插件也在不断增加,所有插件都已开源,开发者也可以在此基础上按需求扩展自己的插件。

    个人博客 求星星

    转载于:https://juejin.im/post/5c8299196fb9a049f746ffac

    展开全文
  • 一般是通过在媒体查询中设置转换的比例为10或100来方便计算,这里我考虑在IDE中开发插件来通过一个快捷键的形式来使IDE自动转换单位,更好地提高效率以及适用不同的比例,我使用的IDE是WebStorm,下面介绍开发方案。...

    背景

    使用rem时需要将原来的px转成rem,一般是通过在媒体查询中设置转换的比例为10或100来方便计算,这里我考虑在IDE中开发插件来通过一个快捷键的形式来使IDE自动转换单位,更好地提高效率以及适用不同的比例,我使用的IDE是WebStorm,下面介绍开发方案。

    方案

    通过IntelliJ提供的插件API来取出highlight部分的text,再在IDE中设置一个可以设置比例的窗口,在插件中根据获取的text和用户设置的比例来计算转换后的rem的值,将计算后的值写到相应的区域。

    后续的使用中,为更加提高开发效率,考虑在使用光标highlight标出数值外,再添加自动转换当前光标所在行中包含的可以转换px值的方式,开发文案与上述相似,只要获得行号与行的内容即可。

    代码

    插件代码已托管在github中,本文章中不再重复列出,需要的朋友可以前往github查看,插件的使用方法也可以在上面找到,这里也不再赘述。

    使用

    插件已上传到jetbrains官网中,目前支持webstorm和idea,可以在官方仓库中搜索 px2remforwebstorm 找到插件(File - Settings - Plugins - Browse repositories)。

    首先需要设置转换的比例值,设置菜单可以在 File - Other Settings - PX2REM 中找到,转换使用 shift f 快捷键,可以转换光标选中的文字,也可以转换一行内可以转换的样式,一些复杂的样式在转换出现问题时可以用光标选中文字的方式转换。

    c66fdcf46e5f5b737b6d50fb264e7a4c.gif

    传送门

    展开全文
  • 作为一个FE开发者,在日常工作中用的最多的可能就是WebStorm与VsCode,我在工作的这几年一直使用的是WebStorm进行开发,今天为大家带来我工作中使用的一些Webstorm插件以及一些可以提效的配置方法,希望能够帮助...

    前言

    作为一个FE开发者,在日常工作中用的最多的可能就是WebStorm与VsCode,我在工作的这几年一直使用的是WebStorm进行开发,今天为大家带来我工作中使用的一些Webstorm插件以及一些可以提效的配置方法,希望能够帮助使用WebStorm的朋友们更加高效工作,多余时间可以多摸摸🐟!

    最终效果展示

    插件推荐

    下面会详细介绍每一个插件的安装、使用建议,推荐指数✨

    .ignore: 版本管理工具的忽略文件插件

    • 插件描述:支持创建多种.ignore文件,会默认设置到需要忽略的文件或文件夹,我常用的是.gitignore,用于常见前端常见的需要忽略提交的文件,如node_modules,dist等;支持将文件旋选中右键进行添加到.gitignore;
    • 安装方式:webstorm内部插件市场搜索.ignore或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/7495--ignore
    • 使用效果:个人感觉很实用,会非常方便,有时候如果已经将文件添加到git提交缓存中的时候,需要使用命令清除缓存把文件撤销出来,这个插件可以帮助你完成这一步。更多功能需要自己使用进行发掘
    • 推荐指数:🌟🌟🌟🌟🌟

    Power Mode II: 打字特效

    • 插件描述:炫酷的打字效果,除了炫酷,没任何卵用,屏幕抖动的看着难受;
    • 安装方式:webstorm内部插件市场搜索Power Mode II或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/8251-power-mode-ii
    • 使用效果:装13可以,效果不大
    • 推荐指数:🌟🌟

    activate-power-mode: 打字特效

    CodeSearch: 右键搜索(通过Google搜索,墙内不能用)

    • 插件描述:选中某段内容,可以直接右键通过搜索引擎搜索进行搜索;需要配置搜索引擎,可以配置Baidu, Google, StackOverflow and GitHub四种
    • 安装方式:webstorm内部插件市场搜索codeSearch或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/12578-codesearch
    • 使用效果:实用性挺高,很方便的帮助搜索,安装以后就可以选中要搜索的东西
    • 推荐指数:🌟🌟🌟🌟🌟 image.png image.png

    Rainbow Brackets: 括号换色提示插件

    • 插件描述:代码中如果嵌套较深的话,找前面的括号与后面对应的地方会很麻烦,这款插件使用不同颜色进行标记,可以很方便的找到对应的开始和结尾的括号
    • 安装方式:webstorm内部插件市场搜索.ignore或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/10080-rainbow-brackets
    • 使用效果:个人感觉比较方便,可以快速定位,并且代码界面也会看起来更好看一点,愉悦心情,开心coding;
    • 推荐指数:🌟🌟🌟🌟

    Translation: 翻译插件

    • 插件描述:翻译插件,可以便捷的在WebStorm中进行翻译,省去了去浏览器进行翻译的操作,也支持右键方式选中翻译
    • 安装方式:webstorm内部插件市场搜索Translation或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/8579-translation
    • 使用效果:翻译更便捷啦,但是还是要多动脑子想一想呀
    • 推荐指数:🌟🌟🌟🌟 image.png image.png

    AceJump: 光标快速定位

    • 插件描述:AceJump 允许您将插入符号快速导航到编辑器中可见的任何位置,使用方式快捷键:Ctrl+;
    • 安装方式:webstorm内部插件市场搜索AceJump或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/7086-acejump
    • 使用效果:用的不是很多,得使用快捷键,也不是很方便,马马虎虎吧,看个人喜好
    • 推荐指数:🌟🌟

    Material Theme UI: 设置主题,不好的是大部分是暗色主题,亮色的特别亮,但是支持的文件图标不错

    • 插件描述:众所周知,一款很出名的主题
    • 安装方式:webstorm内部插件市场搜索Material Theme UI或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/8006-material-theme-ui
    • 使用效果:根据个人喜好吧,自己喜欢的才是最好的
    • 推荐指数:🌟🌟🌟🌟

    CodeGlance: 右侧小地图导航,像sublime text中一样的那个,可以配置宽度

    • 插件描述:可以在打开的窗口右边显示小地图,用于快速定位跳转,尤其是针对很多行的文件,就很方便的;
    • 安装方式:webstorm内部插件市场搜索CodeGlance或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/7275-codeglance
    • 使用效果:可以配置小地图宽度,可以设置固定宽,也可以拖拉设置宽度
    • 推荐指数:🌟🌟🌟🌟🌟 image.png

    Codota: AI代码生成,自动联想,支持javaScript和java;

    Atom Material Icons: 文件图标、系统图标会更好看;

    • 插件描述:为文件夹、文件增加图标,让编译器看起来更美观,也是一款可以愉快coding的好用插件
    • 安装方式:webstorm内部插件市场搜索Atom Material Icons或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/10044-atom-material-icons
    • 使用效果:针不戳啊针不戳
    • 推荐指数:🌟🌟🌟🌟🌟 image.png

    GitToolBox: git提交记录插件,鼠标在某行代码的时候可以看见是谁在什么时候提交的,提交信息是什么;

    • 插件描述:没记错的话VsCode里面也有一款类似的插件,可以看见每行代码是谁、在什么时候提交的,提交message是什么,不用再使用Annote with Git Blame了
    • 安装方式:webstorm内部插件市场搜索GitToolBox或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/7499-gittoolbox
    • 使用效果:方便啊方便,非常方便的!!一看有bug,就知道是谁写的这垃圾代码了!
    • 推荐指数:🌟🌟🌟🌟🌟 image.png

    Paste images into MarkDown: 在编写markdown时,如果需要添加图片,则复制以后可直接使用ctrl+v或command+v进行粘贴,会弹出一个弹框设置图片名称、路径,十分方便

    • 插件描述:在WebStorm写markdwon文档的时候,有时候需要增加图片可能要先将图片放到文件夹,再在markdown中引用,那么这个插件可以很好的解决问题,剪贴板上有图片信息,直接ctrl+V进行粘贴
    • 安装方式:webstorm内部插件市场搜索Paste images into MarkDown或官方地址下载到本地进行安装
    • 官方地址:https://plugins.jetbrains.com/plugin/8446-paste-images-into-markdown
    • 使用效果:提升效率的利器,还可以设置图片存储路径,是否是圆角、图片大小等
    • 推荐指数:🌟🌟🌟🌟🌟 image.png

    好啦,可以写出来的常用的就这些基本插件啦,更多的插件可以去我的博客了解:https://blog.wangboweb.site/2019/08/17/63952.html

    设置一下

    字体以及UI、展示风格

    image.png

    文件模板设置

    详情:https://blog.wangboweb.site/2021/08/04/60426.html image.png

    配置信息备份

    可以备份到云上,也可以备份到jetbrains 账户上 image.png

    设置背景图片

    image.png

    总结

    大概就是这么多了,其实很多功能在日常开发中不一定会用到,但是一旦发现了,就会很顺手,需要自己多多探索,打造一个适合自己的编译器,才能真正的提高开发效率,这样就有更多的机会去摸鱼鱼!!!

    另外有人翻译了WebStorm的官方帮助文档,有需要的可以去看看。

    中文帮助文档:https://www.kancloud.cn/zxhy/webstorm/182199

    官方英文帮助文档:https://www.jetbrains.com/help/webstorm/meet-webstorm.html

    本文由博客群发一文多发等运营工具平台 OpenWrite 发布

    展开全文
  • 首先,这款插件是基于Matchmaker修改而来,要感谢作者的辛苦劳动 功能 从wxml中生成方法体到js中,使用方法:在js文件或者wxml文件中cmd+N在弹出的列表中选择CreateFuncFromWxml如图: wxml和js文件快速切换:...
  • webstorm常用插件集合(2020)

    万次阅读 2020-07-10 11:47:11
    2016 年整理了一下自己常用的 webstorm 插件webstorm常用插件集合 不过毕竟现在已经 2020 年了,常用的插件已经发生了一些变化,重新整理一下。
  • 下边我们介绍下webstorm开发微信小程序的一些配置:   1.首先FileType下Cascading Style Sheet 添加*.wxss (此图片来源于网络,如有侵权,请联系删除! )   2.FileType下HTML 添加*.wxml (此图片来源于网络,如有...
  • 借助WebStorm,您无需安装任何其他插件即可直接工作-所有核心功能立即可用。但是,如果您希望自己的编码工具更加个性化或者需要一些额外的功能,该怎么办?在此文中,我们将介绍用于JetBrains IDE开发的一些最方便的...
  • 给 JetBrains webStorm phpStorm IDEA 开发插件 plugins 怕你们找不到,我给指个方向 参阅官方文档:https://www.jetbrains.org/intellij/sdk/docs/basics/getting_started.html
  • WebStorm常用插件

    万次阅读 2019-07-10 10:50:08
    插件可以让 webstorm 编辑器支持 vim。 eslint 语法检查的插件。 CodeGlance 强烈推荐的,类似sublime 右侧的当前文件代码缩略图。 activate-power-mode atom 上的神器,安装之后可以在 window -> a.....
  • koala就不多说了 好用也简单 只是换项目之后配置一下就行,今天我就讲下用 Nodejs 怎么来编译,我下面说的是针对 webstorm配合。 1,下载nodejs,并且安装,配置下环境变量。  安装成功结果 2,安装less 在cmd...
  • 安装在IDE中,选择“首选项”->“插件”->“浏览存储库...”。搜索jetbrains-wakatime指标,见解和从编程活动中自动生成的时间跟踪。 安装在IDE中,选择“首选项”->“插件”->“浏览存储库...”。搜索WakaTime。 ...
  • webstorm vue开发配置

    万次阅读 2019-05-29 18:04:55
    下面开始使用WebStorm 重要的一点,想用WebStorm创建项目得安装git。 安装很简单,官网找到下载安装即可,否则可能出现安装不了的情况 红色为新建的顺序,绿色为node.js地址(装好了会自动寻找),蓝色为vue.js包的...
  • webstorm常用插件

    千次阅读 2019-04-20 01:20:59
    可以让 webstorm 编辑器支持 vim AceJump 快速定位光标位置,有了它你可以丢弃鼠标了。 eslint 语法检查的插件 Key promoter Key promoter 快捷键提示的,会统计你鼠标点击某个功能的次数,提示你应该用什么...
  • 使用WebStorm,您无需安装任何其他插件即可直接工作-所有核心功能将立即可用。 但是,如果您希望自己的编码工具更加个性化或需要一些额外的功能,该怎么办? WeStorm提供了许多可以帮助您解决这些问题的插件! 在此...
  • 前言WebStorm作为目前最流流行的前端IDE, 无论从运行速度还是开发的便捷性,无形之中提高了工作效率,目前比较火爆的React也越来越被众多开发人员所采纳,但是WebStorm下的React工程经常会出现很多警告以及转换提示...
  • webstorm——vuejs开发配置插件

    千次阅读 2018-08-27 15:33:33
    vue.js插件安装 1、file-->setting-->plugins-->Browse repositories, 搜索vue.js  
  • 前言前文React Native开发之——Webstorm快捷开发介绍了使用Webstorm快捷开发React Native,本文介绍Webstorm开发RN配置。Webstorm开发RN配置配置文件编码格式注:为避免莫名其妙的问题,本文所使用的编码格式统一...
  • WebStorm 开发

    2015-03-09 14:48:51
    1. WebStorm 修改字体 和 配色,修改 KeyMap选择 Eclipse 2. 调试JavaScript  安装Nodejs.exe. 从File-setting里面配置Node.exe 路径。   3. 从Git上下载 WebStrome 自带 Git插件,只需要下载Git安装在C盘...
  • WebStorm 好用的插件推荐

    千次阅读 2020-12-26 12:32:22
    WebStorm 插件推荐Hello插件推荐Chinese ​(Simplified)​ Language Pack / 中文语言包Rainbow FartWechat mini program supportKey Promoter X.​env files supportAtom Material ...
  • WebStorm开发 uni-app

    千次阅读 2020-04-27 14:06:40
    preset-vue my-project 此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板,如下所示: 在 WebStorm 中打开项目 CLI 工程默认带了 uni-app 语法提示和 5+App 语法提示 运行项目 npm run dev:%...
  • WebStorm 开发javaScript

    千次阅读 2016-06-24 09:30:34
    2、下载webstorm并安装 webstorm安装后的一些设置技巧: 如何更改主题(字体&配色): File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址 如何让webstorm启动的时候不打开工程文件: File
  • webstorm前端开发分享 js,css工具篇s

    千次阅读 2015-10-15 09:48:58
    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持...
  • WebStorm开发热更新

    2020-03-25 10:41:25
    前端开发热更新 1.Chrome安装LiveReload插件 2.WebStorm设置live edit 3.npm安装livereload 全局安装 npm install -g livereload 4.监听文件 livereload [filepath] livereload ./demo livereload ./demo/Demo...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,304
精华内容 2,921
关键字:

webstorm插件开发