miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(core): editor setup in getting started (#22416)

Browse Source 
Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>
This commit is contained in:
Isaac Mann 2024-04-02 11:56:42 -04:00 committed by GitHub
parent 9e13c8537a
commit 5f255c5a43
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
35 changed files with 183 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/generated/manifests/menus.json
View File

@ -32,6 +32,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Editor Setup",
"path": "/getting-started/editor-setup",
"id": "editor-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Tutorials",
"path": "/getting-started/tutorials",
@ -124,6 +132,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Editor Setup",
"path": "/getting-started/editor-setup",
"id": "editor-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Tutorials",
"path": "/getting-started/tutorials",
@ -404,14 +420,6 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Integrate with Editors",
"path": "/features/integrate-with-editors",
"id": "integrate-with-editors",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Manage Releases",
"path": "/features/manage-releases",
@ -536,14 +544,6 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Integrate with Editors",
"path": "/features/integrate-with-editors",
"id": "integrate-with-editors",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Manage Releases",
"path": "/features/manage-releases",

92
docs/generated/manifests/nx.json
View File

@ -39,6 +39,17 @@
"path": "/getting-started/why-nx",
"tags": []
},
{
"id": "editor-setup",
"name": "Editor Setup",
"description": "Learn about Nx Console, an extension for VS Code and WebStorm.",
"mediaImage": "",
"file": "shared/getting-started/editor-setup",
"itemList": [],
"isExternal": false,
"path": "/getting-started/editor-setup",
"tags": ["editor-setup"]
},
{
"id": "tutorials",
"name": "Tutorials",
@ -166,6 +177,17 @@
"path": "/getting-started/why-nx",
"tags": []
},
"/getting-started/editor-setup": {
"id": "editor-setup",
"name": "Editor Setup",
"description": "Learn about Nx Console, an extension for VS Code and WebStorm.",
"mediaImage": "",
"file": "shared/getting-started/editor-setup",
"itemList": [],
"isExternal": false,
"path": "/getting-started/editor-setup",
"tags": ["editor-setup"]
},
"/getting-started/tutorials": {
"id": "tutorials",
"name": "Tutorials",
@ -549,17 +571,6 @@
"path": "/features/enforce-module-boundaries",
"tags": ["enforce-module-boundaries"]
},
{
"id": "integrate-with-editors",
"name": "Integrate with Editors",
"description": "Learn about Nx Console, an extension for VS Code and WebStorm.",
"mediaImage": "",
"file": "shared/features/integrate-with-editors",
"itemList": [],
"isExternal": false,
"path": "/features/integrate-with-editors",
"tags": ["integrate-with-editors"]
},
{
"id": "manage-releases",
"name": "Manage Releases",
@ -731,17 +742,6 @@
"path": "/features/enforce-module-boundaries",
"tags": ["enforce-module-boundaries"]
},
"/features/integrate-with-editors": {
"id": "integrate-with-editors",
"name": "Integrate with Editors",
"description": "Learn about Nx Console, an extension for VS Code and WebStorm.",
"mediaImage": "",
"file": "shared/features/integrate-with-editors",
"itemList": [],
"isExternal": false,
"path": "/features/integrate-with-editors",
"tags": ["integrate-with-editors"]
},
"/features/manage-releases": {
"id": "manage-releases",
"name": "Manage Releases",
@ -3021,7 +3021,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-telemetry",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-project-details",
@ -3032,7 +3032,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-project-details",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-generate-command",
@ -3043,7 +3043,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-generate-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-run-command",
@ -3054,7 +3054,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-run-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-add-dependency-command",
@ -3065,7 +3065,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-add-dependency-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-project-pane",
@ -3076,7 +3076,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-project-pane",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-shortcuts",
@ -3087,7 +3087,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-shortcuts",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-troubleshooting",
@ -3098,7 +3098,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-troubleshooting",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
}
],
"isExternal": false,
@ -5456,7 +5456,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-telemetry",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-project-details",
@ -5467,7 +5467,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-project-details",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-generate-command",
@ -5478,7 +5478,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-generate-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-run-command",
@ -5489,7 +5489,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-run-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-add-dependency-command",
@ -5500,7 +5500,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-add-dependency-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-project-pane",
@ -5511,7 +5511,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-project-pane",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-shortcuts",
@ -5522,7 +5522,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-shortcuts",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
{
"id": "console-troubleshooting",
@ -5533,7 +5533,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-troubleshooting",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
}
],
"isExternal": false,
@ -5549,7 +5549,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-telemetry",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
"/recipes/nx-console/console-project-details": {
"id": "console-project-details",
@ -5560,7 +5560,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-project-details",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
"/recipes/nx-console/console-generate-command": {
"id": "console-generate-command",
@ -5571,7 +5571,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-generate-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
"/recipes/nx-console/console-run-command": {
"id": "console-run-command",
@ -5582,7 +5582,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-run-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
"/recipes/nx-console/console-add-dependency-command": {
"id": "console-add-dependency-command",
@ -5593,7 +5593,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-add-dependency-command",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
"/recipes/nx-console/console-project-pane": {
"id": "console-project-pane",
@ -5604,7 +5604,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-project-pane",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
"/recipes/nx-console/console-shortcuts": {
"id": "console-shortcuts",
@ -5615,7 +5615,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-shortcuts",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
"/recipes/nx-console/console-troubleshooting": {
"id": "console-troubleshooting",
@ -5626,7 +5626,7 @@
"itemList": [],
"isExternal": false,
"path": "/recipes/nx-console/console-troubleshooting",
"tags": ["integrate-with-editors"]
"tags": ["editor-setup"]
},
"/recipes/nx-release": {
"id": "nx-release",

130
docs/generated/manifests/tags.json
View File

@ -1,4 +1,69 @@
{
"editor-setup": [
{
"description": "Learn about Nx Console, an extension for VS Code and WebStorm.",
"file": "shared/getting-started/editor-setup",
"id": "editor-setup",
"name": "Editor Setup",
"path": "/getting-started/editor-setup"
},
{
"description": "",
"file": "shared/recipes/console-telemetry",
"id": "console-telemetry",
"name": "Telemetry",
"path": "/recipes/nx-console/console-telemetry"
},
{
"description": "",
"file": "shared/recipes/console-project-details",
"id": "console-project-details",
"name": "Project Details View",
"path": "/recipes/nx-console/console-project-details"
},
{
"description": "",
"file": "shared/recipes/console-generate-command",
"id": "console-generate-command",
"name": "Generate Command",
"path": "/recipes/nx-console/console-generate-command"
},
{
"description": "",
"file": "shared/recipes/console-run-command",
"id": "console-run-command",
"name": "Run Command",
"path": "/recipes/nx-console/console-run-command"
},
{
"description": "",
"file": "shared/recipes/console-add-dependency-command",
"id": "console-add-dependency-command",
"name": "Add Dependency Command",
"path": "/recipes/nx-console/console-add-dependency-command"
},
{
"description": "",
"file": "shared/recipes/console-project-pane",
"id": "console-project-pane",
"name": "Project Pane",
"path": "/recipes/nx-console/console-project-pane"
},
{
"description": "",
"file": "shared/recipes/console-shortcuts",
"id": "console-shortcuts",
"name": "Keyboard Shortcuts",
"path": "/recipes/nx-console/console-shortcuts"
},
{
"description": "",
"file": "shared/recipes/console-troubleshooting",
"id": "console-troubleshooting",
"name": "Troubleshooting",
"path": "/recipes/nx-console/console-troubleshooting"
}
],
"run-tasks": [
{
"description": "Learn about the various ways you can use Nx to run tasks in your workspace.",
@ -438,71 +503,6 @@
"path": "/nx-api/nx/documents/format-write"
}
],
"integrate-with-editors": [
{
"description": "Learn about Nx Console, an extension for VS Code and WebStorm.",
"file": "shared/features/integrate-with-editors",
"id": "integrate-with-editors",
"name": "Integrate with Editors",
"path": "/features/integrate-with-editors"
},
{
"description": "",
"file": "shared/recipes/console-telemetry",
"id": "console-telemetry",
"name": "Telemetry",
"path": "/recipes/nx-console/console-telemetry"
},
{
"description": "",
"file": "shared/recipes/console-project-details",
"id": "console-project-details",
"name": "Project Details View",
"path": "/recipes/nx-console/console-project-details"
},
{
"description": "",
"file": "shared/recipes/console-generate-command",
"id": "console-generate-command",
"name": "Generate Command",
"path": "/recipes/nx-console/console-generate-command"
},
{
"description": "",
"file": "shared/recipes/console-run-command",
"id": "console-run-command",
"name": "Run Command",
"path": "/recipes/nx-console/console-run-command"
},
{
"description": "",
"file": "shared/recipes/console-add-dependency-command",
"id": "console-add-dependency-command",
"name": "Add Dependency Command",
"path": "/recipes/nx-console/console-add-dependency-command"
},
{
"description": "",
"file": "shared/recipes/console-project-pane",
"id": "console-project-pane",
"name": "Project Pane",
"path": "/recipes/nx-console/console-project-pane"
},
{
"description": "",
"file": "shared/recipes/console-shortcuts",
"id": "console-shortcuts",
"name": "Keyboard Shortcuts",
"path": "/recipes/nx-console/console-shortcuts"
},
{
"description": "",
"file": "shared/recipes/console-troubleshooting",
"id": "console-troubleshooting",
"name": "Troubleshooting",
"path": "/recipes/nx-console/console-troubleshooting"
}
],
"nx-release": [
{
"description": "Learn how Nx provides tools to help you manage releasing your projects.",

30
docs/map.json
View File

@ -28,6 +28,13 @@
"id": "why-nx",
"file": "shared/getting-started/why-nx"
},
{
"name": "Editor Setup",
"description": "Learn about Nx Console, an extension for VS Code and WebStorm.",
"id": "editor-setup",
"tags": ["editor-setup"],
"file": "shared/getting-started/editor-setup"
},
{
"name": "Tutorials",
"id": "tutorials",
@ -154,13 +161,6 @@
"tags": ["enforce-module-boundaries"],
"file": "shared/features/enforce-module-boundaries"
},
{
"name": "Integrate with Editors",
"description": "Learn about Nx Console, an extension for VS Code and WebStorm.",
"id": "integrate-with-editors",
"tags": ["integrate-with-editors"],
"file": "shared/features/integrate-with-editors"
},
{
"name": "Manage Releases",
"description": "Learn how Nx provides tools to help you manage releasing your projects.",
@ -1066,49 +1066,49 @@
{
"name": "Telemetry",
"id": "console-telemetry",
"tags": ["integrate-with-editors"],
"tags": ["editor-setup"],
"file": "shared/recipes/console-telemetry"
},
{
"name": "Project Details View",
"id": "console-project-details",
"tags": ["integrate-with-editors"],
"tags": ["editor-setup"],
"file": "shared/recipes/console-project-details"
},
{
"name": "Generate Command",
"id": "console-generate-command",
"tags": ["integrate-with-editors"],
"tags": ["editor-setup"],
"file": "shared/recipes/console-generate-command"
},
{
"name": "Run Command",
"id": "console-run-command",
"tags": ["integrate-with-editors"],
"tags": ["editor-setup"],
"file": "shared/recipes/console-run-command"
},
{
"name": "Add Dependency Command",
"id": "console-add-dependency-command",
"tags": ["integrate-with-editors"],
"tags": ["editor-setup"],
"file": "shared/recipes/console-add-dependency-command"
},
{
"name": "Project Pane",
"id": "console-project-pane",
"tags": ["integrate-with-editors"],
"tags": ["editor-setup"],
"file": "shared/recipes/console-project-pane"
},
{
"name": "Keyboard Shortcuts",
"id": "console-shortcuts",
"tags": ["integrate-with-editors"],
"tags": ["editor-setup"],
"file": "shared/recipes/console-shortcuts"
},
{
"name": "Troubleshooting",
"id": "console-troubleshooting",
"tags": ["integrate-with-editors"],
"tags": ["editor-setup"],
"file": "shared/recipes/console-troubleshooting"
}
]

4
docs/shared/angular-standalone-tutorial/angular-standalone.md
View File

@ -204,7 +204,7 @@ nx e2e e2e # runs e2e tests from the e2e project with Cypress
### Inferred Tasks
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. All tasks from the `myngapp` project are defined in its `project.json` file, but the companion `e2e` project has its tasks inferred from configuration files. To view the tasks that Nx has detected, look in the [Nx Console](/features/integrate-with-editors), [Project Details View](/recipes/nx-console/console-project-details) or run:
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. All tasks from the `myngapp` project are defined in its `project.json` file, but the companion `e2e` project has its tasks inferred from configuration files. To view the tasks that Nx has detected, look in the [Nx Console](/getting-started/editor-setup), [Project Details View](/recipes/nx-console/console-project-details) or run:
```shell
nx show project e2e --web
@ -493,7 +493,7 @@ NX Capabilities in @nx/angular:
If you prefer a more integrated experience, you can install the "Nx Console" extension for your code editor. It has support for VSCode, IntelliJ and ships a LSP for Vim. Nx Console provides autocompletion support in Nx configuration files and has UIs for browsing and running generators.
More info can be found in [the integrate with editors article](/features/integrate-with-editors).
More info can be found in [the integrate with editors article](/getting-started/editor-setup).
{% /callout %}

4
docs/shared/angular-tutorial/angular-monorepo.md
View File

@ -224,7 +224,7 @@ This executor is similar to the `@angular-devkit/build-angular:ng-packagr` with
If you prefer a more integrated experience, you can install the "Nx Console" extension for your code editor. It has support for VSCode, IntelliJ and ships a LSP for Vim. Nx Console provides autocompletion support in Nx configuration files and has UIs for browsing and running generators.
More info can be found in [the integrate with editors article](/features/integrate-with-editors).
More info can be found in [the integrate with editors article](/getting-started/editor-setup).
{% /callout %}
@ -621,7 +621,7 @@ nx e2e angular-store-e2e # runs e2e tests for the angular-store
### Inferred Tasks
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. All tasks from the `angular-store` project are defined in its `project.json` file, but the companion `angular-store-e2e` project has its tasks inferred from configuration files. To view the tasks that Nx has detected, look in the [Nx Console](/features/integrate-with-editors), [Project Details View](/recipes/nx-console/console-project-details) or run:
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. All tasks from the `angular-store` project are defined in its `project.json` file, but the companion `angular-store-e2e` project has its tasks inferred from configuration files. To view the tasks that Nx has detected, look in the [Nx Console](/getting-started/editor-setup), [Project Details View](/recipes/nx-console/console-project-details) or run:
```shell
nx show project angular-store-e2e --web

2
docs/shared/deprecated/as-provided-vs-derived.md
View File

@ -12,7 +12,7 @@ Here are some of the issues with the `derived` behavior that are addressed with
## Using Nx Console
You can use [Nx Console](/features/integrate-with-editors) for an intuitive experience running generators.
You can use [Nx Console](/getting-started/editor-setup) for an intuitive experience running generators.
1. If you right-click a folder and choose `Nx generate`, the code generation will be run from that folder.
2. As you fill out the generate form, Nx Console will show you a preview of where the new files will be generated.

4
docs/shared/features/explore-graph.md
View File

@ -24,7 +24,7 @@ This guide will teach you to use this tool to explore projects, the project grap
Projects in Nx are the different parts of the monorepo which can have tasks run for them.
The best way to see what projects are in your workspace is to view the [project graph](#explore-the-project-graph) which will be covered in the next section.
Another way is to look at the **Projects** pane in [Nx Console](/features/integrate-with-editors) or run `nx show projects` to show a list of projects in your terminal.
Another way is to look at the **Projects** pane in [Nx Console](/getting-started/editor-setup) or run `nx show projects` to show a list of projects in your terminal.
You can see more details about a specific project in Nx Console or by running `nx show project <project-name> --web`. Both methods will show something like the example below:
@ -42,7 +42,7 @@ It always stays up to date without having to actively maintain a document as it
### Launching the Project Graph
To launch the project graph visualization for your workspace, use [Nx Console](/features/integrate-with-editors) or run:
To launch the project graph visualization for your workspace, use [Nx Console](/getting-started/editor-setup) or run:
```shell
npx nx graph

2
docs/shared/features/integrate-with-editors.md → docs/shared/getting-started/editor-setup.md
View File

@ -1,4 +1,4 @@
# Integrate with Editors
# Editor Setup
Nx Console is the UI for Nx. It works for any installed generators or any targets defined in your workspace. Nx Console does not have a specific UI for, say, generating a component. Instead, Nx Console does what the command-line version of Nx does - it analyzes the same meta information to create the needed UI. This means that anything you can do with Nx, you can do with Nx Console.

2
docs/shared/getting-started/why-nx.md
View File

@ -30,7 +30,7 @@ Nx is built in a modular fashion to let you only use the features you need.
- The **Nx** package provides fundamental technology-agnostic capabilities such as: [workspace analysis](/features/explore-graph), [task running](/features/run-tasks), [caching](/features/cache-task-results), [distribution](/ci/features/distribute-task-execution), [code generation](/features/generate-code) and [automated code migrations](/features/automate-updating-dependencies).
- **Plugins** are NPM packages that build on top of the fundamental capabilities provided by the Nx package. Nx plugins contain [code generators](/features/generate-code), [executors](/concepts/executors-and-configurations) (to abstract lower-level build tooling) and automated code migrations for keeping your tools up to date. Contrary to the Nx package, which works the same way with any JS or non-JS project, plugins are usually technology specific. For instance, `@nx/react` adds support for building React apps and libs, `@nx/cypress` adds e2e testing capabilities with Cypress. Plugins make developers more productive by removing any friction of integrating different tools with each other and by providing utilities to keep them up to date. The Nx team maintains plugins for React, Next, Remix, Angular, Jest, Cypress, Storybook and more. You can use the `@nx/plugin` package to easily [scaffold a new plugin](/extending-nx/intro/getting-started) or even just [automate your local workspace](/extending-nx/recipes/local-generators). There are also more than 80 [community plugins](/plugin-registry).
- **Devkit** is a set of utilities for [building Nx plugins](/extending-nx/intro/getting-started).
- **Nx Console** is an extension for **VSCode, IntelliJ and VIM**. It provides code autocompletion, interactive generators, workspace visualizations, powerful refactorings and more. You can [install it here](/features/integrate-with-editors).
- **Nx Console** is an extension for **VSCode, IntelliJ and VIM**. It provides code autocompletion, interactive generators, workspace visualizations, powerful refactorings and more. You can [install it here](/getting-started/editor-setup).
## How Can Nx Improve Your CI Pipeline?

4
docs/shared/guides/nx-and-angular-cli.md
View File

@ -246,7 +246,7 @@ And, Nx already uses fast, modern tooling like [ESBuild](/nx-api/esbuild), [Vite
### Editor Integration
Nx goes beyond being just a CLI and comes with [Nx Console](/features/integrate-with-editors), a VSCode and WebStorm extension allowing you to run commands, generate code and visualize your workspace.
Nx goes beyond being just a CLI and comes with [Nx Console](/getting-started/editor-setup), a VSCode and WebStorm extension allowing you to run commands, generate code and visualize your workspace.
![Nx Console screenshot](/shared/images/nx-console/nx-console-screenshot.webp)
@ -261,7 +261,7 @@ Nx is really made to scale with you. You can
### Visualize your Workspace
As you start modularizing your Angular workspace, Nx can visualize it using the `nx graph` command or via [Nx Console](/features/integrate-with-editors) directly in your editor.
As you start modularizing your Angular workspace, Nx can visualize it using the `nx graph` command or via [Nx Console](/getting-started/editor-setup) directly in your editor.
{% graph height="450px" %}

2
docs/shared/guides/turbo-and-nx.md
View File

@ -89,7 +89,7 @@ If you want to learn more, check out our article on [Distributing CI - Binning a
All the available Nx commands can be executed via the command line. But as your monorepo grows, with multiple teams and hundreds of projects, even just finding the project to run a command against can sometimes be difficult. Having a high quality IDE integration can be a time saver there.
- Nx has [VSCode](/features/integrate-with-editors) and WebStorm/Intellij plugins.
- Nx has [VSCode](/getting-started/editor-setup) and WebStorm/Intellij plugins.
- Turborepo doesn’t have any plugins, and the maintainer has indicated there's no intention to provide editor support.
Learn more [by watching this Egghead lesson](https://egghead.io/lessons/javascript-generate-new-projects-for-nx-with-nx-console).

2
docs/shared/mental-model/large-tasks.json
View File

@ -25624,7 +25624,7 @@
"hash": "57082bdf506236cbaea7f156d1ea12645934ece4"
},
{
"file": "docs/shared/features/integrate-with-editors.md",
"file": "docs/shared/getting-started/editor-setup.md",
"hash": "eb249de959b95a89756a17dd6619fcb35a732755"
},
{

2
docs/shared/migration/migration-angular.md
View File

@ -122,7 +122,7 @@ Learn more about the advantages of Nx in the following guides:
- [Using Jest for unit tests](/nx-api/jest)
- [Computation Caching](/concepts/how-caching-works)
- [Rebuilding and Retesting What is Affected](/ci/features/affected)
- [Integrate with Editors](/features/integrate-with-editors)
- [Integrate with Editors](/getting-started/editor-setup)
- [Advanced Angular Micro Frontends with Dynamic Module Federation](/recipes/angular/dynamic-module-federation-with-angular)
## From Nx Console

4
docs/shared/react-standalone-tutorial/react-standalone.md
View File

@ -116,7 +116,7 @@ Nx uses the following syntax to run tasks:
### Inferred Tasks
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. To view the tasks that Nx has detected, look in the [Nx Console](/features/integrate-with-editors) project detail view or run:
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. To view the tasks that Nx has detected, look in the [Nx Console](/getting-started/editor-setup) project detail view or run:
```shell
nx show project myreactapp --web
@ -292,7 +292,7 @@ NX Capabilities in @nx/react:
If you prefer a more integrated experience, you can install the "Nx Console" extension for your code editor. It has support for VSCode, IntelliJ and ships a LSP for Vim. Nx Console provides autocompletion support in Nx configuration files and has UIs for browsing and running generators.
More info can be found in [the integrate with editors article](/features/integrate-with-editors).
More info can be found in [the integrate with editors article](/getting-started/editor-setup).
{% /callout %}

4
docs/shared/react-tutorial/react-monorepo.md
View File

@ -125,7 +125,7 @@ Nx uses the following syntax to run tasks:
### Inferred Tasks
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. To view the tasks that Nx has detected, look in the [Nx Console](/features/integrate-with-editors) project detail view or run:
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. To view the tasks that Nx has detected, look in the [Nx Console](/getting-started/editor-setup) project detail view or run:
```shell
nx show project react-store --web
@ -267,7 +267,7 @@ NX Capabilities in @nx/react:
If you prefer a more integrated experience, you can install the "Nx Console" extension for your code editor. It has support for VSCode, IntelliJ and ships a LSP for Vim. Nx Console provides autocompletion support in Nx configuration files and has UIs for browsing and running generators.
More info can be found in [the integrate with editors article](/features/integrate-with-editors).
More info can be found in [the integrate with editors article](/getting-started/editor-setup).
{% /callout %}

2
docs/shared/recipes/add-stack/add-astro.md
View File

@ -13,7 +13,7 @@ Because we are not using an Nx plugin for Astro, there are few items we'll have
{% pill url="/ci/features/remote-cache" %}✅ Remote Caching{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/recipes/enforce-module-boundaries" %}✅ Enforce Project Boundaries{% /pill %}
{% pill url="/features/generate-code" %}🚫 Use Code Generators{% /pill %}

2
docs/shared/recipes/add-stack/add-dotnet.md
View File

@ -9,7 +9,7 @@ Because we are using an Nx plugin for .NET, all the features of Nx are available
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}✅ Use Code Generators{% /pill %}

2
docs/shared/recipes/add-stack/add-express.md
View File

@ -9,7 +9,7 @@ Because we are using an Nx plugin for Express, all the features of Nx are availa
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}✅ Use Code Generators{% /pill %}

2
docs/shared/recipes/add-stack/add-fastify.md
View File

@ -14,7 +14,7 @@ Because we are using an Nx plugin for Fastify, all the features of Nx are availa
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}✅ Use Code Generators{% /pill %}

2
docs/shared/recipes/add-stack/add-lit.md
View File

@ -13,7 +13,7 @@ Because we are not using an Nx plugin for Lit, there are few items we'll have to
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}🚫 Use Code Generators{% /pill %}

2
docs/shared/recipes/add-stack/add-qwik.md
View File

@ -13,7 +13,7 @@ We'll be using an Nx Plugin for Qwik called [qwik-nx](https://github.com/qwikifi
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}✅ Use Code Generators{% /pill %}

2
docs/shared/recipes/add-stack/add-rust.md
View File

@ -14,7 +14,7 @@ called [@monodon/rust](https://github.com/cammisuli/monodon/tree/main/packages/r
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}✅ Use Code Generators{% /pill %}

2
docs/shared/recipes/add-stack/add-solid.md
View File

@ -15,7 +15,7 @@ updating any framework dependencies as needed.
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}🚫 Use Code Generators{% /pill %}

2
docs/shared/recipes/add-stack/add-svelte.md
View File

@ -13,7 +13,7 @@ Because we are not using a Nx plugin for Svelte, there are a few items we'll hav
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}🚫 Use Code Generators{% /pill %}

2
docs/shared/recipes/plugins/local-executors.md
View File

@ -1,6 +1,6 @@
# Local Executors
Creating Executors for your workspace standardizes scripts that are run during your development/building/deploying tasks in order to provide guidance in the terminal with `--help` and when invoking with [Nx Console](/features/integrate-with-editors)
Creating Executors for your workspace standardizes scripts that are run during your development/building/deploying tasks in order to provide guidance in the terminal with `--help` and when invoking with [Nx Console](/getting-started/editor-setup)
This guide shows you how to create, run, and customize executors within your Nx workspace. The examples use the trivial use-case of an `echo` command.

2
docs/shared/recipes/running-tasks/defining-task-pipeline.md
View File

@ -99,7 +99,7 @@ And then select "Tasks" from the top-left dropdown, choose the target (e.g. `bui
![Task graph of the Playwright Nx plugin in the nx repo being rendered in the browser](/shared/recipes/running-tasks/task-graph-playwright-nx.webp)
Alternatively you can use the [Nx Console](/features/integrate-with-editors) extension in VSCode or IntelliJ, right-click on the project and select:
Alternatively you can use the [Nx Console](/getting-started/editor-setup) extension in VSCode or IntelliJ, right-click on the project and select:
![Selecting "Focus task in Nx Graph" from the context menu in VS Code](/shared/recipes/running-tasks/task-graph-context-menu.webp)

2
docs/shared/reference/project-configuration.md
View File

@ -6,7 +6,7 @@ A project's configuration is constructed by Nx from three sources:
2. [Workspace `targetDefaults`](/reference/nx-json#target-defaults) defined in the `nx.json` file
3. Individual project level configuration files (`package.json` and `project.json`)
Each source will overwrite the previous source. That means `targetDefaults` will overwrite inferred tasks and project level configuration will overwrite both `targetDefaults` and inferred tasks. The combined project configuration can be viewed in the project details view by using [Nx Console](/features/integrate-with-editors) in your IDE or by running:
Each source will overwrite the previous source. That means `targetDefaults` will overwrite inferred tasks and project level configuration will overwrite both `targetDefaults` and inferred tasks. The combined project configuration can be viewed in the project details view by using [Nx Console](/getting-started/editor-setup) in your IDE or by running:
```shell
nx show project myproject --web

2
docs/shared/reference/sitemap.md
View File

@ -4,6 +4,7 @@
- [Intro to Nx](/getting-started/intro)
- [Installation](/getting-started/installation)
- [Why Nx?](/getting-started/why-nx)
- [Editor Setup](/getting-started/editor-setup)
- [Tutorials](/getting-started/tutorials)
- [NPM Workspaces Monorepo](/getting-started/tutorials/npm-workspaces-tutorial)
- [Integrated Monorepo](/getting-started/tutorials/integrated-repo-tutorial)
@ -26,7 +27,6 @@
- [Generate Code](/features/generate-code)
- [Automate Updating Dependencies](/features/automate-updating-dependencies)
- [Enforce Module Boundaries](/features/enforce-module-boundaries)
- [Integrate with Editors](/features/integrate-with-editors)
- [Manage Releases](/features/manage-releases)
- [CI Features](/features/ci-features)
- [Concepts](/concepts)

4
docs/shared/vue-standalone-tutorial/vue-standalone.md
View File

@ -114,7 +114,7 @@ Nx uses the following syntax to run tasks:
### Inferred Tasks
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. To view the tasks that Nx has detected, look in the [Nx Console](/features/integrate-with-editors) project detail view or run:
Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. To view the tasks that Nx has detected, look in the [Nx Console](/getting-started/editor-setup) project detail view or run:
```shell
nx show project myvueapp --web
@ -282,7 +282,7 @@ NX Capabilities in @nx/vue:
If you prefer a more integrated experience, you can install the "Nx Console" extension for your code editor. It has support for VSCode, IntelliJ and ships a LSP for Vim. Nx Console provides autocompletion support in Nx configuration files and has UIs for browsing and running generators.
More info can be found in [the integrate with editors article](/features/integrate-with-editors).
More info can be found in [the integrate with editors article](/getting-started/editor-setup).
{% /callout %}

3
nx-dev/nx-dev/redirect-rules.js
View File

@ -201,7 +201,8 @@ const diataxis = {
'/configuration/packagejson': '/reference/project-configuration',
'/configuration/projectjson': '/reference/project-configuration',
'/using-nx/nx-cli': '/getting-started/intro',
'/using-nx/console': '/features/integrate-with-editors',
'/using-nx/console': '/getting-started/editor-setup',
'/features/integrate-with-editors': '/getting-started/editor-setup',
'/using-nx/mental-model': '/concepts/mental-model',
'/using-nx/caching': '/concepts/how-caching-works',
'/using-nx/dte': '/features/distribute-task-execution',

2
nx-dev/ui-common/src/lib/header.tsx
View File

@ -52,7 +52,7 @@ export function Header(): JSX.Element {
name: 'Nx Console',
description:
'The official VSCode & JetBrains plugin bringing Nx to your editor.',
href: '/features/integrate-with-editors#vscode',
href: '/getting-started/editor-setup#vscode',
},
{
name: 'Set Up CI',

6
nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
View File

@ -35,7 +35,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
<span className="font-medium">Stay in the flow!</span> Augment your
editor with Nx Console, a dedicated extension available for{' '}
<Link
href="/features/integrate-with-editors"
href="/getting-started/editor-setup"
title="Install VSCode's native extension for Nx"
className="font-medium text-blue-500 dark:text-sky-500"
>
@ -43,7 +43,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
</Link>{' '}
,{' '}
<Link
href="/features/integrate-with-editors"
href="/getting-started/editor-setup"
className="font-medium text-blue-500 dark:text-sky-500"
title="Install JetBrains' native plugin for Nx"
>
@ -51,7 +51,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
</Link>{' '}
and{' '}
<Link
href="/features/integrate-with-editors#neovim"
href="/getting-started/editor-setup#neovim"
className="font-medium text-blue-500 dark:text-sky-500"
>
Neovim

2
nx-dev/ui-home/src/lib/extensible-and-integrated/ide-integration-tab.tsx
View File

@ -33,7 +33,7 @@ export function IdeIntegrationTab(): JSX.Element {
icon: <SparklesIcon className="h-5 w-5" />,
description:
'The Nx team is obsessed with providing the best possible DX. Nx Console is the culmination of that. Carefully crafted, in constant evolution, always in search of making the life of developers easier.',
link: '/features/integrate-with-editors',
link: '/getting-started/editor-setup',
},
];
return (

2
packages/nx/bin/init-local.ts
View File

@ -144,7 +144,7 @@ function handleAngularCLIFallbacks(workspace: WorkspaceTypeAndRoot) {
if (!process.argv[3]) {
console.log(`"ng completion" is not natively supported by Nx.
Instead, you could try an Nx Editor Plugin for a visual tool to run Nx commands. If you're using VSCode, you can use the Nx Console plugin, or if you're using WebStorm, you could use one of the available community plugins.
For more information, see https://nx.dev/features/integrate-with-editors`);
For more information, see https://nx.dev/getting-started/editor-setup`);
}
} else if (process.argv[2] === 'cache') {
console.log(`"ng cache" is not natively supported by Nx.