diff --git a/README.md b/README.md index 9e2d19e1e3965..3a2ec73733bd3 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ [![Open bugs](https://img.shields.io/badge/Open-bugs-red.svg?style=flat-curved)](https://github.com/eclipse-theia/theia/labels/bug) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/eclipse-theia/theia) -Eclipse Theia is an extensible framework to develop full-fledged multi-language Cloud & Desktop IDEs and tools with state-of-the-art web technologies. +Eclipse Theia is an extensible framework to develop full-fledged multi-language Cloud & Desktop IDEs and tools with state-of-the-art web technologies. diff --git a/doc/Developing.md b/doc/Developing.md index be4fc0c7f422a..aa2f458af821d 100644 --- a/doc/Developing.md +++ b/doc/Developing.md @@ -371,7 +371,7 @@ You should be able to see message of `[${server-name}: ${server-PID}]: IPC start ### Debug the plugin host - Pass `--hosted-plugin-inspect=9339` arg to the backend server from the command line. - - Instead you can run `Launch Browser Backend` launch configuration which is already pre-configured. + - Instead, you can run `Launch Browser Backend` launch configuration which is already pre-configured. - Open the debug view and run the `Attach to Plugin Host` launch configuration. - It connects to the plugin host if at least one extension is detected, otherwise it timeouts after 60s. - If you want to debug the activation then enable `stopOnEntry` flag. @@ -382,7 +382,7 @@ You should be able to see message of `[${server-name}: ${server-PID}]: IPC start [click for base article](https://github.com/eclipse-theia/theia/issues/3251#issuecomment-468166533) -The following launch configuration is meant to be used when the Theia project is opened as the main project in vscode, the following launch configuration is added inside .vscode/launch.json. +The following launch configuration is meant to be used when the Theia project is opened as the main project in VS Code, the following launch configuration is added inside .vscode/launch.json. - The source repository of your plugin is expected under your `${workspaceFolder}/plugins` folder - You can start the frontend from URL: http://localhost:3030 - It's suggested to update your frontend launch configuration URL to open your favorite target project in a second launch @@ -566,10 +566,10 @@ errors while building, testing or running the application then; try to disable (or uninstall) your anti-malware software. See [here](https://github.com/npm/npm/issues/13461#issuecomment-282556281). - Still having issues on Windows? File a [bug]. We are working on Linux or OS X - operating systems. Hence we are more than happy to receive any Windows-related + operating systems. Hence, we are more than happy to receive any Windows-related feedbacks, [bug](https://github.com/eclipse-theia/theia/issues) reports. -If you're still struggling with the build but you use Windows 10, the you can enable the `Windows Subsystem for Linux` and you can get a Linux distro for free. +If you're still struggling with the build, but you use Windows 10, then you can enable the `Windows Subsystem for Linux` and you can get a Linux distro for free. ### macOS diff --git a/doc/Migration.md b/doc/Migration.md index 0f832c6a28066..7beb17420a0ec 100644 --- a/doc/Migration.md +++ b/doc/Migration.md @@ -49,9 +49,9 @@ For example: #### Disabled node integration and added context isolation flag in Electron renderer -This also means that `electron-remote` can no longer be used in components in `electron-frontend` or `electron-common`. In order to use electron-related functionality from the browser, you need to expose an API via a preload script (see https://www.electronjs.org/docs/latest/tutorial/context-isolation). to achieve this from a Theia extension, you need to follow these steps: +This also means that `electron-remote` can no longer be used in components in `electron-frontend` or `electron-common`. In order to use electron-related functionality from the browser, you need to expose an API via a preload script (see https://www.electronjs.org/docs/latest/tutorial/context-isolation). To achieve this from a Theia extension, you need to follow these steps: -1. Define the API interface and declare an api variable on the global `window` variable. See `packages/filesystem/electron-common/electron-api.ts` for an example +1. Define the API interface and declare an API variable on the global `window` variable. See `packages/filesystem/electron-common/electron-api.ts` for an example 2. Write a preload script module that implements the API on the renderer ("browser") side and exposes the API via `exposeInMainWorld`. You'll need to expose the API in an exported function called `preload()`. See `packages/filesystem/electron-browser/preload.ts` for an example. 3. Declare a `theiaExtensions` entry pointing to the preload script like so: ``` @@ -70,7 +70,7 @@ See `/packages/filesystem/package.json` for an example } ``` -If you are using nodejs API in your electron browser-side code you will also have to move the code outside of the renderer process, for example +If you are using NodeJS API in your electron browser-side code you will also have to move the code outside of the renderer process, for example by setting up an API like described above, or, for example, by using a back-end service. ### v1.35.0 @@ -186,7 +186,7 @@ For more details, see the socket.io documentation about [using multiple nodes](h #### Resolutions -Due to a [colors.js](https://github.com/Marak/colors.js) issue, a [resolution](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) may be necessary for your application in order to workaround the problem: +Due to a [colors.js](https://github.com/Marak/colors.js) issue, a [resolution](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) may be necessary for your application in order to work around the problem: For example: @@ -267,7 +267,7 @@ You can delete this whole block and replace it by the following: #### Keytar -- [`keytar`](https://github.com/atom/node-keytar) was added as a dependency for the secrets API. and may require `libsecret` in your particular distribution to be functional: +- [`keytar`](https://github.com/atom/node-keytar) was added as a dependency for the secrets API. It may require `libsecret` in your particular distribution to be functional: - Debian/Ubuntu: `sudo apt-get install libsecret-1-dev` - Red Hat-based: `sudo yum install libsecret-devel` - Arch Linux: `sudo pacman -S libsecret` diff --git a/doc/Plugin-API.md b/doc/Plugin-API.md index 77a0167d44bde..729619fc5b04d 100644 --- a/doc/Plugin-API.md +++ b/doc/Plugin-API.md @@ -25,8 +25,8 @@ The report can be found here: - [plugin](https://github.com/eclipse-theia/theia/tree/master/packages/plugin): Contains the API declaration of the theia plugin namespace - [plugin-ext](https://github.com/eclipse-theia/theia/tree/master/packages/plugin-ext): Contains both the mechanisms for running plugins and providing them with an API namespace and the implementation of the ‘theia’ plugin API -- [plugin-ext-vscode](https://github.com/eclipse-theia/theia/tree/master/packages/plugin-ext-vscode): Contains an implementation of the vscode plugin API. -Since vscode and Theia API’s are largely compatible, the initialization passes on the Theia plugin API and overrides a few members in the api object to be compatible to vscode extensions (see [plugin-ext-vscode/src/node/plugin-vscode-init.ts](https://github.com/eclipse-theia/theia/blob/master/packages/plugin-ext-vscode/src/node/plugin-vscode-init.ts)) +- [plugin-ext-vscode](https://github.com/eclipse-theia/theia/tree/master/packages/plugin-ext-vscode): Contains an implementation of the VS Code plugin API. +Since VS Code and Theia APIs are largely compatible, the initialization passes on the Theia plugin API and overrides a few members in the API object to be compatible to VS Code extensions (see [plugin-ext-vscode/src/node/plugin-vscode-init.ts](https://github.com/eclipse-theia/theia/blob/master/packages/plugin-ext-vscode/src/node/plugin-vscode-init.ts)) ## API definition and exposure @@ -167,19 +167,19 @@ Another example to browse are the [TaskExtImpl](https://github.com/eclipse-theia ### Adding new types New classes and other types such as enums are usually implemented in [plugin-ext/src/plugin/types-impl.ts](https://github.com/eclipse-theia/theia/blob/master/packages/plugin-ext/src/plugin/types-impl.ts). -They can be added here and the added to the api object created in the API factory. +They can be added here and the added to the API object created in the API factory. ## Additional Links Talk by Thomas Maeder on writing plugin API: -Adding a new plugin api namespace outside of theia plugin api: [how-to-add-new-plugin-namespace.md](https://github.com/eclipse-theia/theia/blob/master/packages/plugin-ext/doc/how-to-add-new-plugin-namespace.md) +Adding a new plugin API namespace outside of theia plugin API: [how-to-add-new-plugin-namespace.md](https://github.com/eclipse-theia/theia/blob/master/packages/plugin-ext/doc/how-to-add-new-plugin-namespace.md) Theia Plugin Implementation wiki page: Writing Plugin API wiki page in the che wiki: -Theia vs VS Code API Comparator: +Theia versus VS Code API Comparator: Theia's extension mechanisms: VS Code extensions, Theia extensions, and Theia plugins: diff --git a/doc/Publishing.md b/doc/Publishing.md index 8d9a032d64685..72e8cb14fa21f 100644 --- a/doc/Publishing.md +++ b/doc/Publishing.md @@ -20,8 +20,8 @@ Before a release (Monday of the same week), it is a good time to perform a `yarn Updating the `yarn.lock` helps identify potential problems with our dependency version ranges, and is more representative of what downstream adopters may pull when building their own applications. To successfully complete a `yarn upgrade`, one must: -- perform `yarn upgrade` at the root of the repository. -- fix any compilation errors, typing issues, and failing tests that may be introduced. +- Perform `yarn upgrade` at the root of the repository. +- Fix any compilation errors, typing issues, and failing tests that may be introduced. ## Announce Release @@ -51,7 +51,7 @@ Here is an [example](https://community.theia-ide.org/t/0-11-0-release/373). ## Pre-Publishing Steps -Before publishing it's important to make sure that a functional Theia application can be made from the latest `next` version of the platform. Else we will have problems with "latest" after publishing. +Before publishing, it's important to make sure that a functional Theia application can be made from the latest `next` version of the platform. Else we will have problems with "latest" after publishing. - Update the forum release post to ask committers to hold-off merging any PR while the release is ongoing. @@ -95,11 +95,11 @@ The next step is to create a new [**Release**](https://github.com/eclipse-theia/ This will create a new `tag`, `release` with the appropriate assets (`.zip`, `tar.gz`) and notify subscribers. In order to create a new release, one must: -- navigate to the releases [page](https://github.com/eclipse-theia/theia/releases). -- select the _"Draft a new release"_ button. -- input the appropriate release `tag` version (ex: `v1.2.0`). -- input the appropriate release `name` (ex: `Eclipse Theia v1.2.0`). -- include a release `description` to include a reference to the `changelog` at the respective `sha` and release version: +- Navigate to the releases [page](https://github.com/eclipse-theia/theia/releases). +- Select the _"Draft a new release"_ button. +- Input the appropriate release `tag` version (ex: `v1.2.0`). +- Input the appropriate release `name` (ex: `Eclipse Theia v1.2.0`). +- Include a release `description` to include a reference to the `changelog` at the respective `sha` and release version: ```md [Release Changelog](https://github.com/eclipse-theia/theia/blob/${sha}/CHANGELOG.md#${changelog-version-header}) @@ -111,13 +111,13 @@ In order to create a new release, one must: [Release Changelog](https://github.com/eclipse-theia/theia/blob/2aa2fa1ab091ec36ef851c4e364b322301cddb40/CHANGELOG.md#v120) ``` -- include a reference to the migration guide in the release description: +- Include a reference to the migration guide in the release description: ```md [Migration Guide](https://github.com/eclipse-theia/theia/blob/master/doc/Migration.md) ``` -- select _"Publish Release"_ bottom at the bottom of the page. +- Select _"Publish Release"_ bottom at the bottom of the page. For additional information, please consult the official GitHub documentation regarding [creating releases](https://help.github.com/en/github/administering-a-repository/managing-releases-in-a-repository#creating-a-release). @@ -133,7 +133,7 @@ Login to [Eclipse Foundation Theia project page]( https://projects.eclipse.org/p Select the edit tab - In "The Basic" section - - Select the "Type A" in the IP Due Diligence type. + - Select the "Type A" in the IP Due Diligence type. - In the "Project Plan" - Deliverables section - Paste the content of the changelog.md. diff --git a/doc/api-management.md b/doc/api-management.md index d1093089ccd48..7b75536d82437 100644 --- a/doc/api-management.md +++ b/doc/api-management.md @@ -74,7 +74,7 @@ export interface StableInterface { - All new APIs should always be added as **experimental** since it's almost impossible to get [stable API](#stable) right the first time. - Experimental APIs don't require the stability tag, but if a new member is added to [stable API](#stable) then it should be explicitly annotated. -- Experimental APIs don't require extensive documentation. It does not mean that one should not document not obvious parts. +- Experimental APIs don't require extensive documentation. It does not mean that one shouldn't document unobvious parts. - Experimental APIs don't follow [semver](https://semver.org/#spec-item-8) semantic. - Experimental APIs could be changed or removed without [the deprecation cycle](#deprecation) if they were not widely adopted. - Adoption should be measured by the number of internal clients or based on the feedback of Theia contributors and committers. diff --git a/doc/coding-guidelines.md b/doc/coding-guidelines.md index c6dcbabb8b52c..0e5185913cc2d 100644 --- a/doc/coding-guidelines.md +++ b/doc/coding-guidelines.md @@ -30,7 +30,7 @@ const terminalWidgetId = 1; * [7.](#file-name) Name files after the main type it exports. > Why? It should be easy to find a type by a file name. -* [7.1](#one-large-class-per-file) Avoid one file with many large classes; put each class in its own file. +* [7.1](#one-large-class-per-file) Avoid one file with many large classes; put each class in its own file. > Why? It should be easy to find a class by a file name. * [8.](#unique-names) Give unique names to types and files. Use specific names to achieve it. @@ -124,7 +124,7 @@ Use `undefined`; do not use `null`. * [1.](#nls-localize) Always localize user-facing text with the `nls.localize(key, defaultValue, ...args)` function. -> What is user-facing text? Any strings that are hardcoded (not calculated) that could be in any way visible to the user, be it labels for commands and menus, messages/notifications/dialogs, quick-input placeholders or preferences. +> What is user-facing text? Any strings that are hard-coded (not calculated) that could be in any way visible to the user, be it labels for commands and menus, messages/notifications/dialogs, quick-input placeholders or preferences. * [1.1.](#nls-localize-args) Parameters for messages should be passed as the `args` of the `localize` function. They are inserted at the location of the placeholders - in the form of `{\d+}` - in the localized text. E.g. `{0}` will be replaced with the first `arg`, `{1}` with the second, etc. @@ -138,7 +138,7 @@ nls.localize('hello', 'Hello there {0}.', name); ``` -* [1.2.](#nls-localize-by-default) The `nls.localizeByDefault` function automatically finds the translation key for vscode's language packs just by using the default value as its argument and translates it into the currently used locale. If the `nls.localizeByDefault` function is not able to find a key for the supplied default value, a warning will be shown in the browser console. If there is no appropriate translation in VSCode, just use the `nls.localize` function with a new key using the syntax `theia//`. +* [1.2.](#nls-localize-by-default) The `nls.localizeByDefault` function automatically finds the translation key for VS Code's language packs just by using the default value as its argument and translates it into the currently used locale. If the `nls.localizeByDefault` function is not able to find a key for the supplied default value, a warning will be shown in the browser console. If there is no appropriate translation in VSCode, just use the `nls.localize` function with a new key using the syntax `theia//`. ```ts // bad @@ -160,7 +160,7 @@ command = Command.toLocalizedCommand({ id: key, label: defaultValue }); ## Style * Use arrow functions `=>` over anonymous function expressions. -* Only surround arrow function parameters when necessary. For example, `(x) => x + x` is wrong but the following are correct: +* Only surround arrow function parameters when necessary. For example, `(x) => x + x` is wrong, but the following are correct: ```javascript x => x + x @@ -216,7 +216,7 @@ bind(CommandContribution).to(LoggerFrontendContribution).inSingletonScope(); ```ts // bad export function createWebSocket(url: string): WebSocket { - ... + ... } // good @@ -301,11 +301,11 @@ export namespace DirtyDiffModel { } ``` -* [5.](#no-multi-inject) Don't use multi-inject, use `ContributionProvider` to inject multiple instances. +* [5.](#no-multi-inject) Don't use multi-inject, use `ContributionProvider` to inject multiple instances. > Why? > - `ContributionProvider` is a documented way to introduce contribution points. See `Contribution-Points`: https://www.theia-ide.org/docs/services_and_contributions > - If nothing is bound to an identifier, multi-inject resolves to `undefined`, not an empty array. `ContributionProvider` provides an empty array. -> - Multi-inject does not guarantee the same instances are injected if an extender does not use `inSingletonScope`. `ContributionProvider` caches instances to ensure uniqueness. +> - Multi-inject does not guarantee the same instances are injected if an extender does not use `inSingletonScope`. `ContributionProvider` caches instances to ensure uniqueness. ## CSS @@ -321,9 +321,9 @@ export namespace DirtyDiffModel { * [1.](#theming-no-css-color-variables) Do not introduce CSS color variables. Implement `ColorContribution` and use `ColorRegistry.register` to register new colors. -* [2.](#theming-no-css-color-values) Do not introduce hardcoded color values in CSS. Instead refer to [VS Code colors](https://code.visualstudio.com/api/references/theme-color) in CSS by prefixing them with `--theia` and replacing all dots with dashes. For example `widget.shadow` color can be referred to in CSS with `var(--theia-widget-shadow)`. +* [2.](#theming-no-css-color-values) Do not introduce hard-coded color values in CSS. Instead, refer to [VS Code colors](https://code.visualstudio.com/api/references/theme-color) in CSS by prefixing them with `--theia` and replacing all dots with dashes. For example `widget.shadow` color can be referred to in CSS with `var(--theia-widget-shadow)`. -* [3.](#theming-derive-colors-from-vscode) Always derive new colors from existing [VS Code colors](https://code.visualstudio.com/api/references/theme-color). New colors can be derived from an existing color by plain reference, e.g. `dark: 'widget.shadow'`, or transformation, e.g. `dark: Color.lighten('widget.shadow', 0.4)`. +* [3.](#theming-derive-colors-from-vscode) Always derive new colors from existing [VS Code colors](https://code.visualstudio.com/api/references/theme-color). New colors can be derived from an existing color by plain reference, e.g. `dark: 'widget.shadow'`, or transformation, e.g. `dark: Color.lighten('widget.shadow', 0.4)`. > Why? Otherwise, there is no guarantee that new colors will fit well into new VSCode color themes. * [4.](#theming-theia-colors) Apply different color values only in concrete Theia themes, see [Light (Theia)](https://github.com/eclipse-theia/theia/blob/master/packages/monaco/data/monaco-themes/vscode/light_theia.json), [Dark (Theia)](https://github.com/eclipse-theia/theia/blob/master/packages/monaco/data/monaco-themes/vscode/dark_theia.json) and [High Contrast (Theia)](https://github.com/eclipse-theia/theia/blob/master/packages/monaco/data/monaco-themes/vscode/hc_theia.json) themes. @@ -344,7 +344,7 @@ export namespace DirtyDiffModel { * [1.](#no-bind-fn-in-event-handlers) Do not bind functions in event handlers. - Extract a React component if you want to pass state to an event handler function. -> Why? Because doing so creates a new instance of the event handler function on each render and breaks React element caching leading to rerendering and bad performance. +> Why? Because doing so creates a new instance of the event handler function on each render and breaks React element caching leading to re-rendering and bad performance. ```ts // bad @@ -401,7 +401,7 @@ class MyWidget extends ReactWidget { * [3.](#backend-fs-path) Use `FileUri.fsPath` to get a path on the backend from a URI. Never use it on the frontend. -* [4.](#explicit-uri-scheme) Always define an explicit scheme for a URI. +* [4.](#explicit-uri-scheme) Always define an explicit scheme for a URI. > Why? A URI without scheme will fall back to `file` scheme for now; in the future it will lead to a runtime error. * [5.](#frontend-path) Use `Path` Theia API to manipulate paths on the frontend. Don't use Node.js APIs like `path` module. Also see [the code organization guideline](code-organization.md). @@ -444,4 +444,4 @@ this.logger.info(``); // good console.info(``) ``` -> Why? All calls to console are intercepted on the frontend and backend and then forwarded to an `ILogger` instance already. The log level can be configured from the CLI: `theia start --log-level=debug`. \ No newline at end of file +> Why? All calls to console are intercepted on the frontend and backend and then forwarded to an `ILogger` instance already. The log level can be configured from the CLI: `theia start --log-level=debug`. diff --git a/examples/playwright/docs/DEVELOPING.md b/examples/playwright/docs/DEVELOPING.md index eb775b21a946f..dec51b290a66d 100644 --- a/examples/playwright/docs/DEVELOPING.md +++ b/examples/playwright/docs/DEVELOPING.md @@ -24,7 +24,7 @@ You may also use the `Launch Browser Backend` launch configuration in VS Code. ### Running the tests in VS Code via the Playwright extension -For quick and easy execution of tests in VS Code, we recommend to use the [VS Code Playwright extension (`ms-playwright.playwright`)](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). +For quick and easy execution of tests in VS Code, we recommend using the [VS Code Playwright extension (`ms-playwright.playwright`)](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). Once you have installed the VS Code Playwright test extension, open the *Test* view and click the `Run Tests` button on the top toolbar or the `Run Test` button for a particular test. It uses the default configuration with chromium as test profile by default. @@ -46,7 +46,7 @@ If you want to observe the execution of the tests in a browser, use `yarn ui-tes ### Watch the tests Run `yarn watch` in the root of this package to rebuild the test code after each change. -This ensures, that the executed tests are up to date also when running them with the [Playwright VS Code Extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). +This ensures, that the executed tests are up-to-date also when running them with the [Playwright VS Code Extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). ### Debugging the tests diff --git a/examples/playwright/docs/EXTENSIBILITY.md b/examples/playwright/docs/EXTENSIBILITY.md index ff20ea2b7fa83..63024ca66fe8f 100644 --- a/examples/playwright/docs/EXTENSIBILITY.md +++ b/examples/playwright/docs/EXTENSIBILITY.md @@ -45,7 +45,7 @@ await app.toolbar.clickItem1(); Many custom Theia applications add dedicated views, editors, or status indicators. To support these custom user interface elements in the testing framework, you can add dedicated page objects for them. -Typically these dedicated page objects for your custom user interface elements are subclasses of the generic classes, `TheiaView`, `TheiaEditor`, etc. +Typically, these dedicated page objects for your custom user interface elements are subclasses of the generic classes, `TheiaView`, `TheiaEditor`, etc. Consequently, they inherit the generic behavior of views or editors, such as activating or closing them, querying the title, check whether editors are dirty, etc. Let's take a custom view as an example. This custom view has a button that we want to be able to click. @@ -77,7 +77,7 @@ We have to specify the selectors for the tab and for the view container element Optionally we can specify a view name, which corresponds to the label in Theia's view menu. This information is enough to open, close, find and interact with the view. -Additionally we can add further custom methods for the specific actions and queries we want to use for our custom view. +Additionally, we can add further custom methods for the specific actions and queries we want to use for our custom view. As an example, `MyView` above introduces a method that allows to click a button. To use this custom page object in a test, we pass our custom page object as a parameter when opening the view with `app.openView`. diff --git a/examples/playwright/docs/GETTING_STARTED.md b/examples/playwright/docs/GETTING_STARTED.md index f8f01c398ef90..3e5637057a1b6 100644 --- a/examples/playwright/docs/GETTING_STARTED.md +++ b/examples/playwright/docs/GETTING_STARTED.md @@ -21,7 +21,7 @@ Now, let's run the tests: 2. Run `yarn ui-tests` in the theia-playwright-template to run its tests in headless mode Please note that Theia 🎭 Playwright is built to be extended with custom page objects, such as the one in `test/page-objects/theia-app.ts` in the theia-playwright-template. -We recommend to add further page objects for all custom views, editors, widgets, etc. +We recommend adding further page objects for all custom views, editors, widgets, etc. Please refer to the [extension guide](EXTENSIBILITY.md) for more information. Moreover, this repository contains several tests based on Theia 🎭 Playwright in `examples/playwright/src/tests` that may serve as additional examples for writing tests. @@ -34,7 +34,7 @@ Let's write another system test for the Theia text editor as an example: 2. Open the Theia text editor 3. Replace the contents of line 1 with `change` and check the line contents and the dirty state, which now should indicate that the editor is dirty. 4. Perform an undo twice and verify that the line contents should be what it was before the change. The dirty state should be clean again. -5. Run redo twice and check that line 1 shows the text `change` again. Also the dirty state should be changed again. +5. Run redo twice and check that line 1 shows the text `change` again. Also, the dirty state should be changed again. 6. Save the editor with the saved contents and check whether the editor state is clean after save. Close the editor. 7. Reopen the same file and check whether the contents of line 1 shows still the changed contents. @@ -141,7 +141,7 @@ This is valid for executing tests with the VS Code Playwright extension or from ### Running the tests in VS Code via the Playwright extension -For quick and easy execution of tests in VS Code, we recommend to use the [VS Code Playwright extension (`ms-playwright.playwright`)](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). +For quick and easy execution of tests in VS Code, we recommend using the [VS Code Playwright extension (`ms-playwright.playwright`)](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). Once you have installed the VS Code Playwright test extension, open the *Test* view and click the `Run Tests` button on the top toolbar or the `Run Test` button for a particular test. It uses the default configuration with chromium as test profile by default. @@ -175,7 +175,7 @@ For an advanced test development experience, Playwright provides the so-called * yarn ui-tests --ui ``` -For more information on the UI mode, please refer to the [Playwright announcement of the UI mode](https://playwright.dev/docs/release-notes#introducing-ui-mode-preview). +For more information on the UI mode, please refer to the [Playwright announcement of the UI mode](https://playwright.dev/docs/release-notes#introducing-ui-mode-preview). ## Advanced Topics