Add .vscode/settings.json (#9295)

* Add .vscode/settings.json

* Use new explicit value instead of boolean

* Configure formatting of JSON files

* Format HTML/CSS/YAML too

* Apply suggestions from code review

Co-authored-by: Jonatan Schroeder <jonatan@yorku.ca>

---------

Co-authored-by: Jonatan Schroeder <jonatan@yorku.ca>

.gitignore

@@ -17,6 +17,7 @@ docker-compose.override.yml
 ### VSCode
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 
 ### tmux
 .tmux.conf

.prettierignore

@@ -63,3 +63,7 @@ testCourse/**/*.html
 
 # JSON files in tests are formatted explicitly to check for loading behaviour, so should not be formatted automatically
 apps/prairielearn/src/tests/*/**/*.json
+
+# EJS files are treated as HTML by VSCode, which will try to format them as such.
+# This won't work, so exclude them.
+apps/prairielearn/src/**/*.ejs

.vscode/settings.json

@@ -0,0 +1,31 @@
+{
+  // If the following is ever addressed, we can update our config to use whatever
+  // the official shared config is:
+  // https://github.com/microsoft/vscode/issues/40233
+
+  // This is required to load extensions, which in turn is required to be able
+  // to format SQL files.
+  // https://github.com/prettier/prettier-vscode/issues/3235
+  "prettier.configPath": "./.prettierrc.json",
+
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.black-formatter",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": "explicit"
+    }
+  },
+
+  "[javascript][typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  },
+
+  "[html][css][json][yaml][sql][markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  }
+}