如何在 WebStorm 中创建 React 现成组件 template/snippet/LiveTemplate?
How to create a React ready made component template/snippet/LiveTemplate in WebStorm?
开箱即用的 WebStorm 没有为 React.js 组件提供现成的模板,要求和导出都准备就绪,当您开始设计许多组件时,它会让生活更轻松新文件 React 组件模板准备就绪。
所以问题是:如何创建 WebStorm React 组件?
1.) 进入设置 (alt+ctrl+s)
2.) 开始输入 "file and code templates"
3.) 按左上角的绿色+按钮
4.) 字段名称,只写"React Component" 和扩展JS(每个人都有自己的喜好,所以可以随意更改...)
5.) 最佳实践规定了文件命名,就像我所做的那样:文件名采用驼峰式,ComponentName 首字母大写,然后是驼峰式。再一次,你可以做任何最适合你的事情。所以我使用了这段代码:
"use strict";
var React = require('react');
var ${NAME} = React.createClass({
render: function(){
return (
);
}
});
#set( $upper = $NAME.toString().substring(0,1).toUpperCase() )
#set( $rest = $NAME.toString().substring(1))
#set( $capped = "$upper$rest" )
module.exports = $upper$rest;
复制粘贴上面的代码,然后按确定。
现在,当您右键单击新文件时,您将拥有 "React Component" 以及所有初始最佳实践代码用法,一切准备就绪,您可以开始添加任何其他代码。
希望这对您有所帮助。
在设置中,搜索“实时模板”。
您会在 WebStorm 中找到所有实时模板快捷方式。
开箱即用的 WebStorm 没有为 React.js 组件提供现成的模板,要求和导出都准备就绪,当您开始设计许多组件时,它会让生活更轻松新文件 React 组件模板准备就绪。
所以问题是:如何创建 WebStorm React 组件?
1.) 进入设置 (alt+ctrl+s)
2.) 开始输入 "file and code templates"
3.) 按左上角的绿色+按钮
4.) 字段名称,只写"React Component" 和扩展JS(每个人都有自己的喜好,所以可以随意更改...)
5.) 最佳实践规定了文件命名,就像我所做的那样:文件名采用驼峰式,ComponentName 首字母大写,然后是驼峰式。再一次,你可以做任何最适合你的事情。所以我使用了这段代码:
"use strict";
var React = require('react');
var ${NAME} = React.createClass({
render: function(){
return (
);
}
});
#set( $upper = $NAME.toString().substring(0,1).toUpperCase() )
#set( $rest = $NAME.toString().substring(1))
#set( $capped = "$upper$rest" )
module.exports = $upper$rest;
复制粘贴上面的代码,然后按确定。
现在,当您右键单击新文件时,您将拥有 "React Component" 以及所有初始最佳实践代码用法,一切准备就绪,您可以开始添加任何其他代码。
希望这对您有所帮助。
在设置中,搜索“实时模板”。
您会在 WebStorm 中找到所有实时模板快捷方式。