Develop Reference

What is the preferred state of the art setup for vim and TypeScript?

The least sucky setup I have found after much trial and error is to use these plugins:
galooshi/vim-import-js (automatically add the import statements when using an exported variable for the first time in a file)
neoclide/coc.nvim (looks like it has the better plugins for TS support)
coc-tsserver (for typescript autocompletion)
and then my coc-settings.json:
{
"coc.preferences.formatOnSaveFiletypes": [
"css",
"typescript",
"javascript",
"markdown",
"scss",
"json"
],
"prettier.disableSuccessMessage": true,
"tslint.autoFixOnSave": true
}
This setup is lacking though.
The TS autocompletion doesn't work well and it can't suggest types more or less automatically. I remember a colleague showing me on their VSCode how the editor suggests types for untyped variables and he just has to press his autocomplete key to use it. That would be nice.
I am getting most of the TS errors in my status line, but they can take a while to show in some cases: I would get the >> marker that shows there is an error, but having the actual error display in the status line can take 10 seconds.
When on a variable, pressing K only brings a moderately helpful partial type definition. I would much rather get the full definition so I know what arguments a particular function takes for instance.
Prettier is really not that great at formatting HTML files
When autocompleting variable names for automatic import, I only get a list with the names... but not which library they've been found in. There is quite a lot of overlap between ramda and rxjs for instance, so when I import something with autocomplete, I never really know which one I'm getting until I go back to the imports list and see whether it used the right one or not
I feel like my current setup is nowhere near as good as it could be and I'm struggling to find anything online for a setup that would cover it all. I'd like to know how others have their vim set up for a pleasant and smooth TS experience: I don't want to use VSCode just to make TS get out of the way.

You don't need to use vim-import-js, coc-tsserver already support organize import: call CocAction('runCommand', 'editor.action.organizeImport')
nmap <silent> gd <Plug>(coc-definition), gd will go to definition
Try coc-prettier and coc-html for HTML files

Is there a way to get signature/documentation of a function in Node REPL?

"Tab"ing the REPL gives me a list of functions, but often working with multiple languages, I forget the signature of common functions like fs.open, etc. Is there anyway to show these in the REPL?
Thanks to auto-complete in editors, they seem to be fine. But REPL for writing some quick script, I have pull up the node documentation each time for simple things.
Is there a better way to deal with this?

This semi official project developed under the node umbrella on GitHub offers a few improvement over the default REPL while used interactively:
https://github.com/nodejs/repl
Syntax highlighting is enabled for the input, basic functions signatures are displayed as hints.
As stated in this issue, its future is still uncertain, but it's already quite usable in the current state: https://github.com/nodejs/repl/issues/46

Make source maps refer to original files on remote machine

Using Google Closure Compiler to minify a bunch of javascripts. Now I'd like to also add source maps to those to debug out in the wild.
Thing is, I want to keep the original (and preferrably also the map files) on a completely different place, like another server. I've been looking for a solution to this, and found out about the sourceRoot parameter. But it seems as it's not supported?
Also found this --source_map_location_mapping parameter, but no documentation whatsoever. Seems as it wants a pipe-delimited argument (filesystem-path|webserver-path). Tried a couple of different approaches to this, like local filename|remote url but without prevail. That just gives me No such file or directory and java.lang.ArrayIndexOutOfBoundsException.
Has anyone succeeded to place the minified/mapped source files on a remote machine?
Or does anyone know of any documentation for --source_map_location_mapping?

Luckily Google Closure Compiler's source code is available publicly
https://gist.github.com/lydonchandra/b97b38e3ff56ba8e0ba5
REM --source_map_location_mapping is case SENSITIVE !
REM need extra escaped double quote --source_map_location_mapping="\"C:/tools/closure/^|httpsa://bla/\"" as per http://stackoverflow.com/a/29542669
java -jar compiler.jar --compilation_level=SIMPLE_OPTIMIZATIONS --create_source_map=C:\tools\closure\latest\maplayer.js.map --output_wrapper "%output%//# sourceMappingURL=maplayer.js.map" --js=C:\tools\closure\mapslayer.js --js_output_file=maplayer.min.js --source_map_location_mapping="\"C:/tools/closure/^|httpsa://bla/\""

The flag should be formatted like so:
--source_map_location_mapping=foo/|http://bar
The flag should be repeated if you need multiple locations:
--source_map_location_mapping=foo/|http://bar --source_map_location_mapping=xxx/|http://yyy
But what I expect that you are running into is that the "|" might be interpreted by your command shell. For example:
echo --source_map_location_mapping=foo/|http://bar
-bash: http://bar: No such file or directory
(The choice to use "|" was unfortunate). Make sure it is escaped appropriately. like:
--source_map_location_mapping="foo/|http://bar"
I submitted a pull request to report an error for badly formatted flag values:
https://github.com/google/closure-compiler/pull/620
which will at least you know that your flag value is incorrect (so you won't see the out of bounds exception).

John is correct functionality-wise, but I think I can clear it up a bit (as this was super confusing for me to get working).
I suspect many people have the same issue as I:
source map urls are generated relative to your current directory
they don't necessarily match up to relative urls on your website/server
Even if they did match up directly, the strangely-defined pseudo-spec found here means that Chrome/Firefox are going to try to load your paths relative to your sourcemap. i.e. the browser loads /assets/sourcemaps/main.map, sees assets/js/main.js, and loads /assets/sourcemap/assets/js/main.js (yay). (Or it might be relative to the original js file actually, I just happened to have them in the same directory).
Let's use the above example. Say we have assets/js/main.js in our sourcemap, and want to make sure that loads mywebsite.com/assets/js/main.js. To do this, you'd pass the option:
--source_map_location_mapping="assets|/assets"
Like John mentioned, quotes are important, and repeat the arg multiple times for multiple options. The prefixed / will let Firefox/Chrome know you want it relative to your website root. (If you're doing this in something like grunt-closure-tools you'll need to escape more:
config:{
source_map_location_mapping:"\"assets|/assets\"",
}
This way, we can essentially map any given sourcemap path to any given website path. It's not really a perfect replacement for some sort of closure source root, but it does let you map each section of your sources individually to their own roots, so it's not that bad a compromise, and does give some additional flexibility (i.e. you could specify some cdn paths for some of your assets but not for other).
An additional thing you might find helpful, you can automatically add the sourceMappingURL via an output_wrapper. (Though, if you want the ability to debug in production, you should probably prefer some ability to make the server return X-Sourcemap: blah.js.map headers instead, inaccessible by the public)
--output_wrapper="(function(){%output%}).call(this); //# sourceMappingURL=/assets/js/my_main_file.js.map"

Searching good JavaScript formatter for eclipse

I am using eclipse as my IDE but I don't like the installed formatters. I also builded my own one but didn't get it to work like I want it to. For example things like that happen often:
Is there somebody out there with a good JavaScript formatter or a link with a list of some. I only found a few (e.g. the google formatter) but I don't like one of them.

Try changing the formatting preferences individually.
Window->Preferences->JavaScript->Code Style->Formatter
You'll have to save them as a new file. The only issue i have is that the object declaration won't use tabs instead of spaces for the property declarations.

tracking a javascript found in pagesource

ive tried everything i cud to figure this out, but i cannot track a piece of javascript in a webpage
so, just to give you some context even though my problem is not related to just this scenario. it depends on a much bigger spectrum.
Anyway, im developing on sugarCRM and im trying to edit the default onclick behavior of a slot in calendar module (you dont need to understand this to help me, so please keep reading). when i click on a slot, a modal dialog window opens that lets me log a meeting or a call.
So i tracked down the javascript behind this. ive used firebug and chrome, and they both give a list of all the JS files that are being used on a given webpage
for example i search for "SUGAR.collection" and firebug tells me its located in a file named "sugar_field_grp.js?v=FVh1Z-v5nA6bYov7-aFFqQ" i can see this piece of code resides in sugar_field_grp.js,
but the code im trying to change resides in "index.php?module=Calendar&action=index&parentTab=Activities", firebug actually tells me this is the file that has the javascript i want to change.
I can also right click view page source and i can see that piece of code inside the script tag. so considering this piece of code doesnt reside in a JS file, i cannot change it, its generated at runtime (i think) but there must be some source, there must be a file thats telling sugarCRM to generate this code
tl;dr how to track down a piece of javascript code that resides on pagesource and theres no JS file specified by firebug or chrome save for index.php (this file doesnt have that javascript either)
i know its been a long post
thanks for reading

Learn how to search for strings in files on disk on your machine.
On Linux, MacOS and most unixen the go-to tool for this is grep. This applies to any programming language you work with. For your case simply cd into the directory of your source code and do:
grep -r SUGAR.collection .
If you're using git as your source control tool then git grep is much faster.
On Windows there are various GUI tools you can use to search for text in files. Just google: grep for windows.
If you're using an IDE then just your IDE's find-in-files functionality.

To track down specific code using Chrome / Webkit go through the following two steps:
Client:
1. Search all static text sources
Open the Dev Panel using CTRL + SHIFT + I
Hit CTRL + SHIFT + F for a global search dialog to pop up
Right next to it you can set pretty printing of the JS code to on: button { }
Enter your search term or terms using regular expressions
Optional: Decide if you need a case insensitive search which has a greater searchspace and takes longer
Example:
2. Search the dynamic user-DOM contents
Go to the Tab 'Elements' hit CTRL + F.
Enter your search term (This will also search iframes, svg's etc... within the parent DOM)
3. Recommended:
Cross-reference the results of step 1. and step 2.
If a given string is present in both the DOM and the static sources, then you can assume that the content is not programmatically created on the client-side.
Server:
Many projects perform a media bundling step prior to content-delivery. They pack web-resources into the main file (e.g. index.php) to save HTTP roundtrips.
Use sourcemaps / and or search the entire codebase for a salient static string or a salient keyword near the static string to locate the original source files.
Searching files:
Locally, I generally use the rapid index, and heuristic search of JetBrain's IDE's (IDEA, PHPStorm,...) and Sublime. The grep-command tool can definitely not compete here in terms of performance. On Windows I additionally use Totalcommander and its archive/regex finding abilities.
When quickly looking up code on the server you may use something like:
grep -r -C10 --color=always 'keyword1|keyword2' htdocs/ | less -R
which will also provide you with line-context. two caveats: you may want to filter out binaries first and symlinks outside the scope will be ignored.