The three.js plugin is not loading in tern.js

Issue

I am currently in the process of developing a 3D web application using three.js.

For my development environment, I have opted to use neovim and YouCompleteMe for code completion.

To enable JavaScript completion, I have installed tern and created a .tern-project file with the following configuration:

{
    "libs": [
        "browser",
        "ecmascript",
    ],
    "loadEagerly": [
    ],
    "plugins": {
        "threejs": {}
    }
}

I have also included threejs.js and threejs.json in my project directory, as recommended by tern-threejs.

However, despite these configurations, YouCompleteMe is not providing semantic completion as demonstrated in tern-threejs's codemirror.

Comparison:

codemirror:

https://i.sstatic.net/KnS2I.png

neovim:

https://i.sstatic.net/8pSzR.png

Note: I am not seeing any completion suggestions at all.

What could be causing this issue?

javascriptthree.jsneovimyoucompletemetern

Answer №1

threejs.js serves as a tern extension file, while threejs.json acts as a tern resource file. To properly set up, make sure to copy extension files to the tern/plugin directory and resource files to the tern/defs directory. Both these directories are located within the tern directory.

If you have 'YouCompleteMe' installed, the directory path will be: 

~/.vim/YouCompleteMe/third_party/ycmd/third_party/tern-runtime/node‌​_modules/tern
. You only need to copy one of the mentioned files and update your .tern-project file accordingly. Here's how:

  1. Begin by ensuring that you have activated the Tern completer on YouCompleteMe. For instance, on my Mac, I had to execute the following:

    cd ~/.vim/bundle/YouCompleteMe
./install.py --tern-completer

    Refer to YouCompleteMe's installation guide for instructions on other platforms.

  2. Copy the file threejs.js and then navigate to 

    ~/.vim/YouCompleteMe/third_party/ycmd/third_party/tern-runtime/node‌​_modules/tern/plugin/

    and paste the file there.

  3. Modify your project's .tern-project file as shown below:

    {
    "libs": [
        "browser",
        "ecmascript",
    ],
    "plugins": {
        "es_modules": {},
        "threejs": {}
    }
}

    Remember that I have also added the es_modules plugin (a plugin included with tern itself) since you are utilizing the ES6 module pattern system.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

transmit JSON data with an AJAX request and receive a response

I'm looking to make a JSON request to an API and receive a response. I tested it using Postman and successfully received the following response: JSON request to API: { "apikey":"&^$%#@!jwebdpqodp9fgkwjebfkdpqihdqlwkndqp" } The response I receiv ...

javascriptjqueryjsonpostman

Trigger ng-change event for each dropdown selection made in AngularJS

Currently, I have a dropdown menu that allows users to select a report for generation. When a user picks a report from the dropdown, it generates and downloads the report for mobile viewing. By utilizing ng-change, the system only detects when a user wants ...

javascriptangularjs

Issue with dynamically filling a form field using ValidityState

I have been utilizing the ValidityState interface for client-side form validation, but I've encountered an issue. Whenever my form is populated programmatically, such as after making a call to a third-party API, the tooLong state always returns false, ...

javascript

The debate between classes and data attributes in terms of auto field initialization

A Brief Background In the realm of javascript/jQuery, I've crafted a method that traverses through various fields and configures them based on their type - be it dropdowns, autocomplete, or text fields... The motivation behind this is my personalize ...

javascriptjqueryhtmlcustom-data-attributesinemacula

Encountering issues with loading a module in Aurelia

I've encountered a peculiar issue while attempting to load a module using Aurelia. The moment library was successfully loaded for date formatting, but when trying to load the numeral library in the same manner with npm install <module> --save, i ...

javascriptnpmaurelia

Error 500: An invalid data type was encountered in an express.js node.js environment

Currently, I am in the process of developing an Authentication page using a combination of node.js, express.js, and mysql2. The user ID and password entered on the webpage are then passed through app.post('/login',...). However, upon submitting t ...

javascriptmysqlnode.jsexpress

When attempting to call a function from a separate JavaScript file in Vue, the returned value is showing

My goal is to trigger my notification function from another JS file, but I keep getting an undefined error. The code snippet for the notification function in notification.js is as follows: function notification(message, level = 'success') { ...

javascriptvue.js

What is the best way to integrate a button within a datatable cell to display additional details in a popup window?

I am seeking help with datatable.js. I would like to insert a button inside the cells of the datatable columns to expand and display the detailed content of each cell. When I click on the red button, a popup modal should appear showing the full list of con ...

javascriptjquerycssdatatabledatatables-1.10

Discover which sub package is needed by running Npm check

While executing the command npm install, I encountered this error message: The package "getSnapshot-pkg-repo@^1.0.0" required by "conventional-changelog-core@^2.0.11" could not be found on the "npm" registry. I am uncertain about the source of this i ...

javascriptnpm

Hide the menu when a menu link is selected

After conducting extensive research, I have come across several scripts that can achieve what I am trying to do. However, I am unsure of how to implement them with my particular WordPress theme. Therefore, I am seeking assistance here: The theme I am usin ...

javascriptjqueryhtmlwordpress

Choose a file in React by specifying its path instead of manually picking a file

Is there a way for me to automatically select a file from a specified path into my state variable without having to open a select file dialog? I'm looking for a solution where I can bypass the manual selection process. Any suggestions on how this can ...

javascriptreactjstypescript

The challenge of executing JavaScript in the correct order

I am facing an issue where 5 always prints before 4 in my code snippet below. I expected the callback to postUsers within a return statement from matchAgainstAD to wait for the completion of the for loop and ad lookup before returning. What is the simple ...

javascript

Make the current tab the active tab with the help of AngularJS

I have a set of five tabs that are functioning correctly. However, when I refresh the page, the active tab reverts back to its default state instead of staying in its current active state. Can anyone help me identify where I may be making a mistake? Here ...

javascriptangularjs

Is there a way to avoid adding this final "faulty state" to the array?

While working on dynamically slicing an array, I noticed that my while loop was causing an extra slice to be added when it broke the conditional. Even though I can achieve the desired functionality by removing the last element with arr.pop(), I am curious ...

javascriptarrayswhile-loopslice

Tips for properly updating the shadow when modifying the vertices of custom geometry in A-Frame/three.js

I've developed a custom component in a-frame that generates a unique geometry. I'm using the tick function to animate the update of the geometry's vertices successfully. However, the shadow on the geometry doesn't seem to update accordi ...

javascriptthree.jsaframe

Retrieve information from a database by utilizing AJAX and store it in a JavaScript array

I'm facing an issue where I can retrieve data from the PHP file, but not from the database to my JavaScript code. I am using Ajax to fetch the data from the database, then passing it to the PHP file, and finally trying to filter this data using JavaSc ...

javascriptphpajax

Identifying when a fetch operation has completed in vue.js can be accomplished by utilizing promises

Currently, I am facing a dilemma in my Vue.js application. I am making an API call within the created() hook, but there are certain tasks that I need to trigger only after the API call has been completed. The issue is that this API call usually takes aroun ...

javascriptvue.js

Is the provided code snippet considered a function-statement, function-expression, and function-expression-statement?

Currently, I am examining some code snippets from the EcmaScript.NET project. Specifically, I am delving into the definitions within FunctionNode.cs file. The comment above the definitions provides a detailed explanation of the three types of functions tha ...

javascript

What is the best way to upload this file in VueJS?

I've come across a file written in outdated syntax that I need to use in a VueJS Component. You can find the file here. For instance, consider these snippets from the file: var CCC = CCC || {}; CCC.STATIC = CCC.STATIC || {}; CCC.STATIC.TYPE = { & ...

javascriptnode.jsvue.jsmodule

Switch up the picture when you press on it

I have a task involving a table where I want to switch out an image in the <td> when it is clicked, using a URL that I specify beforehand. The URL of the image will be provided when clicking on a link within the page. For example: index.html?type=d ...

javascripthtml