VS Code Setup

VSCode Extensions

There are a number of important VS Code extensions that will make things easier for developers working on the project, both complaint and case management side. The following extensions are required and recommended:

Required:

• Prettier: Install from Marketplace
• ESLint: Install from Marketplace
• GraphQL for VSCode: Install from Marketplace
• Prisma: Install from Marketplace

Optional:

• Docker: Install from Marketplace
• Prettier SQL VSCode: Install from Market place
• SonarLint: Install from Market place
• GitHub Pull Requests: Install from Market place

VSCode Configuration

VSCode needs to be configured for all developer to use the same settings to prevent some of the more egregious merge conflicts, these will be cause predominantly because of whitespace and code formatting as well as line lengths.

Tab Size:

• developers should set their tab spaces to a width of 2

Format on Save:

• developer will need to have the "Format on Save" option enabled so as to make sure that code is properly formatted before being committed

Indent Size:

• this should be set to "tabSize" which should be set to 2 spaces, see Tab Size

Word Wrap Column:

• This is a similar setting to the Prettier Line with and should be set to be 120 characters as well

Prettier

The prettier extension has a number of settings that should be set

Print With:

• while there is no limit on how much ban be on one line, it is generally a good idea to cap the max line with to keep code readable. This should be set to 120 characters to give enough space for long variable and function names, but not too short where everyline wraps or breaks unnecessarily

Single Attribute Per Line:

• this setting will help make using components more readable when consuming and will place each prop on its own line opposed to all props on a a single line

Trailing Commas

• this will ensure that commas are always used

Formatters

To ensure that Prettier is used as a formatter for all languages used in the project you will need to update your settings.json

• Press command + shift + p (or ctrl + shift + p on windows)
• Type settings.json (you may need to add '>' at the start)
• you should select the User option

In this settings fill you'll want to copy and paste the included json into your user settings. This will ensure that all of your settings are set, and additionally setup code formatters:

"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.indentSize": "tabSize",
"editor.wordWrapColumn": 120,
"prettier.trailingComma": "all",
"prettier.singleAttributePerLine": true,
"prettier.printWidth": 120,
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},    
"[graphql]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},