Plugin:BeautifyWB v2.02

Browse, download and discuss plugins for Blumentals code editors

Plugin:BeautifyWB v2.02

Postby pmk65 » Fri Jun 19, 2015 1:13 am

Integrate JS Beautifier into Webuilder

* JS Beautifier is a coding style beautifier for JavaScript (and also for CSS and HTML).
* It reformat and reindent bookmarklets, ugly JavaScript, unpack scripts packed by Dean Edward’s popular packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.
* You can easily write your own configuration to make your JavaScript beautiful and consistent.
* Requires nodejs.

Before installing/using this plugin, you need to install nodejs and the JS Beautifier script.

Installation:
1.) Download plugin .ZIP file.
2.) Download and Install node.js from https://nodejs.org/
3.) Reset computer. (Required after install of node.js)
4.) Open command prompt.
5.) Enter this at the prompt: npm install js-beautify -g
6.) If everything went well you should see something like this:
Code: Select all
C:\Users\Home\AppData\Roaming\npm\html-beautify -> C:\Users\Home\AppData\Roaming\npm\node_modules\js-beautify\js\bin\html-beautify.js
C:\Users\Home\AppData\Roaming\npm\js-beautify -> C:\Users\Home\AppData\Roaming\npm\node_modules\js-beautify\js\bin\js-beautify.js
C:\Users\Home\AppData\Roaming\npm\css-beautify -> C:\Users\Home\AppData\Roaming\npm\node_modules\js-beautify\js\bin\css-beautify.js
js-beautify@1.5.6 C:\Users\Home\AppData\Roaming\npm\node_modules\js-beautify
+-- nopt@3.0.2 (abbrev@1.0.7)
+-- config-chain@1.1.9 (ini@1.3.4, proto-list@1.2.4)
+-- mkdirp@0.5.1 (minimist@0.0.8)

7.) Open WeBuilder and select "Plugins -> Manage Plugins" from the menu.
8.) Click "Install" and select the .ZIP file you downloaded in step 1.
9). You can now process your JavaScript files (or selections) through JS Beautifier directly in the editor.

If you want to change how JS Beautifier works, you can modify the JS Beautifier config files "jsbeautify.json", "cssbeautify.json", "htmlbeautify.json" and "jsbeautify.json". All located in the JSBeautifierWB plugin folder. (%USERPROFILE%\AppData\Roaming\Blumentals\WeBuilder\plugins\BeautifyWB)

Changes:
v1.1 - Progress bar added
v1.2 - Better layout. Window is now a modalbox
v2.0 - Rewrite of code. Progress bare now replaced with Busybox
v2.01 - Converts Unicode to Entities as a workaround for the TStringList SaveAsFile encoding problem.
v2.02 - Changed the Save/Load methods from using TSTringList to using ADODB.Stream. This fixes the encoding problem.

Feedback appreciated. ;)
(I only use WeBuilder, so I haven't tested if it works in HTMLPad, Rapid CSS or Rapid PHP.)
Attachments
BeautifyWB.zip
(9.49 KiB) Downloaded 861 times
Last edited by pmk65 on Thu Mar 16, 2017 12:13 pm, edited 5 times in total.
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin: JSBeautifyWB v1.0

Postby Aivars » Fri Jun 19, 2015 12:00 pm

Wow, this is great. Too bad about the node.js requirement, is there any way around it?
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 2452
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: Plugin: JSBeautifyWB v1.0

Postby pmk65 » Fri Jun 19, 2015 3:49 pm

Aivars wrote:Wow, this is great. Too bad about the node.js requirement, is there any way around it?


Not unless you want to implement the python version instead. :)
But nodejs is extremely easy to install/use on Windows. As they now have a standard Windows installer, you don't have to seup servers, enviroment vars etc.
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin:BeautifyWB v2.0

Postby pmk65 » Sat Mar 11, 2017 11:45 pm

New version added.
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin:BeautifyWB v2.02

Postby csengh » Wed Jan 09, 2019 1:05 pm

hy!
I install node.js than restart and install plugin in WeBuilder 2018.
Unfortunately I receive this message:
js-beautify-master.zip does not contain valid plugin

What's wrong, please help.

windows 7-x64
csengh
 
Posts: 39
Joined: Fri Jul 07, 2017 12:32 pm

Re: Plugin:BeautifyWB v2.02

Postby pmk65 » Wed Jan 09, 2019 2:52 pm

csengh wrote:hy!
I install node.js than restart and install plugin in WeBuilder 2018.
Unfortunately I receive this message:
js-beautify-master.zip does not contain valid plugin

What's wrong, please help.

windows 7-x64


Did you install the Beautfier Nodejs module?

4.) Open command prompt.
5.) Enter this at the prompt: npm install js-beautify -g


Im no sure what js-beautify-master.zip is, but the WeBuilder plugin archive should be BeautifyWB.zip (The file you download from this thread)
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin:BeautifyWB v2.02

Postby csengh » Wed Jan 09, 2019 5:18 pm

after node.js install in cmd window appears: js-beautify@1.8.9
then I try to install downloaded zip, but I have only js-beautify-master.zip, I don't found BeautifyWB.zip

Which files would be the plugins?
csengh
 
Posts: 39
Joined: Fri Jul 07, 2017 12:32 pm

Re: Plugin:BeautifyWB v2.02

Postby pmk65 » Wed Jan 09, 2019 5:52 pm

BeautifyWB.zip is the file attached to the first post in this thread/forum. Just click the link to download it.
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin:BeautifyWB v2.02

Postby csengh » Wed Jan 09, 2019 6:18 pm

Oh Yeah, I got it!

My mistake, I downloaded JS Beautifier zip from GitHub not from this site!

thank's for help :)

please tell me what command control the line length in %USERPROFILE%\AppData\Roaming\Blumentals\WeBuilder\plugins\BeautifyWB (I want to set right margin to constrain a given characters per line!)

I cannot change anything forJS Beautifier works, I modify in vain the JS Beautifier config files "jsbeautify.json", "cssbeautify.json", "htmlbeautify.json" from %USERPROFILE%\AppData\Roaming\Blumentals\WeBuilder\plugins\BeautifyWB. For example I renamed all these files from extension json to json1 and the Beautifier works without any error.
csengh
 
Posts: 39
Joined: Fri Jul 07, 2017 12:32 pm

Re: Plugin:BeautifyWB v2.02

Postby pmk65 » Wed Jan 09, 2019 11:04 pm

in %USERPROFILE%\AppData\Roaming\Blumentals\WeBuilder\plugins\BeautifyWB\htmlbeautify.json, you set:

"wrap_line_length": 79,

Look at the beautifyer documentation for the available options.

Note: The wrap will only work for HTML code. If you want to do it on source code, like JavaScript or PHP, you will need a AST based parser like Prettier or similar.

csengh wrote:My mistake, I downloaded JS Beautifier zip from GitHub not from this site!


That's a different plugin by Aivars, but it does the same I think.
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin:BeautifyWB v2.02

Postby csengh » Thu Jan 10, 2019 12:40 pm

As I say:
I cannot change anything forJS Beautifier works, I modify in vain the JS Beautifier config files "jsbeautify.json", "cssbeautify.json", "htmlbeautify.json" from %USERPROFILE%\AppData\Roaming\Blumentals\WeBuilder\plugins\BeautifyWB. For example I renamed all these files from extension json to json1 and the Beautifier works without any error.

first I change "indent_size": to 12 from 2 but indent remain 2 in resulted html. Then I changed "htmlbeautify.json" filename to "htmlbeautify.json1" but the result was same (indent with 2 not 12, without any error!). I tried restart WeBuilde but nothing changed. So I think it has somehere a copy of initial "htmlbeautify.json" file. . .
csengh
 
Posts: 39
Joined: Fri Jul 07, 2017 12:32 pm

Re: Plugin:BeautifyWB v2.02

Postby pmk65 » Thu Jan 10, 2019 1:48 pm

If you rename the config file to .json1 it will not read it. It will just use the build-in defaults.

And if you get an error using your modified htmlbeautify.json, it sounds like the file is no longer valid after you have edited it.

Here's the one I use. (If you change the indentation size, make sure that the same size is set in WeBuilder options.)

Code: Select all
{
    "indent_size": 4,
    "indent_char": " ",
    "indent_with_tabs": false,
    "eol": "\n",
    "end_with_newline": true,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "indent-inner-html": false,
    "brace-style": "collapse",
    "indent-scripts": "normal",
    "wrap_line_length": 79,
    "wrap_attributes": "auto",
    "wrap_attributes_indent_size": 4,
    "unformatted": "inline",
    "extra_liners": "head,body,/html"
}
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin:BeautifyWB v2.02

Postby csengh » Thu Jan 10, 2019 10:30 pm

(If you change the indentation size, make sure that the same size is set in WeBuilder options.)

No matter size setted up in WeBuilder "Options", the problem was "indent_with_tabs" was setted to true by default :? , now I setted to false and indent works nice (according documentation Indent with tabs overrides Indentation size).

Now the only problem is that I don't want indent "wrapped lines" (my indent is 10 and this is fine once but twice is too big !). I have set "wrap_attributes_indent_size" to 0 or 1 but nothing change, the wrapped line is indent with 2x10=20 ( I left "wrap_attributes": "auto",)
Last edited by csengh on Fri Jan 11, 2019 9:39 am, edited 1 time in total.
csengh
 
Posts: 39
Joined: Fri Jul 07, 2017 12:32 pm

Re: Plugin:BeautifyWB v2.02

Postby pmk65 » Thu Jan 10, 2019 10:59 pm

You probably have to change "wrap-attributes".

As a last resort, you can always do a Search/Replace for 20 spaces. ;)
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin:BeautifyWB v2.02

Postby csengh » Sun Jan 20, 2019 7:01 pm

pmk65 wrote:
As a last resort, you can always do a Search/Replace for 20 spaces. ;)


Yes, this method always works :P :oops: :lol:

csengh wrote:Now the only problem is that I don't want indent "wrapped lines" (my indent is 10 and this is fine once but twice is too big !). I have set "wrap_attributes_indent_size" to 0 or 1 but nothing change, the wrapped line is indent with 2x10=20 ( I left "wrap_attributes": "auto",)

pmk65 wrote:You probably have to change "wrap-attributes".

no, I don't changed it, but unfortunately this option is for attributes not for content ,so at the moment this plugin can't set wrapped line indent size :(
csengh
 
Posts: 39
Joined: Fri Jul 07, 2017 12:32 pm


Return to Plugins for HTMLPad / Rapid CSS / Rapid PHP / WeBuilder

Who is online

Users browsing this forum: No registered users and 2 guests