VS Code Workspace Settings Overview

The .vscode folder (link) within this repository contains workspace settings that are designed to assist developers utilizing the VS Code editor to develop for Caseflow. These workspace settings will override user settings, so it's best to only include configurations that will universally benefit all developers working on this project in these files.

Below is a breakdown of each of the files contained within the aforementioned folder.

extensions.json

Extensions listed within the recommendations array in this file will appear as recommendations to all VS Code users whenever they have the Caseflow repository open in their editors. Extension recommendations can be found in the Extensions tab in the Recommendations pane. Any extensions already installed are omitted.

Users will be asked if they'd like to install the recommended extensions:

Adding a New Recommendation

1. Copy the extension's ID:

2. Add it to the recommendations array in extensions.json:

3. Commit it to version control, and once it makes it into the master branch everyone will see your recommendation. 🎉

Disabling Recommendation Pop-Up

Are you tired of seeing the "Do you want to install the recommended extensions for this repository?" pop-up? Follow this guide to disable it.

settings.json

{
  "editor.tabSize": 2,                  # Sets tabs to 2 spaces
  "editor.trimAutoWhitespace": true,    # Trims whitespace added by the editor
  "eslint.packageManager": "yarn",      # Sets default package manager to yarn
  "eslint.workingDirectories": [        # Allows ESLint to properly resolve import paths in Caseflow
    "./client"
  ],
  "files.insertFinalNewline": true,     # Ensures the presence of a blank line at the end of each file
  "files.trimTrailingWhitespace": true, # Removes trailing whitespace added by the user upon file save
  "git.autofetch": true,                # Enables git fetch to be performed automatically on a timed interval
}

launch.json

This file defines how to launch debuggers for this project. There are currently 4 debuggers configured within the launch.json file:

Name	Purpose
Caseflow Backend	Launches the Caseflow Rails backend. Frontend must be run separately.
Caseflow Backend with Email	Launches the Caseflow backend with the WITH_EMAIL_TEST_SERVER environmental variable enabled for testing Action Mailer messages locally. A maildev server will also be automatically launched at http://localhost:1080/ where you'll be able to see emails sent from Caseflow. The container will be stopped whenever the debugger is stopped automatically, as well. See this wiki article for more info. The frontend must be run separately.
Caseflow Frontend	Launches the webpack-dev-server, and then opens a Chrome window to localhost:3000 once it's done building the React app. The backend must be run separately.
Caseflow Frontend and Backend	Combines "Caseflow Frontend" and "Caseflow Backend". A Rails server is spun up, and a Chrome window will open localhost:3000 once the frontend builds.

You can switch between the different debuggers using the dropdown at the top of the "Run and Debug" pane:

You can press F5 to launch whichever debugger you have selected from anywhere in VS Code for convenience. SHIFT + F5 will stop any debugger that is currently running.

In the "Run and Debug" pane you can set breakpoints in the code, watch variables, watch logs, see all variables currently in scope, view the call stack, and more. For more information on debugging in VS Code, click here.

Backend:

Frontend:

Note: The frontend debugger setup is seemingly a bit more finicky- depending on where breakpoints are placed, they may become unbound due to lifecycles of React components and other Javascript intricacies. You can use it in conjunction with the debugger statement by running it in the Debug Console for augmented results.

tasks.json

Tasks defined within this file are currently used in conjunction with the configurations in launch.json to prepare for/clean up after debuggers.

Here is a breakdown of the tasks and their purposes:

Task Name	Purpose
Run webpack-dev-server	This task runs prior to the Caseflow Frontend debugger launching. It compiles the frontend and launches a webpack-dev-server, which is the same thing that happens whenever you run make run-frontend. It prevents the Caseflow Frontend debugger from starting until the text "Compiled successfully." is detected in the console, ensuring the debugger won't launch until webpack has finished setting up the frontend.
Stop webpack-dev-server	This task is set to run whenever the Caseflow Frontend debugger is stopped. This makes surethe webpack-dev-server is also stopped and not left running in the background.
Run maildev server	This task runs prior to the Caseflow Backend with Email debugger launching. It starts a maildev docker container that will act as an email server for Caseflow to send messages to. For more information on running a maildev server alongside Caseflow for testing ActionMailer messages locally, see the Testing Action Mailer Messages Locally wiki page.
Stop maildev server	This task runs after the Caseflow Backend with Email debugger is stopped to make sure the maildev docker container is also stopped.