Code Editor linting docs #2750
Open
Code Editor linting docs #2750
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
LilithJames-HDS
approved these changes
Mar 10, 2025
shleewhite
reviewed
Mar 11, 2025
dchyun
reviewed
Mar 11, 2025
website/docs/components/code-editor/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/components/code-editor/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
| @@ -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
website/docs/components/code-editor/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/components/code-editor/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/components/code-editor/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/components/code-editor/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
heatherlarsen
requested changes
Mar 12, 2025
There was a problem hiding this comment.
@LilithJames-HDS I left one suggestion about the copy. We also need to update the old screenshots in the guidelines because the line height has changed.
| @@ -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.
[suggestion] remove the duplicative content that's also available below with a visual example.
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. |
There was a problem hiding this comment.
Thanks for catching that! I've updated the images and text now
heatherlarsen
approved these changes
Mar 13, 2025
Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
…ines.md Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
zamoore
force-pushed
the
zamoore/HDS-4361/CodeEditor-linting
branch
from
a84f6e6 to
62711d0
Compare
shleewhite
approved these changes
Mar 18, 2025
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