Skip to content

Commit 8e1a898

Browse files
Jay-KariaTanujkanti4441amareshsm
authored
docs: add tabs to cli code blocks (#18784)
* feat: add tabs component * docs: add tabs in ci reference page * docs: add tabs in dev env page * docs: add tabs in 7 pages The pages are Tests, PRs, Custom Parsers, Integration Tutorials, flags, config files and debug. * docs: add tabs to 6 pages * fix: parsing problems * chore: remove code_tabs component Added two other macro components * chore: add npx tabs component * feat: add tabs component * docs: add tabs in ci reference page * docs: add tabs in dev env page * docs: add tabs in 7 pages The pages are Tests, PRs, Custom Parsers, Integration Tutorials, flags, config files and debug. * docs: add tabs to 6 pages * fix: parsing problems * chore: remove code_tabs component Added two other macro components * chore: add npx tabs component * chore: revert * feat: add tabs component * docs: add tabs in ci reference page * docs: add tabs in dev env page * docs: add tabs in 7 pages The pages are Tests, PRs, Custom Parsers, Integration Tutorials, flags, config files and debug. * docs: add tabs to 6 pages * fix: parsing problems * chore: remove code_tabs component Added two other macro components * chore: add npx tabs component * feat: add tabs component * fix: parsing problems * chore: remove code_tabs component Added two other macro components * chore: revert * feat: npx_tabs component * chore: update params * chore: update comments in the component * fix: params Co-authored-by: Tanuj Kanti <[email protected]> * fix: comment render Co-authored-by: Tanuj Kanti <[email protected]> * docs: add npx component to all pages except cli ref * fix: typo * docs: add npx component to cli ref page * fix: commands * docs: convert all the npm commands * fix:linting * fix: remove test commands conversion * fix: param name Co-authored-by: Tanuj Kanti <[email protected]> * fix: command Co-authored-by: Tanuj Kanti <[email protected]> * fix: npx command Co-authored-by: Tanuj Kanti <[email protected]> * fix: commands from create to init * fix: typos in commands * fix: counting of the steps * fix: typo Co-authored-by: Tanuj Kanti <[email protected]> * fix: rearranged command and args also added npm tab component to config files page * fix: linting * fix: command Co-authored-by: Tanuj Kanti <[email protected]> * fix: args order Co-authored-by: Tanuj Kanti <[email protected]> * fix: spacing Co-authored-by: Tanuj Kanti <[email protected]> * fix: test commands * fix: create and init commands * chore: remove extra line * fix: argument names and removed unsused imports * fix: package name Co-authored-by: Tanuj Kanti <[email protected]> * fix: component render Co-authored-by: Tanuj Kanti <[email protected]> * docs: add npx component to stats page * fix: remove extra line * fix: styling * fix: build * Update docs/src/_includes/components/npx_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npx_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npx_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npx_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npx_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npx_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npx_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npx_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * chore: add command conversion json data * chore: add semicolon * delete conversions.js * rename conversions.json * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/contribute/development-environment.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Delete docs/src/_includes/components/_globals.html * Update docs/src/extend/custom-parsers.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/extend/custom-rule-tutorial.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/integrate/integration-tutorial.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/use/command-line-interface.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/use/configure/configuration-files.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/use/migrating-from-jscs.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/use/getting-started.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/use/configure/migration-guide.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_data/conversions.json Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/use/getting-started.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/use/getting-started.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/use/getting-started.md Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_data/conversions.json Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_data/conversions.json Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_data/conversions.json Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_data/conversions.json Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Amaresh S M <[email protected]> * fix: npm tab indentation * chore: remove extra conversion field * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_includes/components/npm_tabs.macro.html Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_data/conversions.json Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_data/conversions.json Co-authored-by: Tanuj Kanti <[email protected]> * Update docs/src/_data/conversions.json Co-authored-by: Tanuj Kanti <[email protected]> * fix: lint * remove `comment: null` from npx_tabs --------- Co-authored-by: Tanuj Kanti <[email protected]> Co-authored-by: Amaresh S M <[email protected]>
1 parent f3aeefb commit 8e1a898

File tree

17 files changed

+659
-307
lines changed

17 files changed

+659
-307
lines changed

‎docs/src/_data/conversions.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"toNpmCommands": {
3+
"install": "install",
4+
"init": "init",
5+
"init-create": "init"
6+
},
7+
"toNpmArgs": {
8+
"--global": "--global",
9+
"--save-dev": "--save-dev",
10+
"-y": "-y"
11+
},
12+
"toYarnCommands": {
13+
"install": "add",
14+
"init": "init",
15+
"init-create": "create"
16+
},
17+
"toYarnArgs": {
18+
"--global": "global",
19+
"--save-dev": "--dev",
20+
"-y": "-y"
21+
},
22+
"toPnpmCommands" : {
23+
"install": "add",
24+
"init": "init",
25+
"init-create": "create"
26+
},
27+
"toPnpmArgs" : {
28+
"--global": "--global",
29+
"--save-dev": "--save-dev",
30+
"-y": "-y"
31+
} ,
32+
"toBunCommands" : {
33+
"install": "add",
34+
"init": "init",
35+
"init-create": "create"
36+
},
37+
"toBunArgs" : {
38+
"--global": "--global",
39+
"--save-dev": "--dev",
40+
"-y": "-y"
41+
}
42+
}

‎docs/src/_includes/components/npm_tabs.macro.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{%- macro npm_tabs(params) -%}
2+
<div class="c-tabs" data-tabs>
3+
<div class="c-tabs__tablist" data-tablist hidden>
4+
<button class="c-tabs__tab" data-tab>npm</button>
5+
<button class="c-tabs__tab" data-tab>yarn</button>
6+
<button class="c-tabs__tab" data-tab>pnpm</button>
7+
<button class="c-tabs__tab" data-tab>bun</button>
8+
</div>
9+
<div class="c-tabs__tabpanel" data-tabpanel>
10+
<h3 class="h6 c-tabs__tabpanel__title">npm</h3>
11+
12+
```shell
13+
{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
14+
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 %}
15+
```
16+
17+
</div>
18+
<div class="c-tabs__tabpanel" data-tabpanel>
19+
<h3 class="h6 c-tabs__tabpanel__title">yarn</h3>
20+
21+
```shell
22+
{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
23+
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 %}
24+
```
25+
26+
</div>
27+
<div class="c-tabs__tabpanel" data-tabpanel>
28+
<h3 class="h6 c-tabs__tabpanel__title">pnpm</h3>
29+
30+
```shell
31+
{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
32+
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 %}
33+
```
34+
35+
</div>
36+
<div class="c-tabs__tabpanel" data-tabpanel>
37+
<h3 class="h6 c-tabs__tabpanel__title">bun</h3>
38+
39+
```shell
40+
{% if params.comment %}# {{params.comment | safe}}{{"\n"}}{% endif -%}
41+
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 %}
42+
```
43+
44+
</div>
45+
</div>
46+
{%- endmacro -%}

‎docs/src/_includes/components/npx_tabs.macro.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{%- macro npx_tabs(params) -%}
2+
<div class="c-tabs" data-tabs>
3+
<div class="c-tabs__tablist" data-tablist hidden>
4+
<button class="c-tabs__tab" data-tab>npm</button>
5+
<button class="c-tabs__tab" data-tab>yarn</button>
6+
<button class="c-tabs__tab" data-tab>pnpm</button>
7+
<button class="c-tabs__tab" data-tab>bun</button>
8+
</div>
9+
<div class="c-tabs__tabpanel" data-tabpanel>
10+
<h3 class="h6 c-tabs__tabpanel__title">npm</h3>
11+
12+
```shell
13+
{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
14+
{% if params.previousCommands %}{% for item in params.previousCommands %}{{ item | safe }} {% endfor %}| {% endif -%}npx {{ params.package | safe }} {% for item in params.args %}{{ item | safe }} {% endfor %}
15+
```
16+
17+
</div>
18+
<div class="c-tabs__tabpanel" data-tabpanel>
19+
<h3 class="h6 c-tabs__tabpanel__title">yarn</h3>
20+
21+
```shell
22+
{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
23+
{% 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 %}
24+
```
25+
26+
</div>
27+
<div class="c-tabs__tabpanel" data-tabpanel>
28+
<h3 class="h6 c-tabs__tabpanel__title">pnpm</h3>
29+
30+
```shell
31+
{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
32+
{% 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 %}
33+
```
34+
35+
</div>
36+
<div class="c-tabs__tabpanel" data-tabpanel>
37+
<h3 class="h6 c-tabs__tabpanel__title">bun</h3>
38+
39+
```shell
40+
{% if params.comment %}# {{ params.comment | safe }}{{ "\n" }}{% endif -%}
41+
{% if params.previousCommands %}{% for item in params.previousCommands %}{{ item | safe }} {% endfor %}| {% endif -%}bunx {{ params.package | safe }} {% for item in params.args %}{{ item | safe }} {% endfor %}
42+
```
43+
44+
</div>
45+
</div>
46+
{%- endmacro -%}

‎docs/src/contribute/development-environment.md‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ eleventyNavigation:
77
order: 6
88
---
99

10+
{%- from 'components/npm_tabs.macro.html' import npm_tabs with context %}
11+
1012
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.
1113

1214
## Step 1: Install Node.js
@@ -29,9 +31,14 @@ Once you've cloned the repository, run `npm install` to get all the necessary de
2931

3032
```shell
3133
cd eslint
32-
npm install
3334
```
3435

36+
{{ npm_tabs({
37+
command: "install",
38+
packages: [],
39+
args: []
40+
}) }}
41+
3542
You must be connected to the Internet for this step to work. You'll see a lot of utilities being downloaded.
3643

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

5360
[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:
5461

55-
```shell
56-
npm install -g yo
57-
```
62+
{{ npm_tabs({
63+
command: "install",
64+
packages: ["yo"],
65+
args: ["--global"]
66+
}) }}
5867

5968
Then, you can install the ESLint Yeoman generator:
6069

61-
```shell
62-
npm install -g generator-eslint
63-
```
70+
{{ npm_tabs({
71+
command: "install",
72+
packages: ["generator-eslint"],
73+
args: ["--global"]
74+
}) }}
6475

6576
Please see the [generator documentation](https://github.com/eslint/generator-eslint) for instructions on how to use it.
6677

‎docs/src/extend/custom-parsers.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ eleventyNavigation:
88

99
---
1010

11+
{%- from 'components/npm_tabs.macro.html' import npm_tabs with context %}
12+
1113
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.
1214

1315
## Creating a Custom Parser
@@ -117,9 +119,11 @@ For more information on publishing an npm package, refer to the [npm documentati
117119

118120
Once you've published the npm package, you can use it by adding the package to your project. For example:
119121

120-
```shell
121-
npm install eslint-parser-myparser --save-dev
122-
```
122+
{{ npm_tabs({
123+
command: "install",
124+
packages: ["eslint-parser-myparser"],
125+
args: ["--save-dev"]
126+
}) }}
123127

124128
Then add the custom parser to your ESLint configuration file with the `languageOptions.parser` property. For example:
125129

‎docs/src/extend/custom-rule-tutorial.md‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ eleventyNavigation:
66
title: Custom Rule Tutorial
77
order: 1
88
---
9+
10+
{%- from 'components/npm_tabs.macro.html' import npm_tabs with context %}
11+
{%- from 'components/npx_tabs.macro.html' import npx_tabs %}
12+
913
This tutorial covers how to create a custom rule for ESLint and distribute it with a plugin.
1014

1115
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
189193

190194
You will use the `eslint` package in the test file. Install it as a development dependency:
191195

192-
```shell
193-
npm install eslint --save-dev
194-
```
196+
{{ npm_tabs({
197+
command: "install",
198+
packages: ["eslint"],
199+
args: ["--save-dev"]
200+
}) }}
195201

196202
And add a test script to your `package.json` file to run the tests:
197203

@@ -345,9 +351,10 @@ Now you're ready to test the custom rule with the locally defined plugin.
345351

346352
Run ESLint on `example.js`:
347353

348-
```shell
349-
npx eslint example.js
350-
```
354+
{{ npx_tabs({
355+
package: "eslint",
356+
args: ["example.js"]
357+
}) }}
351358

352359
This produces the following output in the terminal:
353360

@@ -411,9 +418,12 @@ Next, you can use the published plugin.
411418

412419
Run the following command in your project to download the package:
413420

414-
```shell
415-
npm install --save-dev eslint-plugin-example # Add your package name here
416-
```
421+
{{ npm_tabs({
422+
command: "install",
423+
packages: ["eslint-plugin-example"],
424+
args: ["--save-dev"],
425+
comment: "Add your package name here"
426+
}) }}
417427

418428
Update the `eslint.config.js` to use the packaged version of the plugin:
419429

@@ -431,9 +441,10 @@ Now you're ready to test the custom rule.
431441

432442
Run ESLint on the `example.js` file you created in step 8, now with the downloaded plugin:
433443

434-
```shell
435-
npx eslint example.js
436-
```
444+
{{ npx_tabs({
445+
package: "eslint",
446+
args: ["example.js"]
447+
}) }}
437448

438449
This produces the following output in the terminal:
439450

@@ -449,9 +460,10 @@ As you can see in the above message, you can actually fix the issue with the `--
449460

450461
Run ESLint again with the `--fix` flag:
451462

452-
```shell
453-
npx eslint example.js --fix
454-
```
463+
{{ npx_tabs({
464+
package: "eslint",
465+
args: ["example.js", "--fix"]
466+
}) }}
455467

456468
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:
457469

‎docs/src/extend/stats.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ eleventyNavigation:
77
order: 6
88
---
99

10+
{%- from 'components/npx_tabs.macro.html' import npx_tabs %}
11+
1012
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.
1113

1214
## Enable stats collection
@@ -51,9 +53,10 @@ function a() {
5153

5254
Run ESLint with `--stats` and output to JSON via the built-in [`json` formatter](../use/formatters/):
5355

54-
```bash
55-
npx eslint file-to-fix.js --fix --stats -f json
56-
```
56+
{{ npx_tabs({
57+
package: "eslint",
58+
args: ["file-to-fix.js", "--fix", "--stats", "-f", "json"]
59+
}) }}
5760

5861
This yields the following `stats` entry as part of the formatted lint results object:
5962

‎docs/src/integrate/integration-tutorial.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ eleventyNavigation:
77
order: 1
88
---
99

10+
{%- from 'components/npm_tabs.macro.html' import npm_tabs with context %}
11+
1012
This guide walks you through integrating the `ESLint` class to lint files and
1113
retrieve results, which can be useful for creating integrations with other
1214
projects.
@@ -65,15 +67,19 @@ cd eslint-integration
6567

6668
Initialize the project with a `package.json` file:
6769

68-
```shell
69-
npm init -y
70-
```
70+
{{ npm_tabs({
71+
command: "init",
72+
packages: [],
73+
args: ["-y"]
74+
}) }}
7175

7276
Install the `eslint` package as a dependency (**not** as a dev dependency):
7377

74-
```shell
75-
npm install eslint
76-
```
78+
{{ npm_tabs({
79+
command: "install",
80+
packages: ["eslint"],
81+
args: []
82+
}) }}
7783

7884
Create a new file called `example-eslint-integration.js` in the project root:
7985

‎docs/src/pages/flags.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ eleventyNavigation:
88
order: 6
99
---
1010

11+
{%- from 'components/npx_tabs.macro.html' import npx_tabs %}
12+
1113
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:
1214

1315
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
6668

6769
On the command line, you can specify feature flags using the `--flag` option. You can specify as many flags as you'd like:
6870

69-
```shell
70-
npx eslint --flag flag_one --flag flag_two file.js
71-
```
71+
{{ npx_tabs({
72+
package: "eslint",
73+
args: ["--flag", "flag_one", "--flag", "flag_two", "file.js"]
74+
}) }}
7275

7376
### Enable Feature Flags with the API
7477

0 commit comments

Comments
 (0)