jqueryvisual-studio-codewindows-10

VS Code Live Server not opening a jQuery file


VS Code Live Server is not opening my jQuery file. The path is correct ("..\jquery-3.0.0"), and jsconfig.json is set to:

{
    "typeAcquisition": {
        "include": [
            "jquery.3.0.0"
        ]
    }

}

When I try to open the file in file explorer, I get an error code: 800A138F.


Solution

  • The problem in this particular case is (since I spoke with you about your setup) is your code is using a relative path to your CSS and jQuery files that is outside the web root that Live Server is using.

    Live Server doesn't appear to support using relative paths outside of the web root.

    To verify, I created a folder called include inside of where the *.htm files you are working with are contained and placed a copy of style.css and jquery-3.0.0.js inside that include folder.

    Change this:

    <link rel="stylesheet" href="../style.css" />
    <script type="text/javascript" src="../jquery-3.0.0.js"></script>
    

    To this:

    <link rel="stylesheet" href="/include/style.css" />
    <script type="text/javascript" src="/include/jquery-3.0.0.js"></script>
    

    and everything should work fine when running inside of Live Server.

    Path Example:

    /webroot
        test.htm
        /include
            style.css
            jquery-3.0.0.js
    

    Even better, to avoid changing these include paths and adding copies of these two files in every chapter folder, you can leave the existing folder layout and relative paths unchanged for the LinkedIn jQuery Essentials course you are taking and launch the VS Code Live Server extension from the Exercise Files folder.

    This will set the Live Server web root above the exercise chapter folders and Live Server will display a directory listing of the exercise chapter folders.

    Drilling into the respective chapter folders and then clicking on whatever HTML file you want to test will allow the existing relative path to style.css and jquery-3.0.0.js to work because now those files are within Live Server's web root since it was launched at the parent folder level for the chapter folders.

    Background: The OP is taking a jQuery course that includes a download of the course exercise files where the two common file includes are the style.css and jquery-3.0.0.js files.

    Those two files are child items in a folder named Exercise Files. Inside this folder are also Chapter folders containing other lesson files:

    /webroot (Exercise Files folder)
        jquery-3.0.0.js
        style.css
        /Ch_1
        ...
        /Ch_4
            ...
            helpers_finished.htm
            ...
        /Ch_5
        ...
    

    VS Code Live Server sets its web root based on where in the file path it was launched from unless otherwise controlled via some settings.