eslint
diff --git a/‎docs/src/_data/conversions.json
Lines changed: 42 additions & 0 deletions b/‎docs/src/_data/conversions.json
Lines changed: 42 additions & 0 deletions
diff --git a/‎docs/src/_includes/components/npm_tabs.macro.html
Lines changed: 46 additions & 0 deletions b/‎docs/src/_includes/components/npm_tabs.macro.html
Lines changed: 46 additions & 0 deletions
diff --git a/‎docs/src/_includes/components/npx_tabs.macro.html
Lines changed: 46 additions & 0 deletions b/‎docs/src/_includes/components/npx_tabs.macro.html
Lines changed: 46 additions & 0 deletions
diff --git a/‎docs/src/contribute/development-environment.md
Lines changed: 18 additions & 7 deletions b/‎docs/src/contribute/development-environment.md
Lines changed: 18 additions & 7 deletions
diff --git a/‎docs/src/extend/custom-parsers.md
Lines changed: 7 additions & 3 deletions b/‎docs/src/extend/custom-parsers.md
Lines changed: 7 additions & 3 deletions
diff --git a/‎docs/src/extend/custom-rule-tutorial.md
Lines changed: 27 additions & 15 deletions b/‎docs/src/extend/custom-rule-tutorial.md
Lines changed: 27 additions & 15 deletions
diff --git a/‎docs/src/extend/stats.md
Lines changed: 6 additions & 3 deletions b/‎docs/src/extend/stats.md
Lines changed: 6 additions & 3 deletions
diff --git a/‎docs/src/integrate/integration-tutorial.md
Lines changed: 12 additions & 6 deletions b/‎docs/src/integrate/integration-tutorial.md
Lines changed: 12 additions & 6 deletions
diff --git a/‎docs/src/pages/flags.md
Lines changed: 6 additions & 3 deletions b/‎docs/src/pages/flags.md
Lines changed: 6 additions & 3 deletions
@@ -0,0 +1,42 @@
+{
+    "toNpmCommands": {
+        "install": "install",
+        "init": "init",
+        "init-create": "init"
+    },
+    "toNpmArgs": {
+        "--global": "--global",
+        "--save-dev": "--save-dev",
+        "-y": "-y"
+    },
+    "toYarnCommands": {
+        "install": "add",
+        "init": "init",
+        "init-create": "create"
+     },
+     "toYarnArgs": {
+        "--global": "global",
+        "--save-dev": "--dev",
+        "-y": "-y"
+     },
+     "toPnpmCommands" : {
+        "install": "add",
+        "init": "init",
+        "init-create": "create"
+     },
+     "toPnpmArgs" : {
+        "--global": "--global",
+        "--save-dev": "--save-dev",
+        "-y": "-y"
+     } ,
+     "toBunCommands" : {
+        "install": "add",
+        "init": "init",
+        "init-create": "create"
+     },
+     "toBunArgs" : {
+        "--global": "--global",
+        "--save-dev": "--dev",
+        "-y": "-y"
+     }
+}
@@ -0,0 +1,46 @@
+{%- macro npm_tabs(params) -%}
+<div class="c-tabs" data-tabs>
+   <div class="c-tabs__tablist" data-tablist hidden>
+      <button class="c-tabs__tab" data-tab>npm</button>
+      <button class="c-tabs__tab" data-tab>yarn</button>
+      <button class="c-tabs__tab" data-tab>pnpm</button>
+      <button class="c-tabs__tab" data-tab>bun</button>
+   </div>
+    <div class="c-tabs__tabpanel" data-tabpanel>
+        <h3 class="h6 c-tabs__tabpanel__title">npm</h3>
+
+```shell
+{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
+npm {% if conversions.toNpmCommands[params.command] %}{{ conversions.toNpmCommands[params.command] | safe }}{% else %}{{ params.command | safe }}{% endif -%}{% for arg in params.args %} {{ conversions.toNpmArgs[arg] | safe }}{% endfor %}{% for package in params.packages %} {{ package | safe }}{% endfor %}
+```
+
+    </div>
+   <div class="c-tabs__tabpanel" data-tabpanel>
+      <h3 class="h6 c-tabs__tabpanel__title">yarn</h3>
+
+```shell
+{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
+yarn {% if params.args.includes("--global") %}{{ conversions.toYarnArgs["--global"] | safe }} {% endif -%} {% if conversions.toYarnCommands[params.command] %}{{ conversions.toYarnCommands[params.command] | safe }}{% else %}{{ params.command | safe }}{% endif -%}{% for arg in params.args %}{% if arg !== "--global" %} {{ conversions.toYarnArgs[arg] | safe }}{% endif -%}{% endfor %}{% for package in params.packages %} {{ package.replace("@eslint/config@latest", "@eslint/config") | safe }}{% endfor %}
+```
+
+   </div>
+   <div class="c-tabs__tabpanel" data-tabpanel>
+      <h3 class="h6 c-tabs__tabpanel__title">pnpm</h3>
+
+```shell
+{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
+pnpm {% if conversions.toPnpmCommands[params.command] %}{{ conversions.toPnpmCommands[params.command] | safe }}{% else %}{{ params.command | safe }}{% endif -%}{% for arg in params.args %} {{ conversions.toPnpmArgs[arg] | safe}}{% endfor %}{% for package in params.packages %} {{ package | safe }}{% endfor %}
+```
+
+   </div>
+   <div class="c-tabs__tabpanel" data-tabpanel>
+      <h3 class="h6 c-tabs__tabpanel__title">bun</h3>
+
+```shell
+{% if params.comment %}# {{params.comment | safe}}{{"\n"}}{% endif -%}
+bun {% if conversions.toBunCommands[params.command] %}{{ conversions.toBunCommands[params.command] | safe }}{% else %}{{ params.command | safe }}{% endif -%}{% for arg in params.args %} {{ conversions.toBunArgs[arg] | safe }}{% endfor %}{% for package in params.packages %} {{ package | safe }}{% endfor %}
+```
+
+   </div>
+</div>
+{%- endmacro -%}
@@ -0,0 +1,46 @@
+{%- macro npx_tabs(params) -%}
+<div class="c-tabs" data-tabs>
+   <div class="c-tabs__tablist" data-tablist hidden>
+      <button class="c-tabs__tab" data-tab>npm</button>
+      <button class="c-tabs__tab" data-tab>yarn</button>
+      <button class="c-tabs__tab" data-tab>pnpm</button>
+      <button class="c-tabs__tab" data-tab>bun</button>
+   </div>
+   <div class="c-tabs__tabpanel" data-tabpanel>
+      <h3 class="h6 c-tabs__tabpanel__title">npm</h3>
+
+```shell
+{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
+{% if params.previousCommands %}{% for item in params.previousCommands %}{{ item | safe }} {% endfor %}| {% endif -%}npx {{ params.package | safe }} {% for item in params.args %}{{ item | safe }} {% endfor %}
+```
+
+   </div>
+   <div class="c-tabs__tabpanel" data-tabpanel>
+      <h3 class="h6 c-tabs__tabpanel__title">yarn</h3>
+
+```shell
+{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
+{% if params.previousCommands %}{% for item in params.previousCommands %}{{ item | safe }} {% endfor %}| {% endif -%}yarn dlx {{ params.package | safe }} {% for item in params.args %}{{ item | safe }} {% endfor %}
+```
+
+   </div>
+   <div class="c-tabs__tabpanel" data-tabpanel>
+      <h3 class="h6 c-tabs__tabpanel__title">pnpm</h3>
+
+```shell
+{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
+{% if params.previousCommands %}{% for item in params.previousCommands %}{{ item | safe }} {% endfor %}| {% endif -%}pnpm dlx {{ params.package | safe }} {% for item in params.args %}{{ item | safe }} {% endfor %}
+```
+
+   </div>
+   <div class="c-tabs__tabpanel" data-tabpanel>
+      <h3 class="h6 c-tabs__tabpanel__title">bun</h3>
+
+```shell
+{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
+{% if params.previousCommands %}{% for item in params.previousCommands %}{{ item | safe }} {% endfor %}| {% endif -%}bunx {{ params.package | safe }} {% for item in params.args %}{{ item | safe }} {% endfor %}
+```
+
+   </div>
+</div>
+{%- endmacro -%}
@@ -7,6 +7,8 @@ eleventyNavigation:
     order: 6
 ---
 
+{%- from 'components/npm_tabs.macro.html' import npm_tabs with context %}
+
 ESLint has a very lightweight development environment that makes updating code fast and easy. This is a step-by-step guide to setting up a local development environment that will let you contribute back to the project.
 
 ## Step 1: Install Node.js
@@ -29,9 +31,14 @@ Once you've cloned the repository, run `npm install` to get all the necessary de
 
 ```shell
 cd eslint
-npm install
 ```
 
+{{ npm_tabs({
+    command: "install",
+    packages: [],
+    args: []
+}) }}
+
 You must be connected to the Internet for this step to work. You'll see a lot of utilities being downloaded.
 
 **Note:** It's a good idea to re-run `npm install` whenever you pull from the main repository to ensure you have the latest development dependencies.
@@ -52,15 +59,19 @@ Now, the remote `upstream` points to the upstream source.
 
 [Yeoman](https://yeoman.io) is a scaffold generator that ESLint uses to help streamline development of new rules. If you don't already have Yeoman installed, you can install it via npm:
 
-```shell
-npm install -g yo
-```
+{{ npm_tabs({
+    command: "install",
+    packages: ["yo"],
+    args: ["--global"]
+}) }}
 
 Then, you can install the ESLint Yeoman generator:
 
-```shell
-npm install -g generator-eslint
-```
+{{ npm_tabs({
+    command: "install",
+    packages: ["generator-eslint"],
+    args: ["--global"]
+}) }}
 
 Please see the [generator documentation](https://github.com/eslint/generator-eslint) for instructions on how to use it.
 
 
@@ -8,6 +8,8 @@ eleventyNavigation:
 
 ---
 
+{%- from 'components/npm_tabs.macro.html' import npm_tabs with context %}
+
 ESLint custom parsers let you extend ESLint to support linting new non-standard JavaScript language features or custom syntax in your code. A parser is responsible for taking your code and transforming it into an abstract syntax tree (AST) that ESLint can then analyze and lint.
 
 ## Creating a Custom Parser
@@ -117,9 +119,11 @@ For more information on publishing an npm package, refer to the [npm documentati
 
 Once you've published the npm package, you can use it by adding the package to your project. For example:
 
-```shell
-npm install eslint-parser-myparser --save-dev
-```
+{{ npm_tabs({
+    command: "install",
+    packages: ["eslint-parser-myparser"],
+    args: ["--save-dev"]
+}) }}
 
 Then add the custom parser to your ESLint configuration file with the `languageOptions.parser` property. For example:
 
 
@@ -6,6 +6,10 @@ eleventyNavigation:
     title: Custom Rule Tutorial
     order: 1
 ---
+
+{%- from 'components/npm_tabs.macro.html' import npm_tabs with context %}
+{%- from 'components/npx_tabs.macro.html' import npx_tabs %}
+
 This tutorial covers how to create a custom rule for ESLint and distribute it with a plugin.
 
 You can create custom rules to validate if your code meets a certain expectation, and determine what to do if it does not meet that expectation. Plugins package custom rules and other configuration, allowing you to easily share and reuse them in different projects.
@@ -189,9 +193,11 @@ touch enforce-foo-bar.test.js
 
 You will use the `eslint` package in the test file. Install it as a development dependency:
 
-```shell
-npm install eslint --save-dev
-```
+{{ npm_tabs({
+    command: "install",
+    packages: ["eslint"],
+    args: ["--save-dev"]
+}) }}
 
 And add a test script to your `package.json` file to run the tests:
 
@@ -345,9 +351,10 @@ Now you're ready to test the custom rule with the locally defined plugin.
 
 Run ESLint on `example.js`:
 
-```shell
-npx eslint example.js
-```
+{{ npx_tabs({
+    package: "eslint",
+    args: ["example.js"]
+}) }}
 
 This produces the following output in the terminal:
 
@@ -411,9 +418,12 @@ Next, you can use the published plugin.
 
 Run the following command in your project to download the package:
 
-```shell
-npm install --save-dev eslint-plugin-example # Add your package name here
-```
+{{ npm_tabs({
+    command: "install",
+    packages: ["eslint-plugin-example"],
+    args: ["--save-dev"],
+    comment: "Add your package name here"
+}) }}
 
 Update the `eslint.config.js` to use the packaged version of the plugin:
 
@@ -431,9 +441,10 @@ Now you're ready to test the custom rule.
 
 Run ESLint on the `example.js` file you created in step 8, now with the downloaded plugin:
 
-```shell
-npx eslint example.js
-```
+{{ npx_tabs({
+    package: "eslint",
+    args: ["example.js"]
+}) }}
 
 This produces the following output in the terminal:
 
@@ -449,9 +460,10 @@ As you can see in the above message, you can actually fix the issue with the `--
 
 Run ESLint again with the `--fix` flag:
 
-```shell
-npx eslint example.js --fix
-```
+{{ npx_tabs({
+    package: "eslint",
+    args: ["example.js", "--fix"]
+}) }}
 
 There is no error output in the terminal when you run this, but you can see the fix applied in `example.js`. You should see the following:
 
 
@@ -7,6 +7,8 @@ eleventyNavigation:
     order: 6
 ---
 
+{%- from 'components/npx_tabs.macro.html' import npx_tabs %}
+
 While an analysis of the overall rule performance for an ESLint run can be carried out by setting the [TIMING](./custom-rules#profile-rule-performance) environment variable, it can sometimes be useful to acquire more *granular* timing data (lint time per file per rule) or collect other measures of interest. In particular, when developing new [custom plugins](./plugins) and evaluating/benchmarking new languages or rule sets. For these use cases, you can optionally collect runtime statistics from ESLint.
 
 ## Enable stats collection
@@ -51,9 +53,10 @@ function a() {
 
 Run ESLint with `--stats` and output to JSON via the built-in [`json` formatter](../use/formatters/):
 
-```bash
-npx eslint file-to-fix.js --fix --stats -f json
-```
+{{ npx_tabs({
+    package: "eslint",
+    args: ["file-to-fix.js", "--fix", "--stats", "-f", "json"]
+}) }}
 
 This yields the following `stats` entry as part of the formatted lint results object:
 
 
@@ -7,6 +7,8 @@ eleventyNavigation:
     order: 1
 ---
 
+{%- from 'components/npm_tabs.macro.html' import npm_tabs with context %}
+
 This guide walks you through integrating the `ESLint` class to lint files and
 retrieve results, which can be useful for creating integrations with other
 projects.
@@ -65,15 +67,19 @@ cd eslint-integration
 
 Initialize the project with a `package.json` file:
 
-```shell
-npm init -y
-```
+{{ npm_tabs({
+    command: "init",
+    packages: [],
+    args: ["-y"]
+}) }}
 
 Install the `eslint` package as a dependency (**not** as a dev dependency):
 
-```shell
-npm install eslint
-```
+{{ npm_tabs({
+    command: "install",
+    packages: ["eslint"],
+    args: []
+}) }}
 
 Create a new file called `example-eslint-integration.js` in the project root:
 
 
@@ -8,6 +8,8 @@ eleventyNavigation:
     order: 6
 ---
 
+{%- from 'components/npx_tabs.macro.html' import npx_tabs %}
+
 ESLint ships experimental and future breaking changes behind feature flags to let users opt-in to behavior they want. Flags are used in these situations:
 
 1. When a feature is experimental and not ready to be enabled for everyone.
@@ -66,9 +68,10 @@ Because feature flags are strictly opt-in, you need to manually enable the flags
 
 On the command line, you can specify feature flags using the `--flag` option. You can specify as many flags as you'd like:
 
-```shell
-npx eslint --flag flag_one --flag flag_two file.js
-```
+{{ npx_tabs({
+    package: "eslint",
+    args: ["--flag", "flag_one", "--flag", "flag_two", "file.js"]
+}) }}
 
 ### Enable Feature Flags with the API