Change background image
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Setting up VSCode for developing with baystation

Discussion in 'Coding' started by Anticept, Mar 17, 2019.

  1. Anticept

    Anticept Chef

    Hey all!

    If you intend to do any serious development with the baystation codebase, there's ways of doing it a lot easier than developing in maker (the byond development environment). Maker is renowned to be barely better than notepad, and in a few cases, worse. Note: VSCode does not replace the entirety of the DM developer environment! It's for the coding portion, it doesn't replace the mapping and icon parts. Big credit to Lohikar for a lot of this, he showed me many of these tricks and configurations.

    Why VSCode? I'll show you one of the single greatest features with a few screenshots. We're going to use the "other_connections" variable in this example, in grille.dm:

    upload_2019-3-17_3-44-48.png

    That's the only two occurrences in that file, and neither are its definition (it's an inherited var). If you search the codebase for it, you'll get several different results. This example isn't particularly hard to find the definition of this particular var, but it's time wasted and time distracting you from your thought process. Now imagine if it was some much more generically named var with HUNDREDS of occurrences in the codebase?

    But, with a little VSCode magic and a lovely plugin which I'll get to... I can do this:

    2019-03-17_13-55-03.gif

    Bam! There's the definition in another file!

    It can find the definitions for vars, macros, types, and procs.

    There's so much more it can do, but that's not the point of this post to go into those details. This is a neat side though if you need more convincing: https://vscodecandothat.com/

    Quick Disclaimer: VSCode stands for Visual Studio Code. It's not the same thing as Visual Studio!
    Another Quick Disclaimer: Git does NOT mean /github/. Github is a site that uses git, the tool. They're not even close to being the same thing. You'll be using both for development.
    Disclaimer: This is not a howto guide for /starting/ your developing journey. This will make assumptions that you already know how to somewhat use git and github, and have a super duper basic grasp on what coding is. This is a guide aimed at people who have already gotten started and want to make things EASIER, but if you're a total code newbie, it wouldn't be a bad idea to at least get VSCode set up.

    Prerequisites:
    • Grab VSCode (it's cross platform) and install it: https://code.visualstudio.com/
    • You need a git client. Anyways, maybe you already have a git client. Maybe you don't. Please note that some clients (especially those that ship with a GUI) may NOT be compatible with VSCode's features. Compatibility isn't a requirement, but trust me it helps. Personally, I use vanilla git with the command line (it also allows me to use the terminal feature without issue in vscode instead of a separate terminal, but again, not covered here), but if you have a client of choice, feel free to try it first.

    Setting up the environment:
    There's a few things we need to do. Obviously, first, go ahead and install vscode and your git client before you continue.
    Next, in order to make this work with baycode, we need to install a couple of extensions. VSCode doesn't ship with knowledge of DM code (dreammaker code), that's what the extensions are for.
    VSCode will look like this if you have extensions installed. I have extras that I use and an interface that is a bit customized, don't worry about it, just make sure you don't see any 'reload required' button like it shows below. If you see it, click it, so the extension is loaded.
    2019-03-17_13-51-35.gif

    Setting up the repository:

    You'll need to clone the repository somewhere. If you're using the CLI, navigate to the directory where you want the subfolder created for baystation. Reminder, the command is 'git clone', the upstream repository is https://github.com/Baystation12/Baystation12.git

    Loading the repository to begin coding:

    In VSCode, you need to open the folder for your project:

    2019-03-17_14-07-20.gif


    Everything you see there can be edited as long as it's code. VSCode doesn't do icons or have a map editor, you'll still going to have to use maker for that.

    That's it for the basic set up! Next posts will be about useful things to know about vscode, but are not needed to get started.
     
    Last edited: Sep 8, 2019
  2. Anticept

    Anticept Chef

    Useful Tips & tricks:
    • CTRL + SHIFT + P: Command palette. Basically a search box to find VScode commands and their associated hotkeys, and also as one way to find settings and configuration stuff. You'll find that a LOT of VSCode help documentation talks about the command palette, so get used to this. It can also be opened from the VIEW menu.
    • CTRL + P: Go to file. makes it easier to jump to files and other things just by typing in their name or partial names.
    rMJYre.gif

    • CTRL + U: VSCode calls this a soft undo, which implies something different than what it really is. Basically, if you jumped your cursor to another part of the file, this sends it back. It's good for if you were scrolling down and accidentally clicked, and you want to go back.
    • ALT + Arrows: basically, a back and forth movement that's a bit more advanced than soft undo. Also accessible from menu bar under "go".
    ----------

    Some extra helpful vscode configuration:

    in the .vscode folder, you can put this in the settings.json file so that this ONLY applies to your current baystation workspace:
    Code:
    {
        "breadcrumbs.enabled": true,
        "editor.renderWhitespace": "boundary",
        "editor.insertSpaces": false
    }
    Breadcrumbs are this
    renderWhitespace shows tabs and spaces as arrows and dots to help you fix indentation issues, like so:
    upload_2019-3-17_17-38-15.png

    insertSpaces prevents you from using spaces for indentation on new files.

    These settings are also found in user/workspace settings (command palette -> user settings OR workspace settings). Note, USER settings is global, workspace settings only apply when you have the baystation workspace open.

    ----------

    You can alt click vars, procs, etc as a shortcut to jump to their definitions. Note: your hotkey modifier might be different, mine was control.
    Right clicking code: If you right click procs, vars, etc, there's different things that will pop up depending on the context. That's how you get the "go to definition" bit above, but let me point out another version:

    2019-03-17_13-57-55.gif

    That creates this little pop-over, which can be closed by that tiny x. Useful for a super quick reminder without actually jumping to another file.

    Make sure you check out the other options there too, because it's all designed to make this much easier to find the information you need while coding.

    ----------

    VSCode uses something called preview mode. When you're clicking through files, the tabs will show the filename in italics. That way, when you're quickly thumbing through things, it doesn't open a bunch of code tabs. You need to use the KEEP OPEN command to switch that tab out of preview mode. The filename in the tab will turn to standard UN-italicized text. Any NEW files you open will continue to open in preview mode without touching your editing tab. You can use keep open on those too!

    2019-03-17_13-59-10.gif

    ----------

    Building from VSCode: Yep it can do that! It's actually invoking a command line version of dreammaker, but it's still faster than building from maker. Maker likes to build the object tree, which is pointless unless you're mapping. The DM Langserver extension from above actually sets up a build task for you, though you might need to specify the byond directory from the extension settings (CTRL + SHIFT + P for command palette, type "preferences: open user settings, then in the search settings box, put in Dreammaker:Byond Path").

    To invoke the build, you MUST have a .dm file open (so that the DM langserver extension runs) use CTRL + SHIFT + B, OR click the 'terminal' button in the menu bar and click 'run build task'. That will pop up a little command palette like thing at the top where you select "dm: build: baystation12.dme.

    ----------

    Do you want to also have it load a test server for you? You'll need what's called a tasks.json file. In the root of the baystation repository, create a folder called '.vscode', including the leading period but not the quotes, if it doesn't exist. In there, create a tasks.json file. No, don't worry, if you don't have a shitty git client, it won't try to commit this to github because of the .gitignore file. Hopefully it's empty otherwise you're going to have to learn how to edit it yourself. Put this in, editing the COMMAND parameter to point to your dreamdaemon.exe file (you shouldn't load compiled files directly into dreamseeker, it can have weird effects):

    Code:
    {
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
            {
                "label": "Run Test Server",
                "group": "test",
                "command": "C:/PATH/TO/BYOND/bin/dreamdaemon.exe",
                "args": ["${workspaceRoot}/baystation12.dmb", "-invisible", "-verbose", "-trusted"]
            }
        ]
    }
    -verbose forces dreamdaemon to provide FULL runtime information on errors, which is vastly better for testing.
    -invisible prevents it from showing on the byond hub.
    -trusted prevents you from being bombarded by file read and write requests to things like the config files and save data. There are dozens of these.
    -once is an optional arg that will stop the server once you log out, but it's not included in the snippet because some people might find that annoying.

    Now, if you click terminal > run task, you'll see "Run Test Server"! It will load up a dreamdaemon instance, load the compiled baystation12.dmb, and you can then connect to it there's a button near the STOP button to make it easy for you).

    ----------

    Using the terminal: click 'terminal' in the menu bar, then click new terminal. You'll get this:

    2019-03-17_14-11-54.gif

    As you can see, it's a terminal. A command line. I used the 'git status' command to demonstrate. This is one of the reasons I use command line git: I can also use the terminal. I'm an intermediate git user though, beginners probably don't need this.
    You can configure it to even use powershell instead of a standard command line! I am pretty sure on linux, you can have it run the shell of your choice too!

    ----------

    VSCode supports regex searching:

    upload_2019-3-17_5-19-3.png

    It also supports MULTILINE searching! https://code.visualstudio.com/updates/v1_29#_multiline-search
    Additional note: as of March 2019, regex is not required for multiline searching, it will work without it (though much better with if you know how to do regex).

    ----------

    And, shameless plug for lots more: https://vscodecandothat.com/
     
    Last edited: Aug 28, 2019
    Roland410 likes this.
  3. Anticept

    Anticept Chef

    <this post also reserved in case I need it. I'm doing this because of image limits and I know I'll have more to post later>
     
    Roland410 likes this.
  4. Anticept

    Anticept Chef

    <you know what this is for>
     
    Roland410 likes this.