My Code is Beau!
The fact is, when I write my code, I can spend time to format it exactly as I want. Most of the time, though, I let the code editor do it for me, after having set up some preferences.
Let's look at some examples:
- For code indentation, I can use a tab or whatever number of spaces I prefer.
- I can add a space before opening parentheses and braces…
Or sometimes, depending on conditions and internal naming conventions, I can add blank lines after an opening brace square bracket and before the closing one...
I can put the case statement at the same level of indentation of the switch statement (wherever the open square bracket is).
...or not.
Whatever. You get my point. Because it's my code, it's good looking! It's how I want to read it, how I feel comfortable with it.
Now, sometimes, I'm grabbing code from the internet. Utilities, frameworks, whatever, either to check what it does, or because I need it to save time and avoid reinventing the wheel. Notice that - and this has nothing to do with the current article - it's not always a bad thing to reinvent the wheel. It's even a good way to practice, improve your skills, and compare with others. But the point here is that very often, a downloaded .js file written by another developer is not formatted the way I want. Sometimes it even has some kind of minfying (variables and functions are not replaced by a, b, c, etc.), but still, everything is on a single line.
And here is where Beautifier stands: It formats the code almost as you want. Just set up some parameters (size of indentation in tabs or spaces, position of braces, etc.), ask Beautifier to format it, and enjoy.
Say you have this code (here, indentation is based on two spaces, and for compareDates: "no space before opening braces" and "braces on own line")…
So beau1.
Now, how does this fit with Wakanda? Easy: You can do the same in the Code Editor, starting with version 2 - part of the development branch as of today. Look at the following screenshot of the Code Editor toolbar. Did you notice these buttons? One is the Beautifier button.
If you click on it, it applies beautification to your code, in the selected portion, or the entire code if nothing is selected.
Il you display the pop-up menu, the button lets you either apply the beautification, see the "About" dialog, or define settings in the following dialog:
Isn't it super cool? Beside handling "external" code, I can see two main reasons for using it:
The good news is that you can write your own extensions. The documentation for it is being written as of today and should be published soon, but allow me to copy and paste the introduction, as a teaser:
2If you're the boss.
Let's look at some examples:
- For code indentation, I can use a tab or whatever number of spaces I prefer.
- I can add a space before opening parentheses and braces…
if (…)
if (…) {
…or not.
I can add a space after opening parentheses and braces, and before closing parentheses and square brackets…
I can add a space after opening parentheses and braces, and before closing parentheses and square brackets…
if ( doIt ( withParameter ) ) {
…or not.
Or sometimes, depending on conditions and internal naming conventions, I can add blank lines after an opening brace square bracket and before the closing one...
if (doIt(withParameter)) {
...some code here
}
…or not.
I can put the case statement at the same level of indentation of the switch statement (wherever the open square bracket is).
...or not.
Whatever. You get my point. Because it's my code, it's good looking! It's how I want to read it, how I feel comfortable with it.
Now, sometimes, I'm grabbing code from the internet. Utilities, frameworks, whatever, either to check what it does, or because I need it to save time and avoid reinventing the wheel. Notice that - and this has nothing to do with the current article - it's not always a bad thing to reinvent the wheel. It's even a good way to practice, improve your skills, and compare with others. But the point here is that very often, a downloaded .js file written by another developer is not formatted the way I want. Sometimes it even has some kind of minfying (variables and functions are not replaced by a, b, c, etc.), but still, everything is on a single line.
And here is where Beautifier stands: It formats the code almost as you want. Just set up some parameters (size of indentation in tabs or spaces, position of braces, etc.), ask Beautifier to format it, and enjoy.
Say you have this code (here, indentation is based on two spaces, and for compareDates: "no space before opening braces" and "braces on own line")…
function SuperJSFunction(p1, p2, p3) {if(p1 && p2 && p3){return p1 + (p2 * p3);}}
function compareDates(d1, d2)
{
var d1IsDate, d2IsDate;
if(d1 && d2)
{
d1IsDate = d1 instanceof Date;
d2IsDate = d2 instanceof Date;
if(d1IsDate && !isNaN(d1) && d2IsDate && !isNaN(d2))
{
if(d1 > d2)
{
return 1;
}
else if(d2 < d1)
{
return -1;
}
else
{
return 0;
}
}
}
}
...and you set the parameters of Beautifier to:
- Indent with a tab
- Braces with control statement
- Space before conditional
Run beautifier, and here you are:
function SuperJSFunction(p1, p2, p3) {
if (p1 && p2 && p3) {
return p1 + (p2 * p3);
}
}
function compareDates(d1, d2) {
var d1IsDate, d2IsDate;
if (d1 && d2) {
d1IsDate = d1 instanceof Date;
d2IsDate = d2 instanceof Date;
if (d1IsDate && !isNaN(d1) && d2IsDate && !isNaN(d2)) {
if (d1 > d2) {
return 1;
}
else if (d2 < d1) {
return -1;
}
else {
return 0;
}
}
}
}
So beau1.
Now, how does this fit with Wakanda? Easy: You can do the same in the Code Editor, starting with version 2 - part of the development branch as of today. Look at the following screenshot of the Code Editor toolbar. Did you notice these buttons? One is the Beautifier button.
If you click on it, it applies beautification to your code, in the selected portion, or the entire code if nothing is selected.
Il you display the pop-up menu, the button lets you either apply the beautification, see the "About" dialog, or define settings in the following dialog:
Isn't it super cool? Beside handling "external" code, I can see two main reasons for using it:
- You type your code with a machine gun. So fast. In one shot. Without caring about formatting while typing.
- You're on a team, with shared and mandatory formatting.
In either case, once you have finished typing your code, just apply Beautifier to it to make it fit your formatting needs. Either your own personal needs, or the team's needs. Or both2.
It's available as a Wakanda Studio Extension. In fact, three of them come with the Studio:
It's available as a Wakanda Studio Extension. In fact, three of them come with the Studio:
- Beautifier
- JSLint – No need to explain JSLint. It says "JSLint will hurt your feelings." Not "may hurt," nor "will eventually hurt," but "will hurt." The extension itself is not finished yet. (See the video just below for a quiet demonstration.)
- Snippet – This one insert code snippets, blocks of pre-formatted code.
The good news is that you can write your own extensions. The documentation for it is being written as of today and should be published soon, but allow me to copy and paste the introduction, as a teaser:
Wakanda Studio extensions are software programs that can add new functionalities to Wakanda Studio. Extensions are written using standard Web technologies such as JavaScript, HTML, CSS, and JPEG. Everyone can write Wakanda Studio extensions, for their own needs or for sharing with the Wakanda community. Extensions can add contextual functionalities to various toolbars and menus in Wakanda Studio, including the main toolbar and the Solution Explorer contextual menu.
An extension can - and surely will - interact with the Studio. Specific JavaScript APIs are available via the studio global object. So the extension can display an alert, get the selected files in the Explorer, get text in the Code Editor, etc. It could even run unit tests. Why not?
If you are too impatient to wait for the doc – which, really, should be available within weeks of this writing – just look at the code of the existing extensions, which are located here:
If you are too impatient to wait for the doc – which, really, should be available within weeks of this writing – just look at the code of the existing extensions, which are located here:
-
On Mac: {Wakanda Studio.app}/Contents/Extensions/
-
On Windows: {Wakanda Studio}/Extensions/
If you are way too impatient, just know that your own extensions should be located here:
-
On Mac: {User}/Library/Application Support/Wakanda Studio/Extensions/
-
On Windows: {User}/AppData/Roaming/Wakanda Studio/Extensions/
Take care if you're like me when switching from version 2 to version 1 of Wakanda. When I do this switch, I clear the Wakanda Studio and Wakanda Server folders located here ({User}/Library/Application Support/ or {User}/AppData/Roaming/).
Just keep a backup copy of your extensions somewhere...
1Yes! And i'm using d1IsDate and d2IsDate just to reduce the width in the if(...) statement, to fit in this page
Just keep a backup copy of your extensions somewhere...
1Yes! And i'm using d1IsDate and d2IsDate just to reduce the width in the if(...) statement, to fit in this page
2If you're the boss.
Add new comment