🚀🚀🚀react-syntax-plus: 上新了，两个更加实用的新功能写在前面 市场上形形色色关于代码片段生成

写在前面

市场上形形色色关于代码片段生成的插件有很多，但是基本上没有和已有变量联动的，这是我写插件的主要目的，希望不要误解react-syntax-plus

github：github.com/mmdctjj/rea…

支持的新功能

props支持

新版本新增了对props属性的支持，你可以在需要的位置，使用关键字加props唤醒，例如：ueprops，此时会提示基于useEffect with props的代码提示，

如果在ueprops后面追加字符串，都会被视为props的属性，例如：

当然，如果你对props已经进行了解构处理，那么会自动识别解构的属性，例如：

自定义hook支持

开发中经常使用自定义hook，所以对自定义hook也提供了支持，但是仅支持使用use开头的hook，同样也支持解构识别。

实际上，原生hook的匹配逻辑使用了自定义的hook的匹配逻辑，因为都是use开头的。

一些改动

根据网友反馈，现将ucxxx的格式做了调整，例如：uccount

const onCountChange = useCallback(() => {
    console.log("count", count);
}, [setCount]);
// 改动后
const onCountChange = useCallback((count) => {
    console.log("count", count);
}, [count]);

在后面的版本中，会新增后面字符是变量还是方法的判断，当字符是变量时，如上，当字符是方法时，例如：ucsetCount会生成下面的代码：

const onCountChange = useCallback((count) => {
    console.log("count", count);
    setCount(count);
}, [count]);

接下来要做的

目前正在施工👷‍♀️的功能是关于插件的联动功能。这样可以满足不同开发习惯的开发者。简单的构想如下：

当我们定义一个基础变量: 使用uscount生成如下代码

const [count, setCount] = useState(); 

但是我猜接下来你可能还会手写：ucsetCount生成如下代码

const onCountChange = useCallback((count) => {
    console.log("count", count);
    setCount(count);
}, [count]);

那么，如果你的习惯是这样，我们完全可以使用第一个命令时，自动执行第二个命令，也就是说ucsetCount直接生成下面的代码

const [count, setCount] = useState();

const onCountChange = useCallback((count) => {
    setCount(count);
}, [setCount]);

如果你是谨慎型选手，那么可以通过配置直接生成

const [count, setCount] = useState();

const onCountChange = useCallback((count) => {
    setCount(count);
}, [setCount]);

useEffect(() => {
    console.log("count", count);
}, [count]);

另外关于console语句，我也想做一些扩展，例如给日志增加颜色、格式、日期，文件路径等。

consoe.log(fileName, dateFormat, varName)
// app.jsx 14:30:00 count 0
// app.jsx 14:32:00 count 1
// app.jsx 14:35:00 count 2

当然，还是在构想的阶段，因为并不是大多数的开发者都需要，或者并不是所有的变量都需要这样。如果对此，你有更好的想法，欢迎告诉我～

新功能许愿：github.com/mmdctjj/rea…