In this article, I'm going to cover the steps you need to know if you want to submit your custom element to Visual Composer Hub.
Once you've created a custom element亚洲成人免费视频 you have an option to submit it to Visual Composer in order to showcase it in the Hub. If you decided to do so, there are some code-style rules you have to follow.
Visual Composer dev team sticks to a certain set of code style rules in order to keep the code clean, more readable and reduce the number of bugs. The general code style rules are listed in the official GitHub repository under the .
Every element in the Hub undergoes a test, build and deploy process in the . During this process, element files get validated for certain code style rules. Thus the submitted element has to match all of these rules.
Where to begin
亚洲成人免费视频First off you need to download the if you haven't already. The code that comes within this plugin is already formatted to match the defined code style.
Once you've installed the example plugin you are now ready to edit it.
Setup code style
All of the code style rules are listed at . No need to remember them all, the standardjs亚洲成人免费视频 will format the code for you.
To start using it, inside the terminal enter the elements' folder (if you are working inside the example plugin):
This command will output any errors with description and location in a file. In order to automatically format the code, run:
yarn standard --fix
To see formatting errors instantly inside your files you should install the appropriate plugin for your editor. Check if your editor has such a plugin at .
I'm going to show you how to set up a for editor.
- Open Visual Studio Code editor;
- Click on the Extensions icon in the Activity Bar;
- Look for the right one and click install;
- Inside Settings click on the Workspace tab, to apply these settings only for this workspace;
- That's it, you're all set.
亚洲成人免费视频Now, the editor will instantly highlight the code that doesn't pass the code style rules.
/* eslint-disable */
亚洲成人免费视频And at the end of the file, on the last row add:
/* eslint-enable */
These commands will prevent standardjs from validating these files.
Note: We encourage you to use this approach only in uttermost cases.
For the PHP we use PSR-2 Code style and CodeSniffer that is configured in elementName/ci/ruleset.xml file, to check PSR2 rules .
NOTE: element folder should contain ci folder just like in the example plugin.
亚洲成人免费视频To validate PHP code style, inside terminal enter the elements' folder (if you are working inside the example plugin):
Then to validate PHP code run (change logoSuperTest亚洲成人免费视频 to your elements' name):
php ci/phpcs.phar --standard=ci/ruleset.xml logoSuperTest
亚洲成人免费视频This command will output any errors with description and location in the file.
Note: Again, we encourage you to use this approach only in uttermost cases.
Other files (JSON, CSS, etc.)
As for the other files formats like .json or .css, there are not any strict rules, but still, there are some general guidelines you should follow:
- Use 2 spaces for indentation;
- Use a space between a CSS selector and an opening bracket;
- Use a space after the colon in JSON files.
亚洲成人免费视频You always can use existing Visual Composer elements files as a reference. These elements come with a Free version and are available at the .
Once you've finished developing your element and prepared a zip亚洲成人免费视频 file of your element as per , you are ready to submit it to us.
After element submission, our development team will carefully review the code and include your element in the Hub to run tests against it. If any errors will be found we will provide you with a descriptive list of thing that needs to be fixed. After that, the submission process has to be repeated.
亚洲成人免费视频When your element will pass review and testing process, we will notify you about that and include your element in the Hub.