Problem
I'm currently trying to build a 3D web app based on three.js.
I'm using neovim as my development environment and YouCompleteMe as a completion system.
I installed tern to complete JS, and I added .tern-project file like this.
{
"libs": [
"browser",
"ecmascript",
],
"loadEagerly": [
],
"plugins": {
"threejs": {}
}
}
I also copied threejs.js and threejs.json to my project's directory generated by tern-threejs.
However, YouCompleteMe doesn't show semantic completion compared to tern-threejs's demo codemirror
Comparison:
codemirror:
neovim:
Note: I can't see any completion at all.
What seems to be the problem?
threejs.js is a tern plugin file and threejs.json is a tern library file. plugin files should be copied in tern/plugin directory and library files needs to be placed within tern/defs directory. These two directory exists within tern directory.
With 'YouCompleteMe' installed this dir path is: ~/.vim/YouCompleteMe/third_party/ycmd/third_party/tern-runtime/node_modules/tern. You only need to copy one of aforementioned files. Plugin file or lib file; and update your .tern-project file accordingly. so:
First ensure that you have enabled the Tern completer on YouCompleteMe. For example on my Mac, I had to run the following:
cd ~/.vim/bundle/YouCompleteMe
./install.py --tern-completer
See YouCompleteMe installation guide for details on how to do it on other environments.
Copy threejs.js then navigate to
~/.vim/YouCompleteMe/third_party/ycmd/third_party/tern-runtime/node_modules/tern/plugin/
and paste.
Update your project's .tern-project file as follows:
{
"libs": [
"browser",
"ecmascript",
],
"plugins": {
"es_modules": {},
"threejs": {}
}
}
Note that i've also included es_modules plugin (which is a plugin shipped with tern itself) as you are using ES6 module pattern system.
Related
I had installed tern_for_vim and YouCompleteMe for js completion this way.
1 install node
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
source ~/.nvm/nvm.sh
nvm install node
2 install tern_for_vim
$ cd ~/.vim/bundle
git clone https://github.com/marijnh/tern_for_vim
3 install YouCompleteMe
cd ~/.vim/bundle/YouCompleteMe
$ ./install.sh --clang-completer --tern-completer
4 edit .tern-project
vim .tern-project
{
"libs": [
"browser",
"underscore",
"jquery"
],
"plugins": {
"node": {}
}
}
Now to vim test.js.
The js completion pop up after inputing document. in test.js file.
Then to vim test.html
No js completion pop up after inputing document. in test.html file.
How to fix it?
Unfortunately this is not officially supported by tern. You can see the response in a closed issue
https://github.com/ternjs/tern_for_vim/issues/170
Because the parsing logic for separating HTML and scripts hasn't been implemented. This could be done as a plugin, if you want to take a shot at it, but it's out of scope for this repository.
But then there is another thread on SO which may help you
Using tern_for_vim plugin in HTML files
So best is to include your code in the html through a JS file and then edit the JS file. Else look at some other plugin/IDE environment. I would explore the below option as well
https://github.com/Shougo/deoplete.nvim#install
I'm unfamiliar with tern_for_vim and YouCompleteMe for js completion, however you could always use vim's built in omni-func completion.
If you add:
filetype on
filetype plugin on
set omnifunc=syntaxcomplete#Complete
to your vimrc file, you can then manually set the filetype of your html file to javascript with :set filetype=javascript whilst in vim.
Following that, when in insert mode, you can then use <C-x> followed by <C-o> to access javascript language specific omni completion.
The resulting completion menu is then navigable by the standard <C-p> for up and <C-n> for down hotkeys.
This, along with other bits of built in completion functionality are discussed in a nice thoughtbot talk.
I've installed tern_for_sublime for sublime text 3 following steps in github readme page of the project and autocomplete for core javascript functions like string functions are working.But browser DOM specific autocompletion is not available.I was intimated that for vim in the .tern-project file the following config must be done for DOM and jquery auto-completion:
{
"libs": [
"browser",
"jquery"
]
}
Even though I added the json the autocomplete isn't showing DOM Auto completion.So what should I add?
I solved this by adding .tern-config file at the root of my user directory as I needed the configuration globally which in my case is C:/Users/my-name containing the JSON defining the triggers as follows:
{
"libs": [
"browser",
"jquery",
"ecmascript" //for both es5 and es6 :)
]
}
If you don't need the above settings globally but you only need it for your project itself you can add the above JSON in a .tern-project file at the root of your project..!!
I love vim and want to keep using it to do web development although I am struggling setting up my .tern_project file with the correct libraries I need to do autocompletion. I am relatively new to JavaScript but what I have so far is making it a lot easier to learn.
There aren't many examples that I could find and I have tried to read the documentation but I do not know enough for it to be helpful. So far my .tern_project file looks like this:
{
"libs": [
"browser",
"ecma6"
],
"plugins": {
"requirejs": {
"baseURL": "./",
"paths": {}
}
}
}
I don't really know what the plugins do but I left them in for now, in libs the ecma6 really helped me with all the array methods (ie. forEach etc.). Now my question is how do I add stuff like console.table() to autocomplete?
Which library do I need to add to the .tern_project file?
Also, I am open to suggestions for better web development environments.
At this point all you've got is tern's default completion!!! Your .tern_project does not have any impact on completions that tern suggests because tern configuration file is .tern-project; Its Dash not underscore. so first rename it.
.tern-project is a json configuration file which tells tern what completions it should suggest through two property: libs and plugins.
plugins aren't much different from libs they tells tern to also suggest these completions you specify in addition to libs.
For example in your .tern-project file you've choose to use requirejs plugin. so if you use requirejs library which is a module loader and helps with writing client side modular code, then it completes variables, functions and methods from other modules.
console is a node's global. and to complete node stuff you should add node plugin. so your .tern-project file should be something like:
{
"libs": [
"browser",
"ecmascript"
],
"plugins": {
"node": {}
}
}
Note that i've used ecmascript in place of ecma6. in previous versions tern had ecma5 and ecma6 libs but in latest versions these two got combined in one lib named: ecmascript.
List of available tern libs:
browser
chai
ecmascript
jquery
react
underscore
You could always get an updated list of libs from tern js repository defs directory
List of available tern plugins :
angular
commonjs
complete_strings
doc_comment
es_modules
node
requirejs
webpack
You could always get an updated list of plugins from tern js repository plugin directory
As your javascript skills grow go add and play with libs and plugins and see what completions you get. Also note that you could have multiple .tern-project file. Tern will always search upward to root directory and uses the closest one. so you could configure completions on a project basis.
I am building a web application and I want to use TinyMCE. I am using gulp and browserify. I have downloaded TinyMCE through npm and than I have required it in my app.js file and run the gulp command but I got this error Failed to load: root/js/themes/modern/theme.js. I think this is because TinyMCE needs additional files from its folder. My question is how to configurate TinyMCE to search those files in the node_modules/tinymce folder.
The answer here depends completely on how you are packaging up files in your Gulp build. I'm still working through the same problem right now, but here's a tip that might help.
In my case, I'm using the main-bower-files plugin to read my Bower config and then return a stream of all the main JS files from all of my dependencies I've installed with Bower. It looks like this:
var mainBowerFiles = require('main-bower-files');
gulp.task('vendor-src', function () {
return gulp.src(mainBowerFiles('**/*.js')
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest('dist/'))
});
Unfortunately, this does not pick up any of the TinyMCE files, which are installed in my bower_components directory, because the 'tinymce' installed through Bower does not come with a package.json file. I think this is because you have the choice between using the regular and jQuery versions of TinyMCE, which are both in the package.
I had to change my Gulp task from above to get it to pick up the TinyMCE source code that I want (the jQuery version). That version looks like this:
var mainBowerFiles = require('main-bower-files');
gulp.task('vendor-src', function () {
return gulp.src(
mainBowerFiles('**/*.js', {
"overrides": {
"tinymce": {
"main": ["tinymce.jquery.js", "plugins/**/*.js", "themes/**/*.js"]
}
})
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest('dist/'))
});
That will include all of the JS files associated with TinyMCE and add them to the "main bower files" list.
This is only a partial solution though because you also have to pick up the TinyMCE CSS and font files. And then if you're build is completely different or you're not using the main-bower-files plugin, this might not help either.
I had an open issue with the main-bower-files author who discouraged the use of it together with TinyMCE, probably due to the large number of extra files that must be included (?). See the following issue on Github.
I ended up just copying the tinymce folder to my dist/ through a simple gulp task. I use Bower and different paths probably, but you get the idea
gulp.task('bower-tinymce', function() {
//Copy resources from tinymce-dist that didn't make it in the bower-files
return gulp.src('src/main/resources/static/bower_components/tinymce-dist/**/*').pipe(gulp.dest('src/main/resources/static/dist/tinymce'));
});
My app.json file of a Sencha touch 2 application contain.
"js": [
{
"path": "sdk/sencha-touch.js"
},
{"path": "js/mootools-1.2.5-core.js"}, // I want these files to be bundled too
{"path": "js/mootools-1.2.5.1-more.js"}, // <----------+
{"path": "js/soundmanager2-nodebug-jsmin.js"}, // <----+
... // <----+ and there are more.
...
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
},
Now I see when I invoke sencha app build production It compiles all the sencha classes into a giant app.js file. But all my other classes are just compressed to build directory. They are not concatenated. how can I include them in app.js?
F.A.Q.
Your json file is properly written, right?
A. Yes, app.json is written without any syntax error. The project builds successfully on invoking sencha app build production
After looking at the source code and talking with the devs behind Cmd, it appears that it is currently not possible.
However, because the build file is written in JavaScript, in theory, it wouldn't take much to modify it and add this functionality into Cmd.
You can find the Sencha Touch build file in:
CMD-ROOT/plugins/touch/current/app-build.js
Where CMD-ROOT is the location of the sencha command - which you can find out by using which sencha.
On my system (OSX), the path is:
/Users/Robert/bin/Sencha/Cmd/3.0.0.250/plugins/touch/current/app-build.js
Hopefully this is of some help to you.
Update
It appears that, after talking to another Cmd developer, this actually is possible. There are 2 steps you need to take to make it happen:
1) Add the skipFrameworkFile property into each JS resource you want to bundle. This tells the compiler to not copy the resource when your build your app.
{
"path": "resources/js/jquery.js",
"skipFrameworkFile": true
},
"path": "resources/js/jquery2.js",
"skipFrameworkFile": true
}
2) Require each of the files in your app.js file using the #require tag. This tells the compiler to include each of your files into your app.js file.
//#require resources/js/jquery.js
//#require resources/js/jquery2.js
For SenchaCmd 3.2, rdougan's solution didn't work for me. However, instead of using:
'skipFrameworkFile: true
I used
'x-bootstrap': true
(by looking at SenchaCmd source code) and it worked!
The other steps are the same as rdougan's
Hope this helps. Cheers