New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: add playground links to correct and incorrect code blocks #17306
Changes from 2 commits
9ec7284
09d5bef
911656e
077ca1e
2a08889
91d2801
538ec30
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -146,10 +146,7 @@ pre[class*="language-"] { | |
right: 0.5rem; | ||
offset-block-end: 0.5rem; | ||
offset-inline-end: 0.5rem; | ||
|
||
@media all and (max-width: 768px) { | ||
display: none; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This would be an accessibility issue. Users on less-wide screens, such as mobile phones and zoomed-in desktop displays, still would want to be able to access the Open in Playground button. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For this, I'll have to ask @nzakas what the original intention was. The Playground is quite good on small screens, but this button is very likely to cover the code: Though that can happen on wider screens too, depending on the text. Perhaps the button should be below the code block? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like the idea of moving the button below in mobile screens, yeah. Will wait to implement until directed to 👍 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, the intent was that smaller screens (mobile) would probably not want to use the playground as it's a bit clunky without a keyboard. However, I'm not opposed to moving the button underneath the code block. That seems like a nice compromise to keep the functionality available without disrupting the UI too much. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Super, that's two votes in favor - I had a 💡 moment and moved the button to be half overlapping, half under the code block. That way it takes up much less vertical space and doesn't overlap lines of code. |
||
z-index: 1; | ||
} | ||
|
||
@media (hover: none) { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -44,7 +44,7 @@ This rule disallows `var` and `function` declarations at the top-level script sc | |
|
||
Examples of **incorrect** code for this rule: | ||
|
||
::: incorrect | ||
::: incorrect { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/*eslint no-implicit-globals: "error"*/ | ||
|
@@ -58,7 +58,7 @@ function bar() {} | |
|
||
Examples of **correct** code for this rule: | ||
|
||
::: correct | ||
::: correct { "parserOptions": { "sourceType": "script" } } | ||
mdjermanovic marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```js | ||
/*eslint no-implicit-globals: "error"*/ | ||
|
@@ -79,7 +79,7 @@ window.bar = function() {}; | |
|
||
Examples of **correct** code for this rule with `"parserOptions": { "sourceType": "module" }` in the ESLint configuration: | ||
|
||
::: correct | ||
::: correct { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/*eslint no-implicit-globals: "error"*/ | ||
|
@@ -100,7 +100,7 @@ This does not apply to ES modules since the module code is implicitly in `strict | |
|
||
Examples of **incorrect** code for this rule: | ||
|
||
::: incorrect | ||
::: incorrect { "parserOptions": { "sourceType": "script" } } | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe we can make this configuration as the default value to reduce duplicate definitions? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Amusingly, right now there are exactly equal amounts of manual
...and a few more
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ah, looking at https://github.com/eslint/eslint.org/pull/451/files#r1257245140, |
||
|
||
```js | ||
/*eslint no-implicit-globals: "error"*/ | ||
|
@@ -127,7 +127,7 @@ or in a `/*global */` comment. | |
|
||
Examples of **incorrect** code for this rule: | ||
|
||
::: incorrect | ||
::: incorrect { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/*eslint no-implicit-globals: "error"*/ | ||
|
@@ -155,7 +155,7 @@ If the variable is intended to be local to the script, wrap the code with a bloc | |
|
||
Examples of **correct** code for this rule with `"lexicalBindings"` option set to `false` (default): | ||
|
||
::: correct | ||
::: correct { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/*eslint no-implicit-globals: ["error", {"lexicalBindings": false}]*/ | ||
|
@@ -171,7 +171,7 @@ class Bar {} | |
|
||
Examples of **incorrect** code for this rule with `"lexicalBindings"` option set to `true`: | ||
|
||
::: incorrect | ||
::: incorrect { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/ | ||
|
@@ -187,7 +187,7 @@ class Bar {} | |
|
||
Examples of **correct** code for this rule with `"lexicalBindings"` option set to `true`: | ||
|
||
::: correct | ||
::: correct { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/ | ||
|
@@ -221,7 +221,7 @@ Even the `typeof` check is not safe from TDZ reference exceptions. | |
|
||
Examples of **incorrect** code for this rule with `"lexicalBindings"` option set to `true`: | ||
|
||
::: incorrect | ||
::: incorrect { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/ | ||
|
@@ -239,7 +239,7 @@ const MyGlobalFunction = (function() { | |
|
||
Examples of **correct** code for this rule with `"lexicalBindings"` option set to `true`: | ||
|
||
::: correct | ||
::: correct { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/ | ||
|
@@ -261,7 +261,7 @@ You can use `/* exported variableName */` block comments in the same way as in [ | |
|
||
Examples of **correct** code for `/* exported variableName */` operation: | ||
|
||
::: correct | ||
::: correct { "parserOptions": { "sourceType": "script" } } | ||
|
||
```js | ||
/* exported global_var */ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note that this hits what looks like an existing bug in the playground: eslint/eslint.org#450. My intuition is that it'd be better to fix the bug there and allow smaller URLs, rather than backfill in playground-specific default information here.