Plop says goodbye to copy and paste

What is the plop

Plop is a small tool that allows you to easily generate a variety of template code in your project.

use

0. yarn add plop -D

1. Create a plopfile.js file in your project root directory. Plop will automatically generate the file based on the configuration of plopfile.js that you created

   Module. exports = function (plop) {setGenerator('basics', {// module.exports = function (plop) { 'This is a skeleton plopfile', // Take the user's input, input is input, list is select, where the type of the type is based on inquirer. 'input', name: 'name', message: 'controller name please'}] 'add', path: 'src/{{name}}.js', templateFile: 'plop-templates/controller.hbs' }] }); };Copy the code

2. After that, you can add the plop command to package.json and run yarn run plop

The main method

SetHelper

SetHelper is to create a function that can be used in a template, such as in my project

module.exports = (plop) => {
  plop.setHelper('upperCase', (string) => string.charAt(0).toUpperCase() + string.slice(1));
  // plop.setGenerator('component', zsjgenerateCompConfig);
  // plop.setGenerator('zsjContainer', zsjgenerateContainerConfig);
  // plop.setGenerator('zsjReducers', zsjReducersConfig);
  // plop.setGenerator('test', zsjTestConfig);
  // plop.setGenerator('list',xjwGenerateList)
};
Copy the code

This registers an upperCase function globally, which we can use in the template

function {{upperCase containerName}}(props) {
Copy the code

setPartial

This method registers a global snippet of code

module.exports = function (plop) {
    plop.setPartial('myTitlePartial', '<h1>{{titleCase name}}</h1>');
    // used in template as {{> myTitlePartial }}
};
Copy the code

setGenerator

The main method used to generate configurations, such as mine, is as follows

module.exports = (plop) => {
  plop.setHelper('upperCase', (string) => string.charAt(0).toUpperCase() + string.slice(1));
  plop.setGenerator('component', zsjgenerateCompConfig);
  plop.setGenerator('zsjContainer', zsjgenerateContainerConfig);
  plop.setGenerator('zsjReducers', zsjReducersConfig);
  plop.setGenerator('test', zsjTestConfig);
  plop.setGenerator('list', xjwGenerateList);
};
Copy the code

The main action

The actions here refer to operations such as adding or modifying files

Add

Add files

AddMany

Add multiple files together

Modify

Modify the file

Append

To add content to the end of a file

In actual combat

Creating a component Template

JSX and SCSS, and then change the component name. This is a bit of a hassle. We can use plop to implement one-click creation.

Of course, you can set the contents of the template according to your own needs, or you can set the contents of the index. SCSS template

Automatic import component

Another scenario is that when we automatically create a component, we need to import it in some file and then write the component in render. We can also do this using plop.

The first step is to add two replacement strings // import comp and to the component we just created

{/* comp conent */}, you can see GIF

This is just inserting one file. If you are creating a file in a project and need to insert several files in a fixed way, you can use this method to insert multiple files at the same time, instead of having to repeatedly open each file and insert it manually.

With create and modify files, you can compose different code templates for your own projects, which can be generated automatically, and of course this can be used in conjunction with vscode snippets to get more results with less effort.