Skip to content

Commit 4742352

Browse files
manzoorwanijkmanzoorwanijk
authored
Merge 9bbfac2 into 14763bd 
2 parents 14763bd + 9bbfac2 commit 4742352

8 files changed

Lines changed: 190 additions & 77 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ phpcs.xml
5959
phpunit.xml
6060
phpunit-watcher.yml
6161
.tool-versions
62+
/.vscode/settings.json
6263
test/storybook-playwright/test-results
6364
test/storybook-playwright/specs/__snapshots__
6465
test/storybook-playwright/specs/*-snapshots/**

‎.vscode/extensions.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
/**
3+
* List of recommended extensions to use for this workspace.
4+
* The identifier of an extension is always `${publisher}.${name}`,
5+
* which is a part of the URL, e.g. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
6+
* You can view these extensions using the command `Extensions: Show Recommended Extensions`.
7+
*/
8+
"recommendations": [
9+
"editorconfig.editorconfig", // EditorConfig
10+
"bmewburn.vscode-intelephense-client", // PHP Intelephense
11+
"dbaeumer.vscode-eslint", // ESLint
12+
"esbenp.prettier-vscode", // Prettier - Code formatter
13+
"obliviousharmony.vscode-php-codesniffer", // PHP_CodeSniffer
14+
"stylelint.vscode-stylelint", // Stylelint
15+
"TypeScriptTeam.native-preview" // Native TypeScript preview
16+
]
17+
}

‎.vscode/settings.dist.jsonc‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// This is a managed VS Code settings file.
2+
// While the first line is present, opening the folder replaces this file with `.vscode/settings.dist.jsonc`.
3+
// To customize these settings and keep your changes, delete the first line.
4+
{
5+
// Define schema to allow auto-completion.
6+
"$schema": "vscode://schemas/settings/workspace",
7+
// Don't show these files in VS Code.
8+
"files.exclude": {
9+
"**/.DS_Store/**": true,
10+
},
11+
// Don't search these files in VS Code.
12+
"search.exclude": {
13+
"**/.cache/**": true,
14+
"**/build/**": true,
15+
"**/build-module/**": true,
16+
"**/build-types/**": true,
17+
"**/build-style/**": true,
18+
"**/node_modules/**": true,
19+
"**/vendor/**": true,
20+
},
21+
// Use TypeScript from the workspace instead of VS Code's built-in TypeScript version.
22+
"js/ts.tsdk.path": "tools/build-scripts/node_modules/@typescript/native/lib",
23+
// Use Native TypeScript.
24+
"js/ts.experimental.useTsgo": true,
25+
// Use ESLint, Prettier and Stylelint from the workspaces that declare them.
26+
"eslint.nodePath": "tools/eslint/node_modules",
27+
"prettier.prettierPath": "packages/prettier-config/node_modules/prettier",
28+
"stylelint.stylelintPath": "tools/stylelint/node_modules/stylelint",
29+
// Show suppressed ESLint violations as hints.
30+
"eslint.bulkSuppression.enable": true,
31+
"eslint.bulkSuppression.location": "tools/eslint/suppressions.json",
32+
"eslint.bulkSuppression.severity": "hint",
33+
// Custom settings for PHP files.
34+
"[php]": {
35+
// Ensure that PHP files are formatted with PHPCS.
36+
"editor.formatOnSave": true,
37+
"editor.defaultFormatter": "obliviousharmony.vscode-php-codesniffer",
38+
},
39+
"intelephense.environment.phpVersion": "7.4.0",
40+
// Don't run Intelephense on these files.
41+
"intelephense.files.exclude": [
42+
"**/.cache/**",
43+
"**/.git/**",
44+
"**/.history/**",
45+
"**/build/**",
46+
"**/build-module/**",
47+
"**/build-types/**",
48+
"**/build-style/**",
49+
"**/node_modules/**",
50+
"**/vendor/**",
51+
],
52+
"phpCodeSniffer.autoExecutable": true,
53+
"phpCodeSniffer.standard": "Automatic",
54+
// Have PHPCS ignore these files.
55+
"phpCodeSniffer.exclude": [
56+
"**/.git/**",
57+
"**/.svn/**",
58+
"**/.hg/**",
59+
"**/.cache/**",
60+
"**/build/**",
61+
"**/node_modules/**",
62+
"**/vendor/**",
63+
],
64+
// Custom settings for JavaScript and TypeScript files.
65+
"[javascript][javascriptreact][typescript][typescriptreact]": {
66+
"editor.formatOnSave": false,
67+
"editor.defaultFormatter": "esbenp.prettier-vscode",
68+
},
69+
// Run Code Actions for the editor.
70+
"editor.codeActionsOnSave": {
71+
"source.fixAll.eslint": "explicit",
72+
"source.fixAll.stylelint": "explicit",
73+
},
74+
// Custom settings for CSS, SCSS, and SASS files.
75+
"[css][scss][sass]": {
76+
"editor.formatOnSave": false,
77+
"editor.defaultFormatter": "stylelint.vscode-stylelint",
78+
},
79+
"stylelint.validate": [ "css", "postcss", "scss" ],
80+
}

‎.vscode/tasks.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
// See https://go.microsoft.com/fwlink/?LinkId=733558
3+
// for the documentation about the tasks.json format
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"label": "Install VS Code settings",
8+
"type": "shell",
9+
"command": "npm",
10+
"args": [
11+
"run",
12+
"install-vscode-settings",
13+
"--workspace",
14+
"@wordpress/monorepo-tools"
15+
],
16+
"runOptions": {
17+
"runOn": "folderOpen"
18+
},
19+
"problemMatcher": [],
20+
"presentation": {
21+
"reveal": "silent",
22+
"close": true
23+
}
24+
}
25+
]
26+
}

‎docs/contributors/code/getting-started-with-code-contribution.md‎

Lines changed: 5 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -216,83 +216,11 @@ We recommend configuring your editor to automatically check for syntax and lint
216216

217217
### Visual Studio Code
218218

219-
If you use Visual Studio Code, the following extensions and workspace settings can help the editor use the same linting, formatting, PHP, and TypeScript tooling as the Gutenberg repository. These settings are optional and should live in your local `.vscode/settings.json` file. Do not commit your personal workspace settings; add `.vscode/settings.json` to your [global gitignore file](https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files#configuring-ignored-files-for-all-repositories-on-your-computer) if needed.
220-
221-
Recommended extensions:
222-
223-
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=editorconfig.editorconfig)
224-
- [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)
225-
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
226-
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
227-
- [PHP_CodeSniffer](https://marketplace.visualstudio.com/items?itemName=obliviousharmony.vscode-php-codesniffer)
228-
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
229-
- [Native TypeScript Preview](https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.native-preview)
230-
231-
You can start with this workspace settings file:
232-
233-
```jsonc
234-
{
235-
"search.exclude": {
236-
"**/.cache/**": true,
237-
"**/build/**": true,
238-
"**/build-module/**": true,
239-
"**/build-types/**": true,
240-
"**/build-style/**": true,
241-
"**/node_modules/**": true,
242-
"**/vendor/**": true
243-
},
244-
// Use TypeScript from the workspace instead of VS Code's built-in TypeScript version.
245-
"js/ts.tsdk.path": "tools/build-scripts/node_modules/@typescript/native/lib",
246-
// Use ESLint, Prettier and Stylelint from the respective paths.
247-
"eslint.nodePath": "tools/eslint/node_modules",
248-
"prettier.prettierPath": "packages/prettier-config/node_modules/prettier",
249-
"stylelint.stylelintPath": "tools/stylelint/node_modules/stylelint",
250-
"[php]": {
251-
"editor.formatOnSave": true,
252-
"editor.defaultFormatter": "obliviousharmony.vscode-php-codesniffer"
253-
},
254-
"eslint.bulkSuppression.enable": true,
255-
"eslint.bulkSuppression.location": "tools/eslint/suppressions.json",
256-
"eslint.bulkSuppression.severity": "hint",
257-
"intelephense.environment.phpVersion": "7.4.0",
258-
"intelephense.files.exclude": [
259-
"**/.cache/**",
260-
"**/.git/**",
261-
"**/.history/**",
262-
"**/build/**",
263-
"**/build-module/**",
264-
"**/build-types/**",
265-
"**/build-style/**",
266-
"**/node_modules/**",
267-
"**/vendor/**"
268-
],
269-
"phpCodeSniffer.autoExecutable": true,
270-
"phpCodeSniffer.standard": "Automatic",
271-
"phpCodeSniffer.exclude": [
272-
"**/.git/**",
273-
"**/.svn/**",
274-
"**/.hg/**",
275-
"**/.cache/**",
276-
"**/build/**",
277-
"**/node_modules/**",
278-
"**/vendor/**"
279-
],
280-
"[javascript][javascriptreact][typescript][typescriptreact]": {
281-
"editor.formatOnSave": false,
282-
"editor.defaultFormatter": "esbenp.prettier-vscode"
283-
},
284-
"editor.codeActionsOnSave": {
285-
"source.fixAll.eslint": "explicit",
286-
"source.fixAll.stylelint": "explicit"
287-
},
288-
"[css][scss][sass]": {
289-
"editor.formatOnSave": false,
290-
"editor.defaultFormatter": "stylelint.vscode-stylelint"
291-
},
292-
"stylelint.validate": [ "css", "postcss", "scss" ],
293-
"js/ts.experimental.useTsgo": true
294-
}
295-
```
219+
If you use Visual Studio Code, the repository ships a managed workspace configuration so the editor uses the same linting, formatting, PHP, and TypeScript tooling as the Gutenberg repository. The first time you open the folder, VS Code prompts you to install the [recommended extensions](https://github.com/WordPress/gutenberg/blob/HEAD/.vscode/extensions.json) and to allow an automatic task that copies [`.vscode/settings.dist.jsonc`](https://github.com/WordPress/gutenberg/blob/HEAD/.vscode/settings.dist.jsonc) to `.vscode/settings.json`. Allow both. When the TypeScript 7 extension then asks whether to use the TypeScript 7 tsdk this workspace configures, choose **Allow**; otherwise it keeps using its bundled version.
220+
221+
The installer replaces `settings.json` whenever its first line is `// This is a managed VS Code settings file.`, so edits made there are lost the next time the folder opens or the installer runs. To keep your own settings, delete that line; the installer then leaves the file alone. You can re-run it at any time from the Command Palette via **Tasks: Run Task → Install VS Code settings**.
222+
223+
The settings point the TypeScript, ESLint, Prettier, and Stylelint extensions at the workspaces that install them, because those tools are not installed in the root `node_modules`. If you maintain your own settings, copy those paths from the template.
296224

297225
### EditorConfig
298226

‎tools/monorepo/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ See the TypeScript section of [`packages/README.md`](../../packages/README.md) f
2929

3030
`npm run --workspace @wordpress/monorepo-tools list-experimental-apis` prints a Markdown list of every `__experimental` API in `packages/` and `lib/`, each linked to a GitHub search for it. Release leads run it to audit experimental APIs ahead of a major WordPress release, as in [the WordPress 6.2 audit](https://github.com/WordPress/gutenberg/issues/47196).
3131

32+
## VS Code settings
33+
34+
`npm run --workspace @wordpress/monorepo-tools install-vscode-settings` copies `.vscode/settings.dist.jsonc` to `.vscode/settings.json`, unless that file no longer starts with `// This is a managed VS Code settings file.` A VS Code task runs it when the folder opens.
35+
3236
## Admin design tokens experiment
3337

3438
`wpds/generate-admin-scheme-tokens.mjs` writes the per-colour-scheme design token stylesheet for the admin design tokens experiment, `lib/experimental/wpds-admin/css/05-scheme-tokens.css`. Run it with `npm run wpds:admin-scheme-tokens --workspace @wordpress/monorepo-tools` after changing the theme's colour ramps or the admin colour schemes. It is temporary; the generated file's header says what replaces it.

‎tools/monorepo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"access": "public"
3939
},
4040
"scripts": {
41+
"install-vscode-settings": "node scripts/install-vscode-settings.mts",
4142
"list-experimental-apis": "node scripts/list-experimental-apis.mts",
4243
"wpds:admin-scheme-tokens": "node wpds/generate-admin-scheme-tokens.mjs"
4344
}

‎tools/monorepo/scripts/install-vscode-settings.mts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/**
2+
* Install repo-recommended VS Code settings.
3+
*
4+
* Cross-platform replacement for a shell script: invoked from `.vscode/tasks.json`
5+
* on folder open. Runs on Windows, macOS, and Linux without a POSIX shell.
6+
*
7+
* Exit codes:
8+
* 0: All is well (or user has custom settings we shouldn't touch)
9+
* 1: Repo settings template is missing
10+
* 2: Settings file creation failed
11+
*/
12+
13+
import { readFileSync, copyFileSync, existsSync } from 'node:fs';
14+
import path from 'node:path';
15+
import { fileURLToPath } from 'node:url';
16+
17+
const REPO_ROOT = path.resolve(
18+
path.dirname( fileURLToPath( import.meta.url ) ),
19+
'../../..'
20+
);
21+
const templateFile = path.join( REPO_ROOT, '.vscode', 'settings.dist.jsonc' );
22+
const destFile = path.join( REPO_ROOT, '.vscode', 'settings.json' );
23+
const managedComment = '// This is a managed VS Code settings file.';
24+
25+
if ( ! existsSync( templateFile ) ) {
26+
console.error( 'Repo settings template is missing; aborting.' );
27+
process.exit( 1 );
28+
}
29+
30+
const template = readFileSync( templateFile, 'utf8' );
31+
32+
if ( existsSync( destFile ) ) {
33+
const current = readFileSync( destFile, 'utf8' );
34+
if ( current === template ) {
35+
console.log( 'Managed settings are up to date; no changes needed.' );
36+
process.exit( 0 );
37+
}
38+
if ( ! current.startsWith( managedComment ) ) {
39+
console.log( 'Custom settings file; aborting.' );
40+
process.exit( 0 );
41+
}
42+
}
43+
44+
try {
45+
copyFileSync( templateFile, destFile );
46+
} catch ( err ) {
47+
console.error( 'Error copying settings into place!', err );
48+
process.exit( 2 );
49+
}
50+
51+
if ( readFileSync( destFile, 'utf8' ) !== template ) {
52+
console.error( 'Error copying settings into place!' );
53+
process.exit( 2 );
54+
}
55+
56+
console.log( 'Copied managed settings into place.' );

0 commit comments

Comments
 (0)