Go to Definition doesn't Work for JavaScript functions

HadyShaltout

Good Day!

It seems that 'Go to Definition' doesn't work for JavaScript functions and namespaces even though it was working perfectly in the 2015 version, I thought the new version would be better :) Could I have missed some settings?

MiloslavBeno

Hello,

Thank you for your post.

I assume you are mentioning that this doesn't work when the function is defined in PHP file and not js file?

I've checked that and it seems this works when the defined function is in js file, but not in PHP file. Is that correct?

Unfortunatelly integration with other languages had to be completly rewritten since vs 2015, some features might not still be perfect.

Thank you

HadyShaltout

@MiloslavBeno
I opened new ticket for JS files only, The Go to Definition in JS files doesn't work with any function inside the same file, I'm not sure if it belongs to PHP Tools or Visual Studio 2022 itself, I'm sure I'm stuck here and nothing help over the web

MiloslavBeno

May I ask for specific VS version and if this doesn't work also outside of PHP projects?

I've tried it with 17.9.6 and 17.10.6 with both asp.net and PHP project and F12 worked if defined class was in js file. It didn't work if defined class was in PHP file (intellisense worked though).

HadyShaltout

I know, but it was working properly in old Visual Studio 2015. I tried it on a fresh Windows 10 with no apps but Visual Studio 2022 and not working, and another try on a fresh Windows 8.1 with Visual Studio 2015 and it worked perfectly.

I reported it here if you wish to follow,

I will send you couple videos, if it help

MiloslavBeno

Thank you for the link. I'll monitor the thread there, but please keep us posted.

Any video would also help.

Thanks!

HadyShaltout

Here’s a Workaround for this issue:
The old code design where “Go to Definition” doesn’t work:

(function ($) {
    'use strict';
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
        loaded = false,
        ie11 = window.navigator.userAgent.indexOf('Trident/7.0') > 0;

    $.pascal = $.pascal || {};
    
    $.pascal.element = $.pascal.element || {};
    
    $.pascal.ajax_vars = {
        ajax_url: pascal_ajax.ajax_url,
        security: pascal_ajax.global_security, // security
        isRTL: pascal_ajax.is_rtl
    };

    $(document).ready(function () {
        $.pascal.init();
        var colorPickerContainers = $('.element-wrapper.element-wpcolor .color-picker');
        $.pascal.element.colorpicker(colorPickerContainers);
        $.pascal.element.colorpicker_actions();
    });

    $.pascal.init = function () {
    }

    $.pascal.element.colorpicker = function (selectors) {
        $.post($.pascal.ajax_vars.ajax_url, server_data)
            .done(function (response) {
            });
    }

    $.pascal.element.colorpicker_actions = function () {
    }

})(jQuery);

Converting the old JS objects into a JS Class makes “Go to Definition” work:

(function ($) {
    'use strict';
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
        loaded = false,
        ie11 = window.navigator.userAgent.indexOf('Trident/7.0') > 0;

    class Pascal {
        constructor() {
            this.ajax_vars = {
                ajax_url: pascal_ajax.ajax_url,
                security: pascal_ajax.global_security, // security
                isRTL: pascal_ajax.is_rtl
            };
        }

        init() {
        }

        element = {
            colorpicker(selectors) {
                $.post(this.ajax_vars.ajax_url, server_data)
                    .done(function (response) {
                    });
            },

            /**
             * -- Use {Arrow Function} to access parent class variables --
             * */
            colorpicker_actions: () => {
                const _parent = this,
                    _clsElement = _parent.element;
            }

        }
    } // Class Pascal
    
    $(document).ready(() => {
        const pascal = new Pascal();

        pascal.init();
        const colorPickerContainers = $('.element-wrapper.element-wpcolor .color-picker');
        pascal.element.colorpicker(colorPickerContainers);
        pascal.element.colorpicker_actions();
    });

})(jQuery);