When using Atom.io for writing AngularJS I'd like to get code-completition for the AngularJS services such as $log. That is to see the list of methods $log provides when I type a . after it.
Which plugin do I need for that?
Do I need to make some configuration for that to work?
I already have the following Atom.io packages installed:
angularjs, atom-ternjs, and turbo-javascript which seems to provide the above functionality for JavaScript, but not the special AngularJS methods.
You should be able to use the AngularJS plugin for TernJS which has shipped with recent versions of tern:
Ensure you have the TernJS package installed:
apm install tern
Open your project and, open the Command Palette with Ctrl-Shift-P.
Type tern openconfig and press Enter.
Click Save & Restart Server at the bottom of the resulting tab.
Your .tern-project will be loaded as a new tab.
Add the following snippet to your .tern-project
"plugins": {
"angular": "./"
}
So that it looks like this:
{
"ecmaVersion": 6,
"libs": [],
"plugins": {
"angular": "./"
}
}
Save the .tern-project
Once again open the Command Palette with Ctrl-Shift-P.
Type tern restart and press Enter to restart the tern server.
Whilst not specific to AngularJS, perhaps autocomplete-plus can help you with this.
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.
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.
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 new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.
The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...
I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...
thank you in advance.
Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".
Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:
When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this:
import {Users} from '../../users'; IntelliSense should help you out here.
The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:
files: [
'src/test/unit/setup.ts',
'src/test/unit/*.ts'
],
Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};
The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript#2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.
After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the #types feature: How should I use #types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the #types/node folder. It would look something like this:
"compilerOptions": {
...
"typeRoots": [
"node_modules/#types"
],
"types": [ "node" ]
...
},
Hope this helps, with these changes the project should now build and launch correctly.
EDIT:
I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers
Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:
npm uninstall #types/whatwg-fetch
And upgrading from typescript 2.1.5 to latest:
npm install typescript --save
You might even want to install typescript globally by appending -g.
Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:
"globalDependencies": {
//"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
//"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
}
Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url.
Hope this helps someone who might've encountered the same problems even after "fixing" it.