I have pored over the formatting settings on Eclipse for hours and found no solution to this problem:
Video of issue
When I type the opening curly brace on the line immediately following an if, else or function line the ending brace is automatically added, but neither conform to my formatting rules (i.e. the braces should be aligned with the if, else or function text).
The way it looks:
if (a)
{
}
The way it should look (and does after running the formatter):
if (a)
{
}
I would chalk it up to a deficiency in Eclipse except for one thing: when editing PHP, Java or C++ code it works as I'd desire; the braces are un-indented appropriately.
It's because Javascript formatting is exactly like that.
The if statement standards:
if (a) {
// your code
}
And if you use an Array of Objects, for example:
var arr = [
{ prop: 'value', prop2: 5 },
{ prop: 'value', prop2: 5 }
];
It's working exactly as it was intended to. Take a look at this Javascript's style guide.
This is just because the formatter is not applied after you write the code. Here is the way to do it.
On Eclipse, go to Window>Preferences
Under JavaScript>Code Style>Formatter, create a New Profile.
On creation of new profile or on edit, you would be shown with a window to change the format style. Go to Braces.
For Blocks, choose Next Line
Click OK. Confirm the profile and click OK.
Now, after you write the following:
if (true)
{
}
Use formatter to make changes for you, usually by Ctrl+Shift+F or from menu by Source>Format. You may apply formatting to selected piece of code too.
Update
Once you have the above setting, go to Window>Preferences>JavaScript>Editor>Save Actions, enable Perform the selected actions on save and Format source code which would make the this operation better.
Related
In VS Code, is there a way I can use keyboard combination like "ctrl+enter" to finish the current line and add { automatically at end of the line? instead of that i have to go to the end of the line my self and type { for it.
For example, when I typed if, VS code gives me if () blocks automatically, and I started typing condition in the braces.
if (condition)
// while the cursor is after 'n' but before ')'
When I'm at the end of the "condition", I have to use arrow key to move to the end and add {}. Do you program Javascript in this way or you have better tools/keyboard shortcut to use?
While I'm programming in Python, most IDE like VScode or Pycharm provides quick completion keyboard shortcut like "ctrl+shift+enter" to finish the line by adding ":" at end of the sentence, which applies to both defining functions, if, for, conditions. But unfortunately I haven't found such a way in Javascript world yet.
Search for snippets on the VS extension section ,I think you can find it there for any programming language .
In Sublime or VS Code you can define a special comment (DocBlockr or JSDocs as example) that Intellisense will recognize en give you smart tooltip functionality.
I have a function which takes an options parameter. This is an object and can have several properties that could contain functions, strings, ints etc. An example would be:
function foo(options){
options = options || {};
if(options.foo){
console.log(options.foo);
}
if(options.bar) {
console.log(options.bar());
}
}
foo({foo: 'foo', bar: function(){return 'bar';}});
I could add a DocBlockr comment, but that would only yield a tooltip that shows it needs an object.
Is it possible to make some sort of definition of that options object, so it would popup using intellisense?
For Sublime Text 3, you can use my JavaScript Enhancement plugin (you could find it also on Package Control) that will turn it into a JavaScript IDE like (It uses Flow under the hood). In your case, using Flow type annotations, you could use this code to get what you want:
//#flow
function foo(options /*: { foo: string, bar: function} */){
options = options || {};
if(options.foo){
console.log(options.foo);
}
if(options.bar) {
console.log(options.bar());
}
}
foo()
So, on the Sublime Text 3 editor, you will get something like this:
also on multiple lines (/* : need to be on the same line of the parameter):
Also, the plugin offers not only a smart javascript autocomplete but also a lot of features about creating, developing and managing javascript projects (real-time errors, code refactoring, etc.).
How can I set an indentation rule such that auto indent (Format document command) should align a multi line function's params vertically to the opening bracket/brace of the argument list?
e.g.
export function foo(a: number,
b: string,
c: boolean) {
}
Currently it does something like:
export function foo(a: number,
b: string,
c: boolean) {
}
I don't think this is currently possible at least without any extensions. The list of javascript formatting settings is available under the prefix javascript.format and I don't see any settings that control that behaviour.
This was raised as an issue on the VS Code GitHub repo at: Incorrect (potentially) indentation of function arguments spanning multiple lines #13748. The issue got moved to the TypeScript GitHub repo at: Incorrect (potentially) indentation of function arguments spanning multiple lines #11629. If you want to show support, go give a thumbs up reaction to this comment in that thread suggesting to make the indentation style configurable by the user (but if you do, please leave it at that and don't pester the maintainers with noisy "me too" comments unless you also plan to say something constructive and meaningful).
I'm also pretty sure this is a per-language-support-specific thing. For example, there's a separate issue on the vscode-cpptools extension's GitHub page: Indent function arguments #1993
How would i go about creating a CLI like interface in JavaScript?
What i mean is an example like this cmd.fm
I work with a lot of jquery and forgive me if i'm wrong but the only idea i have as to how to build this is by getting what the user typed in and using the switch function and checking if the command exists and then executing the command.
It all depends how complicated you need the commands to be!
I'll assume you you know how to render the page in lines, and capture keypresses (simplest way would be to style a text input, and listen for the return key, rather than trying to decode a key event).
I'd build a data structure like this (in JS):
var commands = {
"doThing": function(args) { /* do stuff with the args */ },
"doAnotherThing": function(args) { /* do other stuff with the args */ }
}
The user would type:
> doThing foo bar blah
In this simple example, you'd split the line by space characters, and treat the first element in the resulting array as your command name. You'd then check to see if commands[commandName] exists, and if so, run it: commands[commandName](args);
If you want to do something more advanced, you're going to need to write a tokeniser (technically the split on space is a simple tokeniser) - then things get more complicated, but the same basic method applies.
I hope that's enough to get you started.
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.