Skip to content

Commit

Permalink
created a vscode workspace file for the repo (#29830)
Browse files Browse the repository at this point in the history
### 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
vzaidman authored Jun 13, 2024
1 parent ca9b6a7 commit dfd3097
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 0 deletions.
6 changes: 6 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ module.exports = {
parser: 'flow',
arrowParens: 'avoid',
overrides: [
{
files: ['*.code-workspace'],
options: {
parser: 'json-stringify',
},
},
{
files: esNextPaths,
options: {
Expand Down
30 changes: 30 additions & 0 deletions react.code-workspace
Original file line number Diff line number Diff line change
@@ -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": ""
}
}

0 comments on commit dfd3097

Please sign in to comment.