From 9c00d6d3325be1bb69ffcb61f4b6fbcfb040ea1a Mon Sep 17 00:00:00 2001
From: Alex Hunt <huntie@meta.com>
Date: Thu, 4 Apr 2024 09:04:20 -0700
Subject: [PATCH] Add VS Code workspace config (#43851)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43851

## Summary

Adds a `react-native.code-workspace` workspace file when using VS Code. This disables the built-in TypeScript Language Service for `.js` files, recommends extensions, enables `formatOnSave`, and configures Flow language support.

We will recommend this workspace config in our contributing guide: https://github.com/facebook/react-native-website/pull/4075.

**Motivation**

This is a DevX benefit for **React Native contributors** using open source VS Code — in particular to help with recent/trivial papercuts in PRs such as inserting a final newline in files (configured by EditorConfig).

**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.

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

**Why `react-native.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

Changelog: [Internal]

## Test plan

Aganst a new unconfigured copy of Visual Studio Code Insiders.

**Without workspace config**

❌ `.js` files raise errors by default (built-in TypeScript language service)

 {F1478195672}

❌ When using the Flow VS Code extension, the wrong version (global) of Flow is used.

**With workspace config**

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

 {F1478194795}

✅ Dialog is shown on workspace launch with recommended VS Code extensions

{F1478196003}

✅ Built-in TypeScript Language Service is disabled for `.js` files
✅ Flow language support is configured correctly against `flow` version in `package.json`

{F1478291085}
{F1478200649}

Reviewed By: motiz88

Differential Revision: D55698495

fbshipit-source-id: b0b2f459cf05afc3e7862c9845066a66aaa1985b
---
 react-native.code-workspace | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 react-native.code-workspace

diff --git a/react-native.code-workspace b/react-native.code-workspace
new file mode 100644
index 00000000000..7a10adaad04
--- /dev/null
+++ b/react-native.code-workspace
@@ -0,0 +1,20 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"extensions": {
+		"recommendations": [
+			"dbaeumer.vscode-eslint",
+			"editorconfig.editorconfig",
+			"esbenp.prettier-vscode",
+			"flowtype.flow-for-vscode"
+		],
+	},
+	"settings": {
+		"editor.formatOnSave": true,
+		"flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow",
+		"javascript.validate.enable": false
+	}
+}