大家好！我是木瓜太香，精通 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. JS 弹出框拖拽

    css代码 body { margin:; text-align: center; } .box { display: none; background-color: #fff !important; ...

  2. Vue3 为何使用 Proxy 实现数据监听

    博客地址:https://ainyi.com/93 vue3 响应式数据放弃了 Object.defineProperty,而使用Proxy来代替它 我们知道,在 vue2 中,实现数据监听是使用Ob ...

  3. drop blocks

  4. java 网络通信协议、UDP与TCP

    一 网络通信协议 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定 的规则,这就好比在道路中行驶的汽车一定要遵守交通规则一样.在计算机网络中,这些连接和通 ...

  5. C#LeetCode刷题之#389-找不同（Find the Difference）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4062 访问. 给定两个字符串 s 和 t,它们只包含小写字母. ...

  6. 如何为你的IDEA安装插件——几个实用插件推荐

    文章目录 如何为你的IDEA安装插件--几个实用插件推荐 安装插件 插件推荐 1.Background Image Plus 2.Translation 3.CodeGlance 4.Rainbow ...

  7. LeetCode 647. Palindromic Substrings的三种解法

    转载地址 https://www.cnblogs.com/AlvinZH/p/8527668.html#_label5 题目详情 给定一个字符串,你的任务是计算这个字符串中有多少个回文子串. 具有不同 ...

  8. docker基础入门理解

    本文简单的介绍了一下docker的一些优点,以及使用方法 1. 理解docker 1.1 docker是什么? 1.2 为什么要使用Docker? 2. docker安装 3. docker-容器,镜 ...

  9. Vue-Router 基础入门教程

    Vue-Router 基础入门教程 前言 这周的计划是用VUE将之前的小demo的前端给重构了,并且做成前后端分离的样式,因为之前的那个聊天室的demo几乎都是在一个路由上完成的,所以学习Vue-ro ...

  10. python基本数据类型（三）

    字典{} 冒号前面是key(键)冒号后面是values(值)  键:值 ==键值对 1.索引 s={ 'name':'lifei', 'age':'', 'sex':'man' } print(s[' ...