Merge pull request #605 from IgnaceMaes/vscode-disable-ts

docs: document disabling VS Code TS plugin

Author: chriskrycho

docs/getting-started.md

@@ -44,3 +44,12 @@ You can install an editor extension to display Glint's diagnostics inline in you
 - Install the [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=typed-ember.glint-vscode).
 
 ![A type error being shown inline for a template file in VS Code](https://user-images.githubusercontent.com/108688/111076679-995c2300-84ed-11eb-934a-3a29f21be89a.png)
+
+To get Ember/Glimmer and TypeScript working together, Glint creates a separate TS language service instance patched with Ember-specific support. To prevent invalid or duplicate diagnostics you need to disable VSCode's built-in TS language service in your project's workspace only by following these steps:
+
+1. In your project workspace, bring up the extensions sidebar `Ctrl + Shift + X` (macOS: `Cmd + Shift + X`).
+1. Type `@builtin typescript` in the extension search box
+1. Click the little gear icon of "TypeScript and JavaScript Language Features", and select "Disable (Workspace)".
+1. Reload the workspace. Glint will now take over TS language services.
+
+![Disabling built-in TS language service per workspace](https://user-images.githubusercontent.com/108688/111069039-6dc84100-84cb-11eb-8339-18a589be2ac5.png)

packages/vscode/README.md

@@ -10,7 +10,15 @@ See the [Glint home page] for a more detailed Getting Started guide.
 
 1. Add `@glint/core`, `@glint/template` and an appropriate environment package to your project's `devDependencies`.
 1. Add a `"glint"` key to your project's `tsconfig.json` or `jsconfig.json` specifying your environment and any other relevant configuration.
-1. Consider disabling the built-in `vscode.typescript-language-features` extension for any workspaces where you use Glint to avoid extraneous diagnostics. <details><summary>Screenshot</summary>
+1. Consider disabling the built-in `vscode.typescript-language-features` extension for any workspaces where you use Glint to avoid extraneous diagnostics. 
+
+<details><summary>Instructions</summary>
+
+1. In your project workspace, bring up the extensions sidebar `Ctrl + Shift + X` (macOS: `Cmd + Shift + X`).
+1. Type `@builtin typescript` in the extension search box
+1. Click the little gear icon of "TypeScript and JavaScript Language Features", and select "Disable (Workspace)".
+1. Reload the workspace. Glint will now take over TS language services.
+
 <img src="https://user-images.githubusercontent.com/108688/111069039-6dc84100-84cb-11eb-8339-18a589be2ac5.png" width="500">
 </details>