From dfd30974aba0d7740e084f70a8af1cd4c54bb273 Mon Sep 17 00:00:00 2001
From: Vitali Zaidman <vzaidman@gmail.com>
Date: Thu, 13 Jun 2024 16:23:42 +0100
Subject: [PATCH] created a vscode workspace file for the repo (#29830)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Summary

Similarly to what has been done on the `react-native` repo in
https://github.com/facebook/react-native/pull/43851, this PR adds a
`react.code-workspace` workspace file when using VSCode.

This disables the built-in TypeScript Language Service for `.js`, `.ts`,
and `.json` files, recommends extensions, enables `formatOnSave`,
excludes certain files in search, and configures Flow language support.

### Motivation

This is a DevX benefit for **React contributors** using open source VS
Code. Without this, it takes quite a long time to set up the environment
in vscode to work well.

For me the following two points took around an hour each to figure out,
but for others it may take even more (screenshots can be found below):
* Search with "files to include" was searching in ignored files
(compiled/generated)
* Configure language validation and prettier both in "packages" that use
flow and in the "compiler" folder that uses typescript.

### Recommended extensions

NOTE: The recommended extensions list is currently minimal — happy to
extend this now or in future, but let's aim to keep these conservative
at the moment.

* Flow — language support
* EditorConfig — formatting based on `.editorconfig`, all file types
* Prettier — formatting for JS* files
* ESLint — linter for JS* files

### Why `react.code-workspace`?

`.code-workspace` files have slight extra behaviours over a `.vscode/`
directory:

* Allows user to opt-in or skip.
* Allows double-click launching from file managers.
* Allows base folder (and any subfolders in future) to be opened with
local file tree scope (useful in fbsource!)
* (Minor point) Single config file over multiple files.
https://code.visualstudio.com/docs/editor/workspaces

### Test plan
Against a new un-configured copy of Visual Studio Code Insiders.

**Without workspace config**

❌ .js files raise errors by default (built-in TypeScript language
service)
❌ When using the Flow VS Code extension, the wrong version (global) of
Flow is used.
<img width="978" alt="Screenshot 2024-06-10 at 16 03 59"
src="https://github.com/facebook/react/assets/5188459/17e19ba4-bac2-48ea-9b35-6b4b6242bcc1">

❌ Searching in excluded files when the "include" field is specified
<img width="502" alt="Screenshot 2024-06-10 at 15 41 24"
src="https://github.com/facebook/react/assets/5188459/00248755-7905-41bc-b303-498ddba82108">

**With workspace config**

✅ Built-in TypeScript Language Service is disabled for .js files, but
still enabled for .ts[x] files
![Screen Recording 2024-06-13 at 12 21
24](https://github.com/facebook/react/assets/5188459/6048218c-f316-44cd-8771-d2d0e848991d)

✅ Flow language support is configured correctly against flow version in
package.json
<img width="993" alt="Screenshot 2024-06-10 at 16 03 44"
src="https://github.com/facebook/react/assets/5188459/b54e143c-a013-4e73-8995-3af7b5a03e36">

✅ Does not search in excluded files when the "include" field is
specified
<img width="555" alt="Screenshot 2024-06-10 at 15 39 18"
src="https://github.com/facebook/react/assets/5188459/dd3e5344-84fb-4b5d-8689-4c8bd28168e0">

✅ Workspace config is suggested when folder is opened in VS Code

![image](https://github.com/facebook/react/assets/5188459/7434261f-1057-4954-9885-b057a10684ad)

✅ Dialog is shown on workspace launch with recommended VS Code
extensions
<img width="580" alt="Screenshot 2024-06-10 at 15 40 52"
src="https://github.com/facebook/react/assets/5188459/c6406fb6-92a0-47f1-8497-4ffe899bb6a9">
---
 .prettierrc.js       |  6 ++++++
 react.code-workspace | 30 ++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 react.code-workspace

diff --git a/.prettierrc.js b/.prettierrc.js
index 6342f131a0..43f9b6671c 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -14,6 +14,12 @@ module.exports = {
   parser: 'flow',
   arrowParens: 'avoid',
   overrides: [
+    {
+      files: ['*.code-workspace'],
+      options: {
+        parser: 'json-stringify',
+      },
+    },
     {
       files: esNextPaths,
       options: {
diff --git a/react.code-workspace b/react.code-workspace
new file mode 100644
index 0000000000..16ff05dce9
--- /dev/null
+++ b/react.code-workspace
@@ -0,0 +1,30 @@
+{
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "extensions": {
+    "recommendations": [
+      "dbaeumer.vscode-eslint",
+      "editorconfig.editorconfig",
+      "esbenp.prettier-vscode",
+      "flowtype.flow-for-vscode"
+    ]
+  },
+  "settings": {
+    "search.exclude": {
+      "**/dist/**": true,
+      "**/build/**": true,
+      "**/out/**": true,
+      "*.map": true,
+      "*.log": true
+    },
+    "javascript.validate.enable": false,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow",
+    "prettier.configPath": "",
+    "prettier.ignorePath": ""
+  }
+}