I'm developing on top of OpenLayers.js. My project folder is structured as follows:
project /
|-- OpenLayers.js
|-- map.html
|-- map.js
\-- etc
As you can argue, when I start a new map project, I espect suggestions from Vim on how to complete the code, reading JS classes from all the libraries in the project folder (in this case, just OpenLayers.js).
E.g.:
map = new OpenLayers. --> <C-x><C-o>
map = new OpenLayers.Bounds
.Control
.Map
Selecting one of the suggested classes I should get a kind of autocompletion, like in Aptana. I've installed AutoComplPop and I get a nice automatic menu to select suggestions, but all of them are taken from the current JS file.
Anyway, I've correctly set up Tagbar + node.js + jsctags and I've generated tags file for my project, and added set tags=./tags,./../tags,./*/tags to my .vimrc.
In this case, also, Tagbar maps the current file JS structure but doesn't offer any mapping of the classes coming from other files.
Another probably relevant line in my .vimrc:
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
I'm struggling to get class and subclass suggestions and now I'm getting a bit confused with all the plugins/piece of software available.
Any hint?
Thank you guys :)
Check out YouCompleteMe and tern_for_vim.
Here's an article about using them together.
Your expectations are a bit too high. Vim is not an IDE like Aptana and the mechanisms used to provide completion are crude.
Did you check that your tags file has OpenLayers.Bounds, OpenLayers.Control or OpenLayer.Map? I can't find OpenLayer.Map and, going through the OpenLayer.debug.js I can't find this function either.
TagBar only works with the current buffer. If you want to show tags for other windows/buffers you'll need another older plugin: TagList.
AutoComplPop doesn't support JS out of the box. How did you set it up? Here is how I did but it still uses <C-x><C-o> while completion from tags is done with <C-x><C-]>.
Related
I'm trying to see whether it's possible to use the code from DuckDuckHack Instant Answers outside of the context of the main DuckDuckGo website. After all, an Instant Answer is mostly a standalone component that consists of some HTML, CSS and Javascript and should be relatively self-contained and reusable.
Since the DuckDuckHack project is in maintenance mode, it seems to be a bit difficult to obtain information: the Slack and Forum mentioned on the Developer Guide have been disabled. I tried to find out whether other people tried to make Instant Answers work in other contexts, but I couldn't find anything. There are tutorials on writing Instant Answers, such as this using Perl and the DuckPAN tools. I tried to get an existing Instant Answer to work using those tools but I failed to get it to work properly (not sure whether they are still maintained).
Since those tools seem to be a bit heavyweight, I thought it could be possible to bypass them completely and try to just use the HTML, CSS and JS from the Instant Answer directly.
I've given the Calculator a first shot. I identified the relevant source code in the duckduckgo/zeroclickinfo-goodies repository's directory share/goodie/calculator. The HTML seems to be in the content.handlebars, and then there's calculator.css and calculator.js. I created a plain HTML file, put the HTML from content.handlebars in there and included references to the CSS file and the JS file. At first, the CSS wouldn't work because the CSS rules don't apply without adding some more wrapper divs that can be easily found when inspecting the DuckDuckGo site with the calculator Instant Answer visible. After adding those wrapper divs, the calculator UI appears more or less intact. However the buttons of the UI do not work at all yet.
Looking at the Javascript console I get this error:
Uncaught ReferenceError: DDH is not defined
at calculator.js:1
Apparently an object DDH is required by calculator.js, however I have no idea what that object should be and how I could create it.
Does anybody know how this DDH variable gets usually initialized or more generally how to make this work? Any reference to projects reusing the code from DuckDuckHack for their own sites would also be highly appreciated.
I think the details of how the DDH object is put together might not be exposed through the open-source portion of DDG.
I've also made some attempts to repurpose some of the built-in DDG IA functionality (e.g. get programmatic access to the many, useful instant answers unavailable through their API).
In the process, I cloned the goodie repo and poked around. The pattern seems to be that for most goodies the payload to be displayed is DDH.<goodie>.content. In my local copy of the goodie repo:
$ grep -rE 'DDH' ./lib/
./lib/DDG/Goodie/Conversions.pm: content => 'DDH.conversions.content'
./lib/DDG/Goodie/Conversions.pm: content => 'DDH.conversions.content'
./lib/DDG/Goodie/Game2048.pm: content => 'DDH.game2048.content'
./lib/DDG/Goodie/PublicDNS.pm: list_content => 'DDH.public_dns.content',
./lib/DDG/Goodie/JsBeautifier.pm: content => 'DDH.js_beautifier.content'
./lib/DDG/Goodie/SassToCss.pm: content => 'DDH.sass_to_css.content'
./lib/DDG/Goodie/Constants.pm: title_content => 'DDH.constants.title_content'
...
On the javascript side of things, you'd find the corresponding .js files in the share/goodie directory, as you did for the calculator goodie.
The <goodie>.js files seem to introduce DDH.<goodie> namespaces (typically right at the top of the file) and define DDH.<goodie>.build functions. This procedure is referenced in the goodie-display docs (see the section titled Setting Goodie Display Options on the Front end therein).
Nowhere in the docs, though, is it documented how the content property of DDH.<goodie> is put together. I cloned the docs repo and grepped for DDH, revealing nothing to that effect.
None of the .js files in the share/goodie folder of the goodie repo, though, seem to give a clue as to how DDH.<goodie>.content is assembled either. Indeed, some of those .js files do not even contain the string content. For a listing of all share*.js files that do contain the string content, I did (in the local copy of the goodie repo):
$ find ./share -name "*.js" |xargs grep -l 'content'
./share/goodie/countdown/countdown.js
./share/goodie/text_converter/text_converter.js
The other .js files do not contain that string at all..
Edit
On the other hand though, I see you did manage to get the calculator going with some modifications to the .js file (e.g. by inserting that missing DDH namespace).
I am trying to integrate Sonarqube analysis into the JavaScript sources of my project. It is a project using Spring components for the back-end, and as a first step, we did the integration of Java sources, without problem at that point.
We are using Sonarqube v5.6.3
The problem I am finding comes with the sonar.exclusions property. Apparently, that property can't exclude a folder that has already been added as sources (see question and answer explaining that exact issue).
I have the following lines in my pom.xml, which are not working properly; and that's understandable according to the aforelinked question:
<sonar.sources>src/main/java,src/main/docker,js-sources</sonar.sources>
<sonar.tests>src/test</sonar.tests>
<sonar.exclusions>**/target/*</sonar.exclusions>
The problem is: the front-end is made of several modules which are compiled one by one under their own /target sub-folder before being deployed all together into src/main/webapp. (They work as regular target folders: when a new compilation is launched, those folders get deleted/recreated.)
Those js-sources/moduleA/target, js-sources/moduleB/target, js-sources/moduleC/target folders are being automatically included as sources, and thus ignored by the exclusions directive. Those target folder still contain a /src subfolder, which makes it hard to use the limited Sonar patterns (full xpath-like selectors are not allowed) to include or exclude only certain paths.
As I don't think that the Sonarqube team was expecting everyone to add each little subfolder one by one (that's why they made patterns in the first term), I am looking for help: How do I exclude those per-module target folders living down the folder-tree inside my sources?
Another possibility would be that it is kind of a bug forcing us to store this config at a Jenkinsfile or even directly in the Jenkins config (at a job level), but I remain unsure and still think that something can be fixed in the way I am declaring the sources and exclusions.
Try
<sonar.exclusions>**/target/**/*</sonar.exclusions>
EDIT : while inclusions are useful in other cases, the accepted answer above is the correct one. I'm leaving mine, which follows, for the record and just as an example of using inclusions.
Try using inclusions rather than exclusions, I've setup a project as close to yours as I could guess from your description and I was able to ignore the target folders of the js-sources modules :
<properties>
<sonar.sources>src/main/java,js-sources</sonar.sources>
<sonar.inclusions>**/*.java, **/src/**/*.js</sonar.inclusions>
</properties>
You can read this as : 'scan all java files no matter where they are, scan only the javascript files that are found within the src of a subfolder of root'
In an existing ExtJS 5.0 project, cannot change the original code. We are allowed to add code to an existing overrides/ directory.
I have an existing function generateTree in class Products.view.ProductsTreeViewController that I want to override.
The current function is in file PTVC.js under Useless/app/view/.
This is the code I'm using to override:
Ext.define('overrides.Products.view.ProductsTreeViewController', {
override :'Products.view.ProductsTreeViewController',
generateTree: function (data) {
if (this.isValid(data))
this.callOverridden(data);
else
this.callOverridden(this.getDefaultData());
}
};
First question, where should the code reside under overrides/? I've seen many different configurations suggested, e.g.
Everything in one file:
Useless/
overrides/
app.js
Same path as original file:
Useless/
overrides/
app/
view/
PTVC.js
Overridden class name:
Useless/
overrides/
Products/
view/
ProductsTreeViewController/
class.js
I've tried all of the above and many more approaches and confirmed through various means that the code does not get included!
So second question, how to make sure it is included?
The documentation makes it seem like it's so easy, which makes it all the more frustrating.
In the version I'm using there is no classpath variable in sencha.cfg, in any case I'd be changing an existing file, so likely can't do that, or add requires in Ext.application for the same reason.
So third question, in lieu of modifying existing files, is there a build command line switch I can use to specify an additional build directory?
I'm pulling my hair out trying to figure this out. Any advice, short of quitting my job, would be appreciated.
It's best to duplicate the directory structure, then you don't have to worry about file name collisions, but you can put the files anywhere under overrides/.
Are you running ExtJS 5.0.0? It has a regression bug whereby they forgot to include "overrides": "${app.dir}/overrides" in app.json. You can also modify a config file under .sencha but it's better to have it in app.json. You won't need requires. This is fixed in version 5.0.1.
Probably not, but it's a really small change to add that line in app.json and the only way to make overrides work in 5.0.0 (which I suspect you're using).
Is it possible to get a proper JavaScript source file if I have the minified file and its corresponding source map?
I know how to prettify JS code (line-breaks and indents), but I would like to get original function / variable names in the file, to be able to better understand the source code.
I would like to get the un-minified JS file to work with, instead of using it to debug in a browser.
PS It is probably somewhere right under my nose, but I didn't manage to find it so far. Sorry if this was already asked!
To work sourcemaps requires both files, minified and original, often original is included in sourcemap file(it has optional sourcesContent for sources that can not be hosted).
Sourcemap is just JSON file, and you can found all needed information inside:
sources - list of source file names,
sourcesContent - optional list
of original sources, if source is not presented it would be null
here.
Utility script, I have written before for this purpose: https://gist.github.com/zxbodya/ca6fb758259f6a077de7
I suggest using the Source Map Visualization tool online to view the original code with both js file and js soucemap file.
https://sokra.github.io/source-map-visualization/
I think you won't be able to completely revert such code to its original state as a lot of information (for example comments or certain variable names) is simply lost in the process. When I understand it correctly for sourcemaps to do this you still need the original file.
If you only aim to prettify the code so its readable again you do not need source maps. Many advanced editors have such functions. For example if you are using Sublime text there is this plugin: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify which does a great job.
Also see this similar question: How can I debug a minified JS in firebug?
I've just installed nXhtml by downloading their zip file, extracting the archive into my home directory and adding (load "/home/spinlock/nxhtml/autostart.el") to my .emacs file. My problem is that when I try to edit a .js.erb file, I'm getting the error:
(No javascript-mode/eruby-javascript)
and I'm not getting the syntax highlighting that I'd expect (for instance, comments are the same color as javascript code). However, when I move the cursor inside a Ruby section of this file, that notice changes to:
(Ruby/eruby-javascript)
which I take as a good sign plus it does look like I've got the proper Ruby syntax highlighting in this part of the buffer (e.g. comments are show in red font).
I assume that I need to add a configuration file that tells emacs how to manage javascript-mode but I have no clue how to do this. Any help would be greatly appreciated.
Thanks!