Add VS Code workspace config #43851
Closed
Add VS Code workspace config #43851
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
the
CLA Signed
|
This pull request was exported from Phabricator. Differential Revision: D55698495 |
Summary: ## Summary Adds and recommends use of `react-native.code-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. **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 - Kotlin — language support **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} Differential Revision: D55698495
|
This pull request was exported from Phabricator. Differential Revision: D55698495 |
|
This pull request has been merged in 9c00d6d. |
|
This pull request was successfully merged by @huntie in 9c00d6d. When will my fix make it into a release? | How to file a pick request? |
vzaidman
added a commit
to facebook/react
that referenced
this pull request
Jun 13, 2024
### 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  ✅ 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  ✅ 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">
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Summary
Adds a
react-native.code-workspaceworkspace file when using VS Code. This disables the built-in TypeScript Language Service for.jsfiles, recommends extensions, enablesformatOnSave, and configures Flow language support.We will recommend this workspace config in our contributing guide: facebook/react-native-website#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.
.editorconfig, all file typesWhy
react-native.code-workspace?.code-workspacefiles have slight extra behaviours over a.vscode/directory:https://code.visualstudio.com/docs/editor/workspaces
Changelog: [Internal]
Test plan
Aganst a new unconfigured copy of Visual Studio Code Insiders.
Without workspace config
❌
.jsfiles raise errors by default (built-in TypeScript language service)❌ 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
✅ Dialog is shown on workspace launch with recommended VS Code extensions
✅ Built-in TypeScript Language Service is disabled for
.jsfiles✅ Flow language support is configured correctly against
flowversion inpackage.jsonDifferential Revision: D55698495