Add vscode workspace shared settings (deephaven#380)

.gitignore

@@ -11,7 +11,12 @@
 /dist
 
 # misc
-.vscode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
 .DS_Store
 .env.local
 .env.development.local

.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"eamodio.gitlens",
+		"stylelint.vscode-stylelint",
+		"mrmlnc.vscode-scss"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": []
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "stylelint.validate": [
+    "css",
+    "html",
+    "sass",
+    "scss"
+  ]
+}

README.md

@@ -4,6 +4,15 @@ We're using a monorepo to manage our packages, as it becomes cumbersome to manag
 
 [![codecov](https://codecov.io/gh/deephaven/web-client-ui/branch/main/graph/badge.svg?token=RW29S9X72C)](https://codecov.io/gh/deephaven/web-client-ui)
 
+## Development Environment
+
+We recommend using [Visual Studio Code](https://code.visualstudio.com/) and installing the recommended workspace extensions. There are a few workspace settings configured with the repo.
+
+Use Chrome for debugging, install the React and Redux extensions.
+
+- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi): Allows inspection/changing the props/state of react components.
+- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en): Inspect the redux store data.
+
 ## Getting Started
 
 We are still using node 14.x and npm 6.x. If you are [using nvm](https://github.com/nvm-sh/nvm#installing-and-updating), run `nvm install lts/fermium` to get the latest 14.x/6.x versions. Otherwise, download from the [node homepage](https://nodejs.org/en/download/).

packages/code-studio/README.md

@@ -54,25 +54,6 @@ Turns on the logger proxy which captures log messages so users can easily export
 
 In development, `DHLogProxy` and `DHLogHistory` are added to the window so they can be manipulated directly from the console if needed. `DHLogProxy.enable()` will capture and emit events for all logging events. `DHLogHistory.enable()` will attach event listeners to the `DHLogProxy` events. Both also have a `disable` method.
 
-## Development Environment
-
-[Visual Studio Code](https://code.visualstudio.com/) is recommended for code editing. We use some extensions to help our development:
-
-- [Prettier](https://github.com/prettier/prettier-vscode): Automatically formats code to our style. Enable the `formatOnSave` option to auto format when saving. Also set the Editor:Default Formatter to `ebsenp.prettier-vscode`
-- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Identifies linting errors, gives options to fix them automatically.
-- [stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint): Identifies scss lint errors.
-- [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss): Autocomplete for SCSS files
-- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome): Set up debugging in Chrome.
-
-Use Chrome for debugging, install the React and Redux extensions.
-
-- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi): Allows inspection/changing the props/state of react components.
-- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en): Inspect the redux store data.
-
-VSCode Typescript Version Settings
-
-- Open a TS file. In the bottom right of VSCode you will see "Typescript #.#.#". Click on the version number > Select Typescript Version > Use Workspace Version. This ensures Intellisense matches the TS version and features we compile against.
-
 ## Data Storage
 
 There is the data for the current session stored in the local redux state (Redux Data), and data persisted between sessions is stored in browser storage.