Code Editor linting docs #2750
Open
Code Editor linting docs #2750
+26
−2
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
zamoore
force-pushed
the
zamoore/HDS-4361/CodeEditor-linting
branch
from
c192a50 to
02e764e
Compare
zamoore
force-pushed
the
zamoore/HDS-4361/CodeEditor-linting-website
branch
from
c1811e4 to
0f49b5b
Compare
Co-authored-by: Heather Larsen <[email protected]>
…ines.md Co-authored-by: Lee White <[email protected]>
…ines.md Co-authored-by: Lee White <[email protected]>
…ines.md Co-authored-by: Lee White <[email protected]>
…ines.md Co-authored-by: Lee White <[email protected]>
…ines.md Co-authored-by: Lee White <[email protected]>
…ines.md Co-authored-by: Lee White <[email protected]>
LilithJames-HDS
approved these changes
Mar 10, 2025
shleewhite
reviewed
Mar 11, 2025
| @@ -32,6 +32,9 @@ This component uses [CodeMirror 6](https://codemirror.net/) under the hood. | |||
| <C.Property @name="hasLineWrapping" @type="boolean" @default="false"> | |||
| Enables line wrapping within the editor. | |||
| </C.Property> | |||
| <C.Property @name="isLintingEnabled" @type="boolean" @default="false"> | |||
There was a problem hiding this comment.
Could you add an example to the how to use section? Would be good to have a place where people can test it out/ and warn them again that it only works with JSON.
dchyun
reviewed
Mar 11, 2025
| The Code Editor supports linting for JSON using [CodeMirror6](https://codemirror.net/examples/lint/). This feature highlights all errors with an underline and an icon next to the line number. Each icon has a tooltip explaining the error on the associated line. To view all alerts in the editor, users can open a dialog using Ctrl-Shift-m (Cmd-Shift-m on macOS). | ||
|
|
||
| !!! Info | ||
| This component is only available in Ember and is not supported in Figma. |
There was a problem hiding this comment.
Suggested change
| This component is only available in Ember and is not supported in Figma. | |
| Linting is only available in the Ember component and is not supported in Figma. |
[Suggestion] Make banner more specific to linting so it's not taken out of context.
|
|
||
|  | ||
|
|
||
| When linting is enabled, the CodeEditor will have a minimum height set by default to avoid the alert dialog covering all the content within the editor when opened. The minimum height for the CodeEditor with linting is 160px. The linting alert dialog is always 80px in height. |
There was a problem hiding this comment.
Suggested change
| When linting is enabled, the CodeEditor will have a minimum height set by default to avoid the alert dialog covering all the content within the editor when opened. The minimum height for the CodeEditor with linting is 160px. The linting alert dialog is always 80px in height. | |
| When linting is enabled, the Code Editor will have a minimum height set by default to avoid the alert dialog covering all the content within the editor when opened. The minimum height for the Code Editor with linting is 160px. The linting alert dialog is always 80px in height. |
[Nit] Align to how component is named elsewhere.
| @@ -104,3 +104,22 @@ In **Figma** we provide a handful of example languages intended as visual exampl | |||
|
|
|||
| If you wish to create custom examples using the Code Editor, we publish all of the relevant syntax highlighting variables in the [HDS Components v2.0](https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67166-37020&t=gWdKy44MzTP4cTRo-1) library. However, due to the number of languages supported by the component, the color variables use a generic naming schema (e.g., cyan, red, purple) to remain as agnostic as possible when being applied to different languages. | |||
| For more details around syntax, visit the [specifications](/components/code-editor?tab=specifications). | |||
|
|
|||
| ## Linting | |||
| The Code Editor supports linting for JSON using [CodeMirror6](https://codemirror.net/examples/lint/). This feature highlights all errors with an underline and an icon next to the line number. Each icon has a tooltip explaining the error on the associated line. To view all alerts in the editor, users can open a dialog using Ctrl-Shift-m (Cmd-Shift-m on macOS). | |||
There was a problem hiding this comment.
Suggested change
| The Code Editor supports linting for JSON using [CodeMirror6](https://codemirror.net/examples/lint/). This feature highlights all errors with an underline and an icon next to the line number. Each icon has a tooltip explaining the error on the associated line. To view all alerts in the editor, users can open a dialog using Ctrl-Shift-m (Cmd-Shift-m on macOS). | |
| The Code Editor supports linting for JSON using [CodeMirror6](https://codemirror.net/examples/lint/). This feature highlights all errors with an underline and an icon next to the line number. Each icon has a tooltip explaining the error on the associated line. To view all alerts in the editor, open the alert dialog using Ctrl-Shift-m (Cmd-Shift-m on macOS). |
[Nit] Use more active language
|
|
||
|  | ||
|
|
||
| To view all alerts in the editor, users can open a dialog using Ctrl-Shift-m (Cmd-Shift-m on macOS). |
There was a problem hiding this comment.
Suggested change
| To view all alerts in the editor, users can open a dialog using Ctrl-Shift-m (Cmd-Shift-m on macOS). | |
| To view all alerts in the editor, open the alert dialog using Ctrl-Shift-m (Cmd-Shift-m on macOS). |
[Nit] Use more active language
|
|
||
|  | ||
|
|
||
| If you require linting for addition languages [contact the HDS team](/about/support). |
There was a problem hiding this comment.
Suggested change
| If you require linting for addition languages [contact the HDS team](/about/support). | |
| If you require linting for additional languages, [contact the Design Systems Team](/about/support). |
[Nit] Align to how we phrase this elsewhere
| This component is only available in Ember and is not supported in Figma. | ||
| !!! | ||
|
|
||
|  |
There was a problem hiding this comment.
Suggested change
|  | |
|  |
[Issue] Add alt text
|
|
||
| When linting is enabled, the CodeEditor will have a minimum height set by default to avoid the alert dialog covering all the content within the editor when opened. The minimum height for the CodeEditor with linting is 160px. The linting alert dialog is always 80px in height. | ||
|
|
||
|  |
There was a problem hiding this comment.
Suggested change
|  | |
|  |
[Issue] Add alt text
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 Summary
If merged, this PR will add a section at the end of the Guidelines page for CodeEditor that describes the linting feature available to users only in the JSON language variant of the CodeEditor.
Also adds how-to-use code documentation.
🛠️ Detailed description
Brief description added. Questions for the team:
🔗 External links
Jira ticket: HDS4629
Figma file: Preview of linting