created a vscode workspace file for the repo #29830

vzaidman · 2024-06-10T14:43:33Z

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.

❌ Searching in excluded files when the "include" field is specified

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

✅ Does not search in excluded files when the "include" field is specified

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

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

vercel · 2024-06-10T14:43:37Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2024 1:33pm

react-sizebot · 2024-06-10T14:49:36Z

Comparing: 814a418...76dc6e8

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.66 kB	6.66 kB	=	1.82 kB	1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	497.80 kB	497.80 kB	=	89.24 kB	89.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.67 kB	6.67 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	502.62 kB	502.62 kB	=	89.94 kB	89.94 kB
facebook-www/ReactDOM-prod.classic.js	=	597.04 kB	597.04 kB	=	105.31 kB	105.31 kB
facebook-www/ReactDOM-prod.modern.js	=	571.38 kB	571.38 kB	=	101.25 kB	101.25 kB
test_utils/ReactAllWarnings.js	Deleted	62.88 kB	0.00 kB	Deleted	15.69 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
test_utils/ReactAllWarnings.js	Deleted	62.88 kB	0.00 kB	Deleted	15.69 kB	0.00 kB

Generated by 🚫 dangerJS against 76dc6e8

hoxyq

Discussed in person, VSCode users should have a better devx, hopefully

eps1lon · 2024-06-11T12:03:42Z

Oftentimes repos commit a .vscode/settings.json but that's annoying if you want to customize your folder settings until microsoft/vscode#15909 lands.

So I usually prefer if repos add a .vscode/settings.example.json with instructions to cp .vscode/settings.example.json .vscode/settings.json after clone. DT does that: https://github.com/DEfinitelyTyped/DefinitelyTyped/#are-files-formatted-automatically

If users have their own workspace config they couldn't benefit from the .code-workspace when they could benefit from a settings.template.json

Though the settings.template.json requires an additional step. We could get fancy and automatically copy in postinstall if a .vscode/settings.json doesn't exist yet.

huntie · 2024-06-11T13:49:06Z

@eps1lon This is another reason I like the <repo>.code-workspace pattern. A user-defined .vscode/ directory (which we should add to .gitignore) allows exactly this kind of override, for merged per-user customisations over these defaults.

Image: The font size preference of 16 is applied by .vscode/settings.json, taking precedence over the workspace file.

I'd also encourage that react.code-workspace defines as many base settings as possible, to share between all users.

vzaidman · 2024-06-11T14:01:09Z

@eps1lon I see the benefits of using the .vscode/settings.example.json approach, however even with a postinstall I don't like how there's no nice way to update the settings automatically for users.

I think going with the workspace approach would be a bit better for now until microsoft/vscode#15909 lands.

Summary: While reviewing facebook/react#29830, I noticed this file was committed with tab indentation in React Native. Note: The `json-stringify` parser can be used with Prettier 3+ only, so we use `json` instead. Changelog: [Internal] Differential Revision: D58413581

…nore Summary: While reviewing facebook/react#29830, I noticed this file was committed with tab indentation in React Native. I have also used the `.gitignore` entry to clarify how `react-native.code-workspace` interacts with an optional user `.vscode/` config directory. Note: The `json-stringify` parser can be used with Prettier 3+ only, so we use `json` instead. Changelog: [Internal] Differential Revision: D58413581

josephsavona

Thanks for the PR. However, people are pretty opinionated about their workflows. We already have linting and prettier setup to ensure consistency, i'm not sure this is providing clear value.

We can discuss at our next contributor's sync, but I'm not sure we want to move forward with this.

Summary: Pull Request resolved: #44874 While reviewing facebook/react#29830, I noticed this file was committed with tab indentation in React Native. I have also used the `.gitignore` entry to clarify how `react-native.code-workspace` interacts with an optional user `.vscode/` config directory. Note: The `json-stringify` parser can be used with Prettier 3+ only, so we use `json` instead. Changelog: [Internal] Reviewed By: vzaidman Differential Revision: D58413581 fbshipit-source-id: 58c14db6648fed10736062b1f055475154aa74a4

poteto

could you leave this PR only containing changes for react.code-workspace? There's a whole bunch of other unrelated changes

vzaidman · 2024-06-12T17:33:51Z

@poteto just did. Thanks!

poteto · 2024-06-12T17:35:10Z

react.code-workspace

+{
+  "folders": [
+    {
+      "path": "."


Is there a way to opt out /compiler? We use TypeScript there not Flow so these would be the wrong set of settings to apply

I'll check this out!

We can fix this (approximating) by scoping the javascript.validate.enable setting by file type. (Do test this!)

// Does not match `.ts`, `.tsx`, approximating all flow files "[javascript]": { "javascript.validate.enable": false },

All other settings are innocuous under compiler/.

Edit: I just realised javascript.validate.enable and typescript.validate.enable are separate — this should all be fine.

fixed with:

"prettier.configPath": "", "prettier.ignorePath": ""

that would ensure that the local setting of prettier is used to validate the files inside "compiler" as opposed to the default settings that always relies on the config file in the root.

this way prettier is used for formatting and picks up typescript in the compiler folder

now it works:

poteto · 2024-06-12T17:38:56Z

react.code-workspace

+    "editor.formatOnSave": true,
+    "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow",
+    "javascript.validate.enable": false,
+    "search.useIgnoreFiles": true,
+    "search.exclude": {
+      "**/dist/**": true,
+      "**/build/**": true,
+      "**/out/**": true,
+      "*.map": true,
+      "*.log": true


how many of these are strictly necessary to getting started with the repo? I think only flow.pathToFlow and javascript.validate.enable are needed right?

I just checked and search.useIgnoreFiles can be removed indeed.

search.exclude is an important one because it enables search with "files to include" to ignore these paths. For some weird reason VSCode doesn't respect .gitignore when "files to include" is used, but does respect it when searching without "files to include".

poteto

Would still be good to limit the workspace to exclude the compiler directory, but I guess that doesn't need to block this PR

vzaidman · 2024-06-13T13:39:25Z

@poteto

Would still be good to limit the workspace to exclude the compiler directory, but I guess that doesn't need to block this PR

fixed- the compiler directory is now verified just fine!

poteto

thanks!

josephsavona

Summarizing our discussion in the design sync:

The main concern with this is if we could end up introducing tooling (for contributors) that relies on a specific editor setup. We all use varying setups, and if code formatting or testing or whatever only worked in one editor, that would be not good.
A second concern is that people have their own workflows even with VSCode and may not want to use this.
The primary motivation is that it took @vzaidman a while to set up their editor to be productive, and we want onboarding to be as painless as possible (the problem domain is complex enough, we don't incidental complexity of tooling setup).

Since the main concern is theoretical, we'll keep an eye on it. The secondary concern is alleviated by this being optional. Let's ship and see how it goes.

vzaidman requested review from huntie and hoxyq June 10, 2024 14:43

facebook-github-bot added the CLA Signed label Jun 10, 2024

vzaidman force-pushed the vscode-workspace branch from 6eace6a to 0912d74 Compare June 10, 2024 14:45

vercel bot deployed to Preview June 10, 2024 14:49 View deployment

vzaidman force-pushed the vscode-workspace branch 2 times, most recently from c0e22f5 to 9ba27d0 Compare June 10, 2024 15:41

vercel bot deployed to Preview June 10, 2024 15:43 View deployment

vzaidman force-pushed the vscode-workspace branch from 9ba27d0 to 9ca627b Compare June 10, 2024 15:50

vercel bot deployed to Preview June 10, 2024 15:53 View deployment

huntie approved these changes Jun 11, 2024

View reviewed changes

hoxyq approved these changes Jun 11, 2024

View reviewed changes

huntie mentioned this pull request Jun 11, 2024

Format code-workspace file, clarify use of .vscode/ dir facebook/react-native#44874

Closed

josephsavona requested changes Jun 11, 2024

View reviewed changes

poteto requested changes Jun 12, 2024

View reviewed changes

vzaidman force-pushed the vscode-workspace branch from 925f1dd to 64d81be Compare June 12, 2024 17:32

vercel bot deployed to Preview June 12, 2024 17:36 View deployment

poteto reviewed Jun 12, 2024

View reviewed changes

poteto approved these changes Jun 12, 2024

View reviewed changes

vzaidman force-pushed the vscode-workspace branch from 64d81be to 9acc323 Compare June 13, 2024 09:16

vercel bot deployed to Preview June 13, 2024 09:19 View deployment

vzaidman force-pushed the vscode-workspace branch from 9acc323 to 2974dd4 Compare June 13, 2024 10:28

vercel bot deployed to Preview June 13, 2024 10:32 View deployment

vzaidman force-pushed the vscode-workspace branch from 2974dd4 to 307947c Compare June 13, 2024 11:22

vercel bot deployed to Preview June 13, 2024 11:24 View deployment

created a vscode workspace file for the repo

76dc6e8

vzaidman force-pushed the vscode-workspace branch from 307947c to 76dc6e8 Compare June 13, 2024 13:31

vercel bot deployed to Preview June 13, 2024 13:33 View deployment

vzaidman requested review from poteto and josephsavona June 13, 2024 13:53

poteto approved these changes Jun 13, 2024

View reviewed changes

josephsavona approved these changes Jun 13, 2024

View reviewed changes

vzaidman merged commit dfd3097 into main Jun 13, 2024
44 checks passed

vzaidman deleted the vscode-workspace branch June 13, 2024 15:40

eps1lon mentioned this pull request Jun 13, 2024

Update React from 6230622a1a-20240610 to dfd30974ab-20240613 vercel/next.js#66711

Merged

eps1lon mentioned this pull request Jul 10, 2024

[Not for merge] Update React from f3e09d6328 to dfd30974ab vercel/next.js#67630

Closed

This was referenced Jul 25, 2024

Update React from 6230622a1a-20240610 to 76002254-20240724 vercel/next.js#68149

Merged

Update React from 6230622a1a-20240610 to 3208e73e-20240730 vercel/next.js#68330

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

created a vscode workspace file for the repo #29830

created a vscode workspace file for the repo #29830

vzaidman commented Jun 10, 2024 •

edited

Loading

vercel bot commented Jun 10, 2024 •

edited

Loading

react-sizebot commented Jun 10, 2024 •

edited

Loading

hoxyq left a comment

eps1lon commented Jun 11, 2024 •

edited

Loading

huntie commented Jun 11, 2024

vzaidman commented Jun 11, 2024

josephsavona left a comment

poteto left a comment

vzaidman commented Jun 12, 2024

poteto Jun 12, 2024

vzaidman Jun 12, 2024

huntie Jun 13, 2024 •

edited

Loading

vzaidman Jun 13, 2024 •

edited

Loading

poteto Jun 12, 2024

vzaidman Jun 12, 2024 •

edited

Loading

poteto Jun 12, 2024

poteto left a comment

vzaidman commented Jun 13, 2024 •

edited

Loading

poteto left a comment

josephsavona left a comment

created a vscode workspace file for the repo #29830

created a vscode workspace file for the repo #29830

Conversation

vzaidman commented Jun 10, 2024 • edited Loading

Summary

Motivation

Recommended extensions

Why react.code-workspace?

Test plan

vercel bot commented Jun 10, 2024 • edited Loading

react-sizebot commented Jun 10, 2024 • edited Loading

Critical size changes

Significant size changes

hoxyq left a comment

Choose a reason for hiding this comment

eps1lon commented Jun 11, 2024 • edited Loading

huntie commented Jun 11, 2024

vzaidman commented Jun 11, 2024

josephsavona left a comment

Choose a reason for hiding this comment

poteto left a comment

Choose a reason for hiding this comment

vzaidman commented Jun 12, 2024

poteto Jun 12, 2024

Choose a reason for hiding this comment

vzaidman Jun 12, 2024

Choose a reason for hiding this comment

huntie Jun 13, 2024 • edited Loading

Choose a reason for hiding this comment

vzaidman Jun 13, 2024 • edited Loading

Choose a reason for hiding this comment

poteto Jun 12, 2024

Choose a reason for hiding this comment

vzaidman Jun 12, 2024 • edited Loading

Choose a reason for hiding this comment

poteto Jun 12, 2024

Choose a reason for hiding this comment

poteto left a comment

Choose a reason for hiding this comment

vzaidman commented Jun 13, 2024 • edited Loading

poteto left a comment

Choose a reason for hiding this comment

josephsavona left a comment

Choose a reason for hiding this comment

vzaidman commented Jun 10, 2024 •

edited

Loading

Why `react.code-workspace`?

vercel bot commented Jun 10, 2024 •

edited

Loading

react-sizebot commented Jun 10, 2024 •

edited

Loading

eps1lon commented Jun 11, 2024 •

edited

Loading

huntie Jun 13, 2024 •

edited

Loading

vzaidman Jun 13, 2024 •

edited

Loading

vzaidman Jun 12, 2024 •

edited

Loading

vzaidman commented Jun 13, 2024 •

edited

Loading