Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ phpcs.xml
phpunit.xml
phpunit-watcher.yml
.tool-versions
/.vscode/settings.json
test/storybook-playwright/test-results
test/storybook-playwright/specs/__snapshots__
test/storybook-playwright/specs/*-snapshots/**
Expand Down
17 changes: 17 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
/**
* List of recommended extensions to use for this workspace.
* The identifier of an extension is always `${publisher}.${name}`,
* which is a part of the URL, e.g. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
* You can view these extensions using the command `Extensions: Show Recommended Extensions`.
*/
"recommendations": [
"editorconfig.editorconfig", // EditorConfig
"bmewburn.vscode-intelephense-client", // PHP Intelephense
"dbaeumer.vscode-eslint", // ESLint
"esbenp.prettier-vscode", // Prettier - Code formatter
"obliviousharmony.vscode-php-codesniffer", // PHP_CodeSniffer
"stylelint.vscode-stylelint", // Stylelint
"TypeScriptTeam.native-preview" // Native TypeScript preview
]
Comment thread
manzoorwanijk marked this conversation as resolved.
}
80 changes: 80 additions & 0 deletions .vscode/settings.dist.jsonc
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
// This is a managed VS Code settings file.
// While the first line is present, opening the folder replaces this file with `.vscode/settings.dist.jsonc`.
// To customize these settings and keep your changes, delete the first line.
{
// Define schema to allow auto-completion.
"$schema": "vscode://schemas/settings/workspace",
// Don't show these files in VS Code.
"files.exclude": {
"**/.DS_Store/**": true,
},
// Don't search these files in VS Code.
"search.exclude": {
"**/.cache/**": true,
"**/build/**": true,
"**/build-module/**": true,
"**/build-types/**": true,
"**/build-style/**": true,
"**/node_modules/**": true,
"**/vendor/**": true,
},
// Use TypeScript from the workspace instead of VS Code's built-in TypeScript version.
"js/ts.tsdk.path": "tools/build-scripts/node_modules/@typescript/native/lib",
// Use Native TypeScript.
"js/ts.experimental.useTsgo": true,
// Use ESLint, Prettier and Stylelint from the workspaces that declare them.
"eslint.nodePath": "tools/eslint/node_modules",
"prettier.prettierPath": "packages/prettier-config/node_modules/prettier",
"stylelint.stylelintPath": "tools/stylelint/node_modules/stylelint",
// Show suppressed ESLint violations as hints.
"eslint.bulkSuppression.enable": true,
"eslint.bulkSuppression.location": "tools/eslint/suppressions.json",
"eslint.bulkSuppression.severity": "hint",
// Custom settings for PHP files.
"[php]": {
// Ensure that PHP files are formatted with PHPCS.
"editor.formatOnSave": true,
"editor.defaultFormatter": "obliviousharmony.vscode-php-codesniffer",
},
"intelephense.environment.phpVersion": "7.4.0",
// Don't run Intelephense on these files.
"intelephense.files.exclude": [
"**/.cache/**",
"**/.git/**",
"**/.history/**",
"**/build/**",
"**/build-module/**",
"**/build-types/**",
"**/build-style/**",
"**/node_modules/**",
"**/vendor/**",
],
"phpCodeSniffer.autoExecutable": true,
"phpCodeSniffer.standard": "Automatic",
// Have PHPCS ignore these files.
"phpCodeSniffer.exclude": [
"**/.git/**",
"**/.svn/**",
"**/.hg/**",
"**/.cache/**",
"**/build/**",
"**/node_modules/**",
"**/vendor/**",
],
// Custom settings for JavaScript and TypeScript files.
"[javascript][javascriptreact][typescript][typescriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
// Run Code Actions for the editor.
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "explicit",
},
// Custom settings for CSS, SCSS, and SASS files.
"[css][scss][sass]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "stylelint.vscode-stylelint",
},
"stylelint.validate": [ "css", "postcss", "scss" ],
}
26 changes: 26 additions & 0 deletions .vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Install VS Code settings",
"type": "shell",
"command": "npm",
"args": [
"run",
"install-vscode-settings",
"--workspace",
"@wordpress/monorepo-tools"
],
"runOptions": {
"runOn": "folderOpen"
},
"problemMatcher": [],
"presentation": {
"reveal": "silent",
"close": true
}
}
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -216,83 +216,11 @@ We recommend configuring your editor to automatically check for syntax and lint

### Visual Studio Code

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.

Recommended extensions:

- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=editorconfig.editorconfig)
- [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [PHP_CodeSniffer](https://marketplace.visualstudio.com/items?itemName=obliviousharmony.vscode-php-codesniffer)
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
- [Native TypeScript Preview](https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.native-preview)

You can start with this workspace settings file:

```jsonc
{
"search.exclude": {
"**/.cache/**": true,
"**/build/**": true,
"**/build-module/**": true,
"**/build-types/**": true,
"**/build-style/**": true,
"**/node_modules/**": true,
"**/vendor/**": true
},
// Use TypeScript from the workspace instead of VS Code's built-in TypeScript version.
"js/ts.tsdk.path": "tools/build-scripts/node_modules/@typescript/native/lib",
// Use ESLint, Prettier and Stylelint from the respective paths.
"eslint.nodePath": "tools/eslint/node_modules",
"prettier.prettierPath": "packages/prettier-config/node_modules/prettier",
"stylelint.stylelintPath": "tools/stylelint/node_modules/stylelint",
"[php]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "obliviousharmony.vscode-php-codesniffer"
},
"eslint.bulkSuppression.enable": true,
"eslint.bulkSuppression.location": "tools/eslint/suppressions.json",
"eslint.bulkSuppression.severity": "hint",
"intelephense.environment.phpVersion": "7.4.0",
"intelephense.files.exclude": [
"**/.cache/**",
"**/.git/**",
"**/.history/**",
"**/build/**",
"**/build-module/**",
"**/build-types/**",
"**/build-style/**",
"**/node_modules/**",
"**/vendor/**"
],
"phpCodeSniffer.autoExecutable": true,
"phpCodeSniffer.standard": "Automatic",
"phpCodeSniffer.exclude": [
"**/.git/**",
"**/.svn/**",
"**/.hg/**",
"**/.cache/**",
"**/build/**",
"**/node_modules/**",
"**/vendor/**"
],
"[javascript][javascriptreact][typescript][typescriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "explicit"
},
"[css][scss][sass]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"stylelint.validate": [ "css", "postcss", "scss" ],
"js/ts.experimental.useTsgo": true
}
```
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.

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**.

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.

### EditorConfig

Expand Down
4 changes: 4 additions & 0 deletions tools/monorepo/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ See the TypeScript section of [`packages/README.md`](../../packages/README.md) f

`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).

## VS Code settings

`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.

## Admin design tokens experiment

`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.
1 change: 1 addition & 0 deletions tools/monorepo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"access": "public"
},
"scripts": {
"install-vscode-settings": "node scripts/install-vscode-settings.mts",
"list-experimental-apis": "node scripts/list-experimental-apis.mts",
"wpds:admin-scheme-tokens": "node wpds/generate-admin-scheme-tokens.mjs"
}
Expand Down
56 changes: 56 additions & 0 deletions tools/monorepo/scripts/install-vscode-settings.mts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/**
* Install repo-recommended VS Code settings.
*
* Cross-platform replacement for a shell script: invoked from `.vscode/tasks.json`
* on folder open. Runs on Windows, macOS, and Linux without a POSIX shell.
*
* Exit codes:
* 0: All is well (or user has custom settings we shouldn't touch)
* 1: Repo settings template is missing
* 2: Settings file creation failed
*/

import { readFileSync, copyFileSync, existsSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const REPO_ROOT = path.resolve(
path.dirname( fileURLToPath( import.meta.url ) ),
'../../..'
);
const templateFile = path.join( REPO_ROOT, '.vscode', 'settings.dist.jsonc' );
const destFile = path.join( REPO_ROOT, '.vscode', 'settings.json' );
const managedComment = '// This is a managed VS Code settings file.';

if ( ! existsSync( templateFile ) ) {
console.error( 'Repo settings template is missing; aborting.' );
process.exit( 1 );
}

const template = readFileSync( templateFile, 'utf8' );

if ( existsSync( destFile ) ) {
const current = readFileSync( destFile, 'utf8' );
if ( current === template ) {
console.log( 'Managed settings are up to date; no changes needed.' );
process.exit( 0 );
}
if ( ! current.startsWith( managedComment ) ) {
console.log( 'Custom settings file; aborting.' );
process.exit( 0 );
}
}

try {
copyFileSync( templateFile, destFile );
} catch ( err ) {
console.error( 'Error copying settings into place!', err );
process.exit( 2 );
}

if ( readFileSync( destFile, 'utf8' ) !== template ) {
console.error( 'Error copying settings into place!' );
process.exit( 2 );
}

console.log( 'Copied managed settings into place.' );
Loading