正则改造VS Code里React类组件的自定义snippet

我目前都习惯用 JS JSX Snippets 这个 VS Code 插件来快速编写 React 组件，然后发现快速生成类组件的 rcc 其中的类名可以跟着当前文件名自动变化，于是就研究了一下。

最后找到这篇非常棒的教程 https://blog.csdn.net/maokelong95/article/details/54379046 ，讲解得非常清楚。

但是，还有点细节让我的强迫症不爽：有些组件直接用一个JS文件，如 App.js ，这样里面使用 rcc 能自动生成 App 这个类名，但是，还有很多组件是用一个文件夹的，因为它的样式、以及一些子组件要放一起，如 \News\index.js ，这时使用 rcc 就只能生成 index 这个不合适的类名了，但显然我想要的是 News 做类名。

看到 snippets 变量转换的语法里，可以使用正则提取，并进一步格式化，那正好我复习一下正则，开搞。

期间各种心酸苦楚就不赘述了。就是发现只有占位符可以嵌套，可选项不能嵌套，变量转换的 if else 输出语法也不能嵌套，哎。。。最后思路改为，分别对文件名和路径进行正则匹配和提取，如果是 大写开头的 就提取成功，否则就只输出空格。所以代码风格很重要，组件就该用 Pascal 命名法。

// C:\Users\用户名\AppData\Roaming\Code\User\snippets\rcc.code-snippets 文件{"React Class Component": {"scope": "javascript,typescript","prefix": "rcc","body": ["import React, { Component } from 'react';\n","export default class ${1:${TM_FILENAME_BASE/(^[A-Z]\\w*$)/${1:- }/}}${2:${TM_DIRECTORY/^[C-H]:\\\\[\\S ]+\\\\([A-Z]\\w*)$/${1:- }/}} extends Component {","  render () {","    return (","      <div>","        ${3:${TM_FILEPATH/^[C-H]:\\\\[\\S ]+(\\\\src\\\\\\S+)$/$1/}}","      </div>","    );","  }","}\n"],"description": "生成React类组件"}}

如果文件名和目录名都是大写开头，也没事，毕竟是嵌套在占位符里的，按 Tab 键可以快速定位，二选一，再按一下退格键就删了，也是因此两种类名的占位符之间我都没留空格，哈哈哈

稍微解释一下为什么那么多反斜杠 \ ，因为这是字符串，VS Code读取的时候就会进行转义一次，然后才是正则里需要的转义，所以就 4个 \ 才表示匹配一个 \ 。当然，我这正则不一定考虑的很周全，才疏学浅。

最后，也是最重要的，其实这个类名是无所谓的，可有可无，随便叫啥，我只是满足一下自己的细节强迫症，以及复习一下正则，万一有大佬看到此文，还请轻喷哈。

正则改造VS Code里React类组件的自定义snippet相关推荐

React类组件里面的各种问题浅析
浅析React类组件 React类组件(组件名首字母大写) //创建类组件组件名首字母大写 class MyCom extends React.Component {render(){return ...
React 类组件和函数组件
React 类组件和函数组件目录 1.类组件和函数组件 2.如何使用 props 和 state 3.如何绑定事件 4.复习 this+ 两个面试题组件component 一.概念 Element ...
react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用 by Balaganesh Damodaran 通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to conve ...
[react] 类组件和函数式组件有什么区别？
[react] 类组件和函数式组件有什么区别? 函数式组件没有state和一系列的钩子函数,只接收一个props 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大 ...
react类组件中父组件调用子组件函数
1.自定义事件子组件在 componentDidMount 生命周期里调用父组件的方法将 this 传给父组件 Son import React, { Component } from 'react ...
React类组件的两种写法
react中类组件的两种写法: 要点:•类组件必须要继承React.Component •类组件中的render()方法,返回值是一个jsx // 方式一: import React from 're ...
dw上按钮事件 pb_「React TS3 专题」使用 TS 的方式在类组件里定义事件
在「React TS3 专题」亲自动手创建一个类组件,我们一起学习了如何用 TS 的方式在React 里定义类组件(class component)以及了解了什么是 JSX.本篇文章,笔者将带着大家一 ...
react中类组件this的指向问题
1.铺垫知识 a.普通函数的this指向若是一个普通函数直接被调用,那this默认是指向全局的,若是非严格模式下,则是指向window的 function display(){console.log ...
深入学习React函数组件性能优化三剑客useMemo、useCallback、memo
Hook使用规则只能在函数的最外层调用Hook,不能在循环.条件判断或子函数中调用. 只能在React函数组件或自定义Hook中调用Hook,不可在其他JavaScript函数中使用. useMem ...

正则改造VS Code里React类组件的自定义snippet

正则改造VS Code里React类组件的自定义snippet相关推荐

最新文章

热门文章