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.
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 .
I would like to know how to create a general highlighting rule in Vim to mark periods in between method invocations/definitions.
For example, I would like to see the period in this method invocation highlighted -> obj.method(). I would also like the rule to work with methods nested inside code blocks like this obj.method([parameters...]) { anotherObj.anotherMethod() }
problem reproduced
Thanks.
You seem to be using something like pangloss/vim-javascript and not the default JavaScript syntax. If so, that syntax rather strictly defines what's allowed where. This should let your definition through the door:
:syn cluster jsExpression add=MethodDot
Problem Node REPL has some "special commands" like .break and .save. I never use these, but I do very frequently try and paste into the REPL code that's formatted like so:
words.append('ul')
.classed('my-class', true)
.selectAll('li.new-class')
.data((tuple, tupleIdx) => obj[tupleIdx])
.enter()
.append('li')
.classed('new-class', true)
.text(d => '' + foo(d));
(This is d3.js code but similar things happen when using Promises, a chain of .then(...)s starting on each line.)
Of course node complains about "invalid REPL keyword" when it sees .classed or .then on its own line and proceeds to print a sequence of error messages several screens long.
Tenuous pseudo-workaround I've worked around this with a regexp in Vim that moves any whitespace between closing parens and dots to after the dot (:%s/)\n\(\s*\)\./).\r\1/ for completeness) but this is tedious and often I want to copy-paste from a browser and not switch to Vim to reformat some code.
Question Is there any way to disable node REPL "features" which, while well-intentioned, conflict with standard JavaScript practices, such as lines starting with dots?
Or is this too complicated for a terminal application, and if so, is there a way I can communicate with the node REPL via a browser's JS console (not node-monkey which only handles console.log)
PS. This question is mainly about lines starting with . but another such conflict is _ (worked around thankfully by n_).
You can make your own custom REPL. That option should give you maximal control over how your repl behaves.
Since the main problem here is pasting multi-line code into the default repl, as a workaround, try using the .editor special command.
Enter editor mode (Ctrl+D to finish, Ctrl+C to cancel).
It's also mentioned in the answer to this question about writing multiple lines in the node repl
If you're also interested in saving keystrokes, when entering the editor, autocomplete seems to kick in after typing ".ed" so you can shave off three keystrokes in that sense.
You can simply delete the command from the instance:
const replServer = repl.start(/* ... */)
delete replServer.commands.load;
You can even define the whole commands object, take a look at the reference implementation:
https://github.com/nodejs/node/blob/main/lib/repl.js
Here's something tentative: using node-copy-paste, I wrote a tiny module that allows me to paste() the contents of clipboard and evals it after fixing lines starting with ..
This goes in paste.js:
var cp = require('copy-paste'); // npm install node-copy-paste
module.exports = function() {
return eval(cp.paste().replace(/\n\s*\./g, "."));
};
Then in node REPL, paste = require('./paste'); paste() will make it go. Very brittle but it might solve the problem often enough to be valuable.
As I'm sure most of the JavaScripters out there are aware, there's a new, Christmas-themed js1k. I'm planning on entering this time, but I have no experience producing such minified code. Does anyone know any good resources for this kind of thing?
Google Closure Compiler is a good javascript minifier.
There is a good online tool for quick use, or you can download the tool and run it as part of a web site build process.
Edit: Added a non-exhaustive list of tricks that you can use to minify JavaScript extremely, before using a minifier:
Shorten long variable names
Use shortened references to built in variables like d=document;w=window.
Set Interval
The setInterval function can take either a function or a string. Pass in a string to reduce the number of characters used: setInterval('a--;b++',10). Note that passing in a string forces an eval invokation so it will be slower than passing in a function.
Reduce Mathematical Calculations
Example a=b+b+b can be reduced to a=3*b.
Use Scientific Notation
10000 can be expressed in scientific notation as 1E4 saving 2 bytes.
Drop leading Zeroes
0.2 = .2 saves a byte
Ternery Operator
if (a > b) {
result = x;
}
else {
result = y;
}
can be expressed as result=a>b?x:y
Drop Braces
Braces are only required for blocks of more than one statement.
Operator Precedence
Rely on operator precedence rather than adding unneeded brackets which aid code readability.
Shorten Variable Assignment
Rather than function x(){a=1,b=2;...}() pass values into the function, function x(a,b){...}(1,2)
Think outside the box
Don't automatically reach for standard ways of doing things. Rather than using d.getElementById('p') to get a reference to a DOM element, could you use b.children[4] where d=document;b=body.
Original source for above list of tricks:
http://thingsinjars.com/post/293/the-quest-for-extreme-javascript-minification/
Spolto is right.
Any code minifier won't do the trick alone. You need to first optimize your code and then make some dirty manual tweaks.
In addition to Spolto's list of tricks I want to encourage the use of logical operators instead of the classical if else syntax. ex:
The following code
if(condition){
exp1;
}else{
exp2;
}
is somewhat equivalent to
condition&&exp1||exp2;
Another thing to consider might be multiple variable declaration :
var a = 1;var b = 2;var c = 1;
can be rewritten as :
var a=c=1,b=2;
Spolto is also right about the braces. You should drop them. But in addition, you should know that they can be dropped even for blocks of more expressions by writing the expressions delimited by a comma(with a leading ; of course) :
if(condition){
exp1;
exp2;
exp3;
}else{
exp4;
exp5;
}
Can be rewritten as :
if(condition)exp1,exp2,exp3;
else exp4,exp5;
Although it's not much (it saves you only 1 character/block for those who are counting), it might come in handy. (By the way, the latest Google Closure Compiler does this trick too).
Another trick worth mentioning is the controversial with functionality.
If you care more about the size, then you should use this because it might reduce code size.
For example, let's consider this object method:
object.method=function(){
this.a=this.b;
this.c++;
this.d(this.e);
}
This can be rewritten as :
object.method=function(){
with(this){
a=b;
c++;
d(e);
}
}
which is in most cases signifficantly smaller.
Something that most code packers & minifiers do not do is replacing large repeating tokens in the code with smaller ones. This is a nasty hack that also requires the use of eval, but since we're in it for the space, I don't think that should be a problem. Let's say you have this code :
a=function(){/*code here*/};
b=function(){/*code here*/};
c=function(){/*code here*/};
/*...*/
z=function(){/*code here*/};
This code has many "function" keywords repeating. What if you could replace them with a single(unused) character and then evaluate the code?
Here's how I would do it :
eval('a=F(){/*codehere*/};b=F(){/*codehere*/};c=F(){/*codehere*/};/*...*/z=F(){/*codehere*/};'.replace(/function/g,'F'));
Of course the replaced token(s) can be anything since our code is reduced to an evaluated string (ex: we could've replaced =function(){ with F, thus saving even more characters).
Note that this technique must be used with caution, because you can easily screw up your code with multiple text replacements; moreover, you should use it only in cases where it helps (ex: if you only have 4 function tokens, replacing them with a smaller token and then evaluating the code might actually increase the code length :
var a = "eval(''.replace(/function/g,'F'))".length,
b = ('function'.length-'F'.length)*4;
alert("you should" + (a<b?"":" NOT") + " use this technique!");
In the following link you'll find surprisingly good tricks to minify js code for this competition:
http://www.claudiocc.com/javascript-golfing/
One example: (extracted from section Short-circuit operators):
if (p) p=q; // before
p=p&&q; // after
if (!p) p=q; // before
p=p||q; // after
Or the more essoteric Canvas context hash trick:
// before
a.beginPath
a.fillRect
a.lineTo
a.stroke
a.transform
a.arc
// after
for(Z in a)a[Z[0]+(Z[6]||Z[2])]=a[Z];
a.ba
a.fc
a.ln
a.sr
a.to
a.ac
And here is another resource link with amazingly good tricks: https://github.com/jed/140bytes/wiki/Byte-saving-techniques
First off all, just throwing your code into a minifier won't help you that much. You need to have the extreme small file size in mind when you write the code. So in part, you need to learn all the tricks yourself.
Also, when it comes to minifiers, UglifyJS is the new shooting star here, its output is smaller than GCC's and it's way faster too. And since it's written in pure JavaScript it should be trivial for you to find out what all the tricks are that it applies.
But in the end it all comes down to whether you can find an intelligent, small solution for something that's awsome.
Also:
Dean Edwards Packer
http://dean.edwards.name/packer/
Uglify JS
http://marijnhaverbeke.nl/uglifyjs
A friend wrote jscrush packer for js1k.
Keep in mind to keep as much code self-similar as possible.
My workflow for extreme packing is: closure (pretty print) -> hand optimizations, function similarity, other code similarity -> closure (whitespace only) -> jscrush.
This packs away about 25% of the data.
There's also packify, but I haven't tested that myself.
This is the only online version of #cowboy's packer script:
http://iwantaneff.in/packer/
Very handy for packing / minifying JS
I'm using js2-mode for working with javascript in emacs and for the most part it's very useful. However, the indenting methods are terribly frustrating when working with jQuery, closures, and JSON... for instance, code that I wish to be indented like this:
var foo = jQuery('#mycontainer ul li').each(function(el){
var bar = el.html();
});
Turns out as:
var foo = jQuery('#mycontainer ul li').each(function(el){
var bar = el.html();
});
Is there a way I can just switch off all the indenting "helpers" and just have emacs insert N spaces when I hit the tab key? I know manual-indentation is a step backwards, but having readable code is, IMHO, more useful than a tool that doesn't work as expected.
Not a direct answer to your question, but here is a fork of js2-mode that has improved indenting.
One of the improvements is that your example code is indented the way you ask here.
I guess I will make this a full answer instead of a comment; espresso-mode is included with Emacs, and is designed to be a Javascript mode for Emacs (instead of a Javascript mode that happens to run inside of Emacs). It works like regular programming modes, and also happens to indent things the way you like.
Check out this solution, maps indentation function in js2-mode to partially use indentation from esresso-mode (now known as js-mode included in emacs 23.2 and newer):
http://mihai.bazon.net/projects/editing-javascript-with-emacs-js2-mode
Works exactly as I expect indentation in emacs to work and you still get the parsing awesomeness from js2-mode.
Have you tried new versions of js2-mode? It looks like there's a fix out: http://code.google.com/p/js2-mode/issues/detail?id=94
js2-mode supports "bounce" indenting; you can press tab multiple times to choose different likely indenting levels, so you might be able to get the effect you want that way:
(setq js2-bounce-indent-p t)
You can simply bind TAB to insert itself:
(add-hook 'js2-mode-hook 'my-js2-mode-hook)
(defun my-js2-mode-hook ()
(define-key js2-mode-map [tab] 'self-insert-command))
(But the better solution would, of course, be to find out why the mode thinks it needs so much indentation for anonymous functions, and fix it.)
One other alternative is js3-mode. It indents like this by default, but there seems to be some options that might enable you to tweak it for your liking.
var foo = jQuery('#mycontainer ul li').each(function(el){
var bar = el.html();
});