大家好!我是木瓜太香,精通 webstorm 与常见前端技术的工程师,偶尔也在b站搞一些 webstorm 技巧教学,今天给大家带来的是大驼峰小驼峰快速转换短横杠命名或者下划线命名的方式。

开发中我们可能会遇到一个这样的需求,我们在创建组件的时候习惯使用大驼峰命名,而在使用的时候,我们又要使用短横杠或者下划线命名,这种功能我们当然不可能手打的啦,这辈子都不可能的啦。

解决的办法一般比较容易想到的有两种,一种是直接使用插件实现,另一种则是使用宏命令来实现,两种都是可以完成这个操作的,只是第二种更加考验大家对 webstorm 的使用熟练度,所以今天我们先来讲讲这第一种,插件实现方式。

这里我们用到的插件名是 String Manipulation 我们在 webstorm 中安装该插件之后,重启 webstorm 就可以使用了。

使用的方式是对你想转换的字符串右键选中 String Manipulation | Switch Case | 这个路径下面有很多各种各样的选项,可以根据需要来转换。

当然鼠标操作,肯定以及一定还不够快捷,这个时候快捷键绑定就派上用场了,去快捷键绑定一下对应的命令吧,什么?还不会快捷键的绑定?那还不快去哔哩哔哩看木瓜太香的教程!!!

有前端问题需要讨论的可以加我的qun:237871108。也可以通过哔哩哔哩搜索木瓜太香找到我。

webstorm编写vue、react 将大驼峰组件命名转换成短横杠命名的更多相关文章

  1. 【C语言】编写函数实现库函数atoi,把字符串转换成整形

    //编写函数实现库函数atoi.把字符串转换成整形 #include <stdio.h> #include <string.h> int my_atoi(const char ...

  2. react中jsx文件是如何转换成js对象的

    通过在线babel转换器,转换出jsx是如何变成js对象的 jsx文件 加入了正常的标签以及嵌套标签以及方法属性 function hello() { click=()=>{ console.l ...

  3. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  4. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  5. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  6. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  7. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  8. 从 Vue 的视角学 React(四)—— 组件传参

    组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...

  9. 前端开发组件化设计vue,react,angular原则漫谈

    前端开发组件化设计vue,react,angular原则漫谈 https://www.toutiao.com/a6346443500179505410/?tt_from=weixin&utm_ ...

随机推荐

  1. FPN和他的子孙们

    FPN 方框里表示top down里每层有两个卷积操作  PAN:添加一个 bottom up线 NAS-FPN:基于搜索结构的FPN  Fully-conencted FPN:全连接的FPN  Si ...

  2. 你真的理解索引吗?从数据结构层面解析mysql索引原理

    从<mysql存储引擎InnoDB详解,从底层看清InnoDB数据结构>中,我们已经知道了数据页内各个记录是按主键正序排列并组成了一个单向链表的,并且各个数据页之间形成了双向链表.在数据页 ...

  3. DB2 创建存储过程保存:XX 后面找到异常标记 "END-OF-STATEMENT"。

    存储过程最后一行加结束符@: 然后执行:db2 -td@ -vf /home/WGJ/proc_data_calculate.sql [slsadmin@localhost /]$ db2 -td@ ...

  4. JavaScript call的示例

    作用: 改变函数执行时的作用域 let name = 'global name' function say(){ console.info(arguments) // 调用时接收的参数个数 conso ...

  5. geth常用命令

    转载地址 https://blog.csdn.net/qq_36124194/article/details/83686823 geth常用命令 初始化私链 geth --datadir /path/ ...

  6. PostgreSQL在没有备份情况下误删除Clog恢复

    创建实验表postgres# create table t (n_id int primary key,c_name varchar(300));CREATE TABLEpostgres# inser ...

  7. CSS动画实例:旋转的圆角正方形

    在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...

  8. 什么是c/c++编译

    GCC是什么 GNU Compiler Collection的缩写,一开始是c语言的编译器,但现今可以支持多种语言的编译工作,也支持了多个硬件平台的编译.总而言之,主流的c语言编译器就是这个gcc了. ...

  9. PDF的来源——概率密度函数

    //首发于简书,详见原文:https://www.jianshu.com/p/6493edd20d61 你不会还真的以为这是一篇讲怎么做pdf文件,怎么编辑.保存.美化的文章吧? 咳咳,很遗憾告诉你不 ...

  10. 最新通达OA-getshell 漏洞复现

    0x00 通达简介 通达OA国内常用的办公系统,使用群体,大小公司都可以,其此次安全更新修复的高危漏洞为任意用户登录漏洞.攻击者在远程且未经授权的情况下,通过利用此漏洞,可以直接以任意用户身份登录到系 ...