Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
created a vscode workspace file for the repo (#29830)
### Summary Similarly to what has been done on the `react-native` repo in facebook/react-native#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">
- Loading branch information