How to Use Visual Studio Code with Neocities

Up until recently, I had mostly edited my code in CodePen and Notepad++, the former mostly being used for debugging while looking at its live preview and such. CodePen is great, don't get me wrong, but I wasn't really keen on logging in every time and working in a relatively cramped workspace. Notepad++ is fine and provides lots of space, it doesn't provide a live preview of the page I'm editing.

I remember following gutz's tutorial on editing HTML files locally. It was super great and easy to follow, but there were many parts of it that didn't work out for me. That included:

• Links to CSS and JS files must be hardcoded with the full URL from our Neocities site, which limits users to only being able to edit their HTML files locally
• Some of these full URLS will not even show up when opening the HTML file directly from your hard drive because of the Cross-Origin Requests that are only available for Supporters, or paying users.
• It's possible to use CSS and JS files locally using only links like "/images/filename.png", but that requires all files to be in the hard drive, which can quickly become cluttered.
• If you are using a script that puts the same elements/text on every page, that script will not load those elements if the HTML file calling the script is located in a different folder.

All of the above issues can be remedied by typing in a bunch of JS functions that covers each issue, but I found there is an easier way: using Visual Studio Code, or VSCode for short.

I would link the entire documentation for VSCode, but I imagine it would be overwhelming for new users. So, I'll provide a small tutorial on setting up VSCode to help new users get started.

1. Go to the Visual Studio Code site, and download the latest version of VSCode.
2. Open up VSCode and locate the Extensions button on the left side of the screen (it should look like a set of building blocks).
3. Click on the "Search Extensions in Marketplace" search bar.
4. Type in "Live Preview". The extension should be near the top and say it was developed by Microsoft.
5. Select the small "Install" box to install the extension. You can also click on the the extension itself to see how it functions.

1. You can configure the settings for VSCode by going into File > Preferences > Settings, pressing "Ctrl + ," (comma key), or pressing "Ctrl + Shift + P" and typing "Open User Settings".
2. A new tab will open for settings, which will be where you can configure the editor however you'd like.
3. (Recommended for new users) VSCode allows users to save their settings into a JSON file. To open the JSON file, press "Ctrl + Shift + P", and type "Open Settings (JSON)". This will open settings.json. The JSON file that I will provide below allows HTML tags to be automatically renamed and closed, changes the tab size to 2 spaces, and trims any trailing whitespace:

   {
     "editor.tabSize": 2,
     "editor.linkedEditing": true,
     "files.trimTrailingWhitespace": true,
     "editor.wordWrap": "on",
   }

This follows steps 1 through 3 from gutz's tutorial. If you already have all of your Neocities files saved in your hard drive, you can skip this section.

1. Create a folder in your hard drive where you will store the files to your Neocities site. I named mine "neocities" for convenience. Create subfolders as needed.
2. Select "Edit Site" to go to your Neocities dashboard where all of your files are located. Hover over each .html, .css., or .js file you want to save and right-click. Select "Save link as..." and save your file in your hard drive folder. Be sure to name your files exactly like in your Neocities dashboard and that they all retain their file types. Since folders cannot be saved, every file in each subfolder must be saved individually.
3. Organize all files in the same file structure as your Neocities dashboard. This means every file must be in its original folder, etc.

1. From VSCode, select File > Open Folder
2. Locate the folder where your files are located. For example, if all of your files are located in a folder called "neocities", find the "neocities" folder, click on it once, and click on "Select Folder".
3. Your files will appear on the Explorer sidebar on the left side of the screen. The layout should look identical to your Neocities dashboard.

1. We will be using the "Live Preview" extension that I mentioned earlier. To start using it, open any HTML file from the Explorer sidebar by double-clicking on it.
2. Right-click anywhere in the HTML file, and select "Show Preview".
3. VSCode will open a new tab on the right side that will show a live preview of your site using a local server. The "browser" it uses is similar to Chrome.
4. If Chrome is not your default browser and you would like to open it in your default browser, select the icon with four horizontal lines on the right side of the screen, then select "Open in Browser".
5. VSCode will then open your site in your default browser and a terminal window within the software's UI.
6. Close the browser by simply closing the window, and then close the terminal window by clicking on the trash can icon, or pressing "Ctrl + C" within the terminal.

I hope this tutorial was able to help, even a little bit. I understand that learning a new software can be pretty overwhelming, even if you read a hundred tutorials. The last thing I want is to force people to do something they don't like, so if it turns out that VSCode isn't for you, then that's ok! :3

If some of you end up interested in VSCode and would like to use it some more, stay tuned! I have another tutorial planned that will help users update their Neocities sites through GitHub. It does require some knowledge of Git, but I'll try my absolute best to explain the very basics of it.

Until then, see you later!