Develop Reference

how to align javascript's equals sign in webstorm

all
when i config my Webstorm9 settings like this ,it turns out that the sample code in the right aligns the equals sign properly
but when i formatting my javascript code in the editor it doesn't work,it still shows
and what i want is align the equals sign
anyone who can take a look?
-------EDIT------
maybe i misunderstand the checked option,but i copy the sample code to my editor then reformat it, oh,bad result..

In Webstorm 10,
Go to Settings> Editor> Code Style > JavaScript
Go to the "Other" tab and check "Align multiple 'var' statements and assignment" and click Ok.
Go to Code > Reformat code (Ctrl + Alt + L)
Voila!

In PHPStorm 2017 (and, I assume, by extension WebStorm) that behavior can be achieved by:
going to Settings > Editor > Code Style > JavaScript
Wrapping and Braces tab
scroll down to Variable declarations and set Align to When Grouped
Additionally, setting Variable declarations to Wrap always will result in this when reformatting:
Update: unchanged in version 2018 and in WebStorm/PHPStorm version 2019, the steps I described above still work the same.

Update for WebStorm 2017.3
Apparently, since version 2017.3, the Other tab has been removed from Code Style > JavaScript.
Now you have a couple of alignment options under the Wrapping and Braces tab (scroll down to the bottom):
It took me a while to figure this out, hope this helps

Update for Webstorm 2016.1
#Hudvoy still has the right answer for this. I've updated with a visual of where you need to look in Webstorm 2016.1

Take note that the exact phrasing of the option is
Align multiline variable declaration
(emphasis mine) and that the example code shows:
var myLink = {
....
},
local = true,
initial = -1;
This option only aligns the equal signs of multiline variable declarations, not a bunch of single line variable declarations in a row like in your code.
To have it automatically align them you would need to change your code to
a = 1,
bbbbb = 2,
thisisc = 3;
Note that you also have to add a var before it all, as WebStorm will assume a=1 to be a reference to a global variable, not a variable definition.
Also note that code formatting is not automatic. You have to select Code->Reformat Code... from the menu, or hit Ctrl + Alt + L to reformat your code.
I also found that Webstorm could perform code formatting on the Javascript within either a .html or .js file, but would not work within a .php file - in PHP files it only performs syntax highlighting.

Is it possible to have adapt.js load multiple style sheets for one range?

I'm using adapt.js for the first time on a project. I have a range 0 to 720, I want to load a mobile.css file as well as a second css file, we'll call it style.css. Is this possible? Are there any work arounds? I tried this but it didn't work, as expected.
var ADAPT_CONFIG = {
path: 'css/',
dynamic: true,
range: [
'0px to 720px = style.css',
'0px to 720px = mobile.css',
'720px = 720.css'
]
};

You can use
#import url('/css/mobile.css');
at the beginning of your style.css.
Then you configure (through ADAPT_CONFIG) adapt.js to use only style.css for that range.
Or vice versa you can import style.css at the end of mobile.css and use only mobile.css

I'm afraid that this is impossible, but if you're feeling daring you could probably modify the source of adapt.js to do this. Here's the critical part of adapt.js:
// If it's a range, split left/right sides of "to",
// and then convert each one into numerical values.
// If it's not a range, turn maximum into a number.
val_1 = is_range ? parseInt(arr_0.split('to')[0], 10) : parseInt(arr_0, 10);
val_2 = is_range ? parseInt(arr_0.split('to')[1], 10) : undefined;
// Check for maxiumum or range.
if ((!val_2 && i === last && width > val_1) || (width > val_1 && width <= val_2)) {
// Build full URL to CSS file.
file && (url = path + file);
// Exit the while loop. No need to continue
// if we've already found a matching range.
break;
}
which is inside a while loop that checks the range conditions you specify in ADAPT_CONFIG. As you can see, once a path has been found, "range" ceases to be checked for any additional matches. You could probably change the code to allow it though - you'd probably have to move the code following the while loop into the above if statement and remove the break (this is an educated guess, I have not attempted this).
However, depending on how you're serving the files, I would strongly consider looking into an asset manager to combine "style.css" and "mobile.css" into a single file - precompiling assets allows for a few other fun tricks, like automatically making the css files as small as possible.
EDIT - if you're interested in an asset manager, there's really no one way to do it; it will depend heavily on the environment you're using at work. For something like rails this is super easy since merging files is fairly cooked in, and the sprockets gem has plenty of other features for asset management (combining files in it is pretty fast). If I were you though I'd probably just do some quick googling along the lines of "combining css files with ", there will be plenty of options. PHP scripts for this are all over the place if you don't have a fancy framework (here's a promising example), and Google makes an Apache mod for this kind of wok.
If you do go this route, I'd encourage you to play around a bit once you get the basics working - you could do something nifty like generate the values for range in ADAPT_CONFIG in the same place as where you combine the files, giving you a nice clean, single point from where you can manage style files.

Dashboard widget: getting version number from Info.plist

I'm writing a Dashboard widget in Dashcode, and on the back side, I've got a string for credits. I want to include the widget's version number in that string, but if possible, I want to programmatically grab it from the CFBundleVersion or CFBundleShortVersionString key in Info.plist to avoid having to change the number in multiple places if and when I update the widget.
Searches on Apple's developer documentation, Google and various forums have proven fruitless so far. What I'd like to know is whether there's a built-in way to do this that Apple included but forgot to mention (like var version = widget.version(); or something), or whether my script will have to pull in and parse the entire plist before plucking out the one value I actually want.
Thanks for any help you can provide!

I seem to have found the answer: use Dashcode's "data source" facility to read in Info.plist as an XML data source. From there, this blog post showed me how to traverse the plist's structure and get the correct string (in this case, the fifth <string> element in the file, corresponding to CFBundleShortVersionString.
The function I ended up with:
function getWidgetVersion() {
var dataSource = dashcode.getDataSource("infoPlist");
var version = dataSource.selection().valueForKey("dict").valueForKey("string")[4]; // This line and the previous could probably be combined for the sake of brevity
if (typeof(version) == 'string') {
document.getElementById("creditsLabel").innerHTML += version; //I'll change this to just pass the number on
}
}
Since the text of the creditsLabel div has already been started off with a localized string, I get a nice little label saying "Version 1.0".

Javascript refactoring in Vim

I don't need anything super fancy, but some scope aware refactoring would be nice.
Refactoring something in function scope is one of the most common scenarios for me:
var funyfun = function(arg1, arg2) {
arg1 = ...arg2;
arg2....();
}
Is there a vim plugin that would allow me to refactor arg1, for ex, in the scope of that function or do I have to invent my own "select block, find, replace" shortcut.
For extra kudos, something that would "refactor on the fly" as I type, so I can see where changes are being made. Netbeans does an excellent job of this.

This is not limited to a certain block, but this how I would do it with plain Vim:
Move cursor on top of arg1 and type *N
Type ciw and insert replacement.
Now you can use n and N to navigate the occurrences and by pressing . Vim will redo the replacement on the current match
Here's a shortcut for it:
" Simple word refactoring shortcut. Hit <Leader>r<new word> on a word to
" refactor it. Navigate to more matches with `n` and `N` and redo refactoring
" by hitting the dot key.
map <Leader>r *Nciw

Sound a bit like you only want renaming instead of refactoring. Full refactoring is tricky for Javascript, though some IDEs provide approximations. Since the question is about Vim specifically, and hacks aren't excluded, I'll just jump on the scope-aware aspect:
I've got a modified DoctorJS to generate scope-aware tags, with a Vim plugin for scope-aware navigation based on those tags (see blog post/screencast).
The hacky part comes in how navigation is implemented for Vim: I generate a search pattern that includes the scope of the variable and excludes all nested scopes for the same name. So, you could use that search pattern (function scoped_tags#FindTagInScope) to implement renaming (only if all uses are in the same file, and it doesn't exclude comments and the like..). Or you could use the scoped navigation to jump through variable occurrences manually and use '.' to rename them..

A few JavaScript-aware commands for Vim are provided by tern_for_vim, such as :TernRename for scope-aware renaming of variables, :TernDef for jumping to the definition of the thing under the cursor, and so on. You will need to have nodejs and npm installed, make sure to read the installation instructions in the repo.

As a partial solution you can use Eclim with JSDT, which allows you to use power of Eclipse refactoring/debugging/auto-completion/plugins with Vim.
In my experience, it may be a bit slow on older machines, but it's worth giving it a try.

In addition to doing actual scope-aware refactoring and the like, consider :%s/varName/newNav/gc. Per :help :s_c, the c flag passed to :s enters a quick confirmation mode for find/replace operations that prompts you (y/n) on whether each match should be replaced or not.

you can do:
:.,/^}/ s/\<arg1\>/new_name/g
the .,/^}/ is a range that many Ex commands accept: from cursor line to next line starting with a closing brace.

Benoit and Epeli has some good points, however, I find it a bit tedious to write .,/^}/ before my substitute statement, and since it only modifies code from the cursor position to the next line starting with a }, it depends on having the cursor position at the beginning of the function or block (and it will not work for an entire function with an if statement).
So instead I use visual mode in combination with textobjects. For instance, typing vi{ will select all the code inside the closest matching pair of {}, va{ will include the {} characters, and if you do this with visual line (vi{V), you'll get the entire function declaration as well. Then you can just do a :s/\<arg1\>/new_name/g to rename arg1 to new_name, including function parameters.

IE Object doesn't support this property or method

This is probably the beginning of many questions to come.
I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about.
I run the IE 8 JavaScript debugger and get this:
Object doesn't support this property or method app.js, line 1 character 1
Source of app.js (first 5 lines):
var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...
I have tested the site in a Webkit browser and it works fine in that.
What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.
UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com

In IE8, your code is causing jQuery to fail on this line
$("title").text(title);
in the menu.updateTitle() function. Doing a bit of research (i.e. searching with Google), it seems that you might have to use document.title with IE.

Your issue is (probably) here:
menu.updateTitle = function(hash){
var title = menu.titleBase + ": " + $(hash).data("title");
$("title").text(title); // IE fails on setting title property
};
I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:
document.title = title;
and IE is happy with that.
It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.

Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.