Skip to content

Conversation

zzxthehappiest
Copy link

@zzxthehappiest zzxthehappiest commented May 8, 2025

Description

This PR is to add support for autofix of sort-keys. (#17 )

It seems "sort-keys-fix" only accept caseSentive and natural values, there is no allowLineSeparatedGroups and minKeys, and this project seems not actively maintained. I found this fork: https://www.npmjs.com/package/eslint-plugin-sort-keys-plus which supports the allowLineSeparatedGroups and minKeys.

Checklist

  • The PR satisfies the contribution guidelines.
  • This is a breaking change and that has been indicated in the PR title, OR this isn't a
    breaking change.
  • Necessary docs have been updated, OR no docs need to be updated.

Validation performed

Run eslint . at the root directory of this project, and found 13 warnings (before use eslint-plugin-sort-keys-plus there were much more warnings because it didn't allow line separated groups and minimum keys) and 1 error, and all warnings were related to sort issues:

  102:21  warning  Expected object keys to be in natural ascending order. 'beforeBlockComment' should be before 'ignorePattern'       sort-keys-plus/sort-keys
  103:21  warning  Expected object keys to be in natural ascending order. 'afterBlockComment' should be before 'beforeBlockComment'   sort-keys-plus/sort-keys
  105:21  warning  Expected object keys to be in natural ascending order. 'afterLineComment' should be before 'beforeLineComment'     sort-keys-plus/sort-keys
  106:21  warning  Expected object keys to be in natural ascending order. 'afterHashbangComment' should be before 'afterLineComment'  sort-keys-plus/sort-keys
  108:21  warning  Expected object keys to be in natural ascending order. 'allowBlockEnd' should be before 'allowBlockStart'          sort-keys-plus/sort-keys
  110:21  warning  Expected object keys to be in natural ascending order. 'allowClassEnd' should be before 'allowClassStart'          sort-keys-plus/sort-keys
  112:21  warning  Expected object keys to be in natural ascending order. 'allowObjectEnd' should be before 'allowObjectStart'        sort-keys-plus/sort-keys
  113:21  warning  Expected object keys to be in natural ascending order. 'allowArrayStart' should be before 'allowObjectEnd'         sort-keys-plus/sort-keys
  114:21  warning  Expected object keys to be in natural ascending order. 'allowArrayEnd' should be before 'allowArrayStart'          sort-keys-plus/sort-keys
  118:21  warning  Expected object keys to be in natural ascending order. 'allowEnumEnd' should be before 'allowEnumStart'            sort-keys-plus/sort-keys
  120:21  warning  Expected object keys to be in natural ascending order. 'allowInterfaceEnd' should be before 'allowInterfaceStart'  sort-keys-plus/sort-keys
  122:21  warning  Expected object keys to be in natural ascending order. 'allowModuleEnd' should be before 'allowModuleStart'        sort-keys-plus/sort-keys
  124:21  warning  Expected object keys to be in natural ascending order. 'allowTypeEnd' should be before 'allowTypeStart'            sort-keys-plus/sort-keys

It is surprising that the lint project itself is not well linted -_-||

And then I use WebStorm to check these warnings, it can show the fix option with yellow warning like:
image

Summary by CodeRabbit

  • Chores
    • Updated ESLint configuration to include the sort-keys-plus plugin for improved key sorting enforcement.
    • Added eslint-plugin-sort-keys-plus as a peer dependency.

@zzxthehappiest zzxthehappiest requested a review from a team as a code owner May 8, 2025 12:18
Copy link

coderabbitai bot commented May 8, 2025

Walkthrough

The ESLint configuration was updated to include the eslint-plugin-sort-keys-plus plugin, with a new rule for sorting object keys replacing the standard sort-keys rule. Additionally, the package.json was modified to add eslint-plugin-sort-keys-plus as a peer dependency. No changes were made to exported or public entities.

Changes

File(s) Change Summary
CommonConfig.mjs Added eslint-plugin-sort-keys-plus to plugins and configured the sort-keys-plus/sort-keys rule with specific sorting options.
StylisticConfigArray.mjs Updated ESLint directive comments to disable/enable sort-keys-plus/sort-keys instead of the standard sort-keys rule.
package.json Added eslint-plugin-sort-keys-plus as a peer dependency.

Possibly related issues

Tip

⚡️ Faster reviews with caching
  • CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b2f2b49 and 0d52398.

📒 Files selected for processing (1)
  • StylisticConfigArray.mjs (2 hunks)
🔇 Additional comments (2)
StylisticConfigArray.mjs (2)

99-99: Directive updated: disable plugin rule
The inline ESLint comment has been correctly changed to disable sort-keys-plus/sort-keys instead of the deprecated sort-keys rule.


126-126: Directive updated: enable plugin rule
The corresponding enable comment now properly re-enables sort-keys-plus/sort-keys after the configuration block.

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between add6940 and d37b574.

📒 Files selected for processing (2)
  • CommonConfig.mjs (3 hunks)
  • package.json (1 hunks)
🔇 Additional comments (3)
package.json (1)

29-29: Add new peer dependency for eslint-plugin-sort-keys-plus
The entry "eslint-plugin-sort-keys-plus": "^1.4.0" correctly matches the plugin integration in CommonConfig.mjs. Ensure that this version is published and aligns with your desired feature set.

CommonConfig.mjs (2)

8-8: Import the SortKeysPlusPlugin
You’ve correctly added import SortKeysPlusPlugin from "eslint-plugin-sort-keys-plus";. Verify that the import path matches the peer dependency in package.json to avoid resolution errors.


22-22: Register the sort-keys-plus plugin
The line "sort-keys-plus": SortKeysPlusPlugin, under the plugins section is in the right spot and follows the existing pattern.

@junhaoliao
Copy link
Member

for the lint errors in the Stylistic rules, I believe suppressing the newly added rule (instead of sort-keys) would remove the warnings when running eslint

sometimes we do suppress the rule because alphabetic ordering could make the code harder to read (, though for the one's specifically in the StylisticConfig, it's not like we can't seperate them until groups.)

@hoophalab could you review this and provide suggestions to the above rule conflict?

@junhaoliao junhaoliao requested a review from hoophalab May 8, 2025 13:19
Copy link

@hoophalab hoophalab left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job! sort-keys-plus works exactly as expected!

For @junhaoliao 's info: replacing sort-keys with sort-keys-plus doesn't change the result of lint:fix in yscope-log-viewer, except that we need to rename this //eslint-disable line.

diff --git a/src/components/theme.tsx b/src/components/theme.tsx
@@ -71,13 +71,13 @@ const APP_THEME = extendTheme({
         body: "var(--ylv-ui-font-family)",
     },
     radius: {
-        /* eslint-disable sort-keys */
+        /* eslint-disable sort-keys-plus/sort-keys */
         xs: "2px",
         sm: "2px",
         md: "2px",
         lg: "2px",
         xl: "2px",
-        /* eslint-enable sort-keys */
+        /* eslint-enable sort-keys-plus/sort-keys */
     },
 });

@junhaoliao can give a final review after the comments are addressed.

@junhaoliao
Copy link
Member

Great job! sort-keys-plus works exactly as expected.

For @junhaoliao 's info: replacing sort-keys with sort-keys-plus doesn't change the result of lint:fix in yscope-log-viewer, except that we need to rename this //eslint-disable line.

diff --git a/src/components/theme.tsx b/src/components/theme.tsx
@@ -71,13 +71,13 @@ const APP_THEME = extendTheme({
         body: "var(--ylv-ui-font-family)",
     },
     radius: {
-        /* eslint-disable sort-keys */
+        /* eslint-disable sort-keys-plus/sort-keys */
         xs: "2px",
         sm: "2px",
         md: "2px",
         lg: "2px",
         xl: "2px",
-        /* eslint-enable sort-keys */
+        /* eslint-enable sort-keys-plus/sort-keys */
     },
 });

@junhaoliao can give a final review after the comments are addressed.

i agree that we can suppress sort-keys-plus/sort-keys instead of sort-keys.

@zzxthehappiest Could you also check whether the following repos are currently suppressing the sort-keys rule? Before we merge #17 into eslint-config-yscope, we want to ensure that the CI pipelines of projects using this linter configuration won't break due to the update.

@hoophalab
Copy link

One more comment:
@zzxthehappiest mentioned that WebStorm shows many warnings, but they seem to be coming from source files in node_modules.

Running npm run lint:fix directly on my machine doesn't show those warnings. My guess is that it's a WebStorm config issue -- it's not correctly ignoring node_modules/ as specified in eslint.config.mjs.

@hoophalab
Copy link

@zzxthehappiest Could you also check whether the following repos are currently suppressing the sort-keys rule? Before we merge #17 into eslint-config-yscope, we want to ensure that the CI pipelines of projects using this linter configuration won't break due to the update.

I confirm the line I mentioned was the only line in yscope-log-viewer that suppresses sort-keys.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
CommonConfig.mjs (1)

361-361: Disable the core sort-keys rule
This correctly turns off the built-in sort-keys rule to prevent duplicate warnings now that sort-keys-plus/sort-keys is in use.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d37b574 and b2f2b49.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (1)
  • CommonConfig.mjs (3 hunks)
🔇 Additional comments (2)
CommonConfig.mjs (2)

22-22: Register the new plugin correctly
The addition of "sort-keys-plus": SortKeysPlusPlugin to the plugins section is correct and aligns with the import.


362-366: Configure the sort-keys-plus rule
The new "sort-keys-plus/sort-keys" rule is set up correctly with your desired options (allowLineSeparatedGroups, caseSensitive, minKeys, natural).

@@ -5,6 +5,7 @@ import ImportNewlinesPlugin from "eslint-plugin-import-newlines";
import JsdocPlugin from "eslint-plugin-jsdoc";
import NoAutofixPlugin from "eslint-plugin-no-autofix";
import SimpleImportSortPlugin from "eslint-plugin-simple-import-sort";
import SortKeysPlusPlugin from "eslint-plugin-sort-keys-plus";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify plugin installation, lockfile, and documentation
Ensure that eslint-plugin-sort-keys-plus is declared in your package.json (dependencies or peerDependencies) and that you have committed the updated lockfile (package-lock.json or yarn.lock). Without this, ESLint will report a missing plugin error. Additionally, consider updating your README or other documentation to mention the new plugin and its configuration options.
You can verify installation with:


🏁 Script executed:

grep -R '"eslint-plugin-sort-keys-plus"' package.json

Length of output: 101


🏁 Script executed:

#!/bin/bash
echo "Checking package-lock.json:"
if [ -f package-lock.json ]; then
  grep -R "eslint-plugin-sort-keys-plus" package-lock.json
else
  echo "package-lock.json not found"
fi

echo "Checking yarn.lock:"
if [ -f yarn.lock ]; then
  grep -R "eslint-plugin-sort-keys-plus" yarn.lock
else
  echo "yarn.lock not found"
fi

Length of output: 492


🏁 Script executed:

#!/bin/bash
echo "Searching Markdown files for plugin mention:"
grep -R "eslint-plugin-sort-keys-plus" --include="*.md" .

Length of output: 156


Update documentation for eslint-plugin-sort-keys-plus
I’ve confirmed that eslint-plugin-sort-keys-plus is declared in your package.json and present in package-lock.json. However, I didn’t find any references in your Markdown documentation. Please update your README (or other docs) to mention the new plugin and provide its configuration options.

• File to update: README.md (or relevant docs) – add a section on ESLint plugins, include sort-keys-plus and its config.

@zzxthehappiest
Copy link
Author

One more comment: @zzxthehappiest mentioned that WebStorm shows many warnings, but they seem to be coming from source files in node_modules.

Running npm run lint:fix directly on my machine doesn't show those warnings. My guess is that it's a WebStorm config issue -- it's not correctly ignoring node_modules/ as specified in eslint.config.mjs.

For this one, the warnings I mentioned are those reported by running command eslint . under the root directory of this project (eslint-config-yscope). All warnings come from eslint-config-yscope/StylisticConfigArray.mjs and they can be fixed by either switching their orders or group them by empty lines (but in each group they still need to be sorted).

@zzxthehappiest
Copy link
Author

zzxthehappiest commented May 12, 2025

Great job! sort-keys-plus works exactly as expected.
For @junhaoliao 's info: replacing sort-keys with sort-keys-plus doesn't change the result of lint:fix in yscope-log-viewer, except that we need to rename this //eslint-disable line.

diff --git a/src/components/theme.tsx b/src/components/theme.tsx
@@ -71,13 +71,13 @@ const APP_THEME = extendTheme({
         body: "var(--ylv-ui-font-family)",
     },
     radius: {
-        /* eslint-disable sort-keys */
+        /* eslint-disable sort-keys-plus/sort-keys */
         xs: "2px",
         sm: "2px",
         md: "2px",
         lg: "2px",
         xl: "2px",
-        /* eslint-enable sort-keys */
+        /* eslint-enable sort-keys-plus/sort-keys */
     },
 });

@junhaoliao can give a final review after the comments are addressed.

i agree that we can suppress sort-keys-plus/sort-keys instead of sort-keys.

@zzxthehappiest Could you also check whether the following repos are currently suppressing the sort-keys rule? Before we merge #17 into eslint-config-yscope, we want to ensure that the CI pipelines of projects using this linter configuration won't break due to the update.

Thanks @hoophalab 's for checking, there is only one place suppressing sort-keys (search result), but there seems 4 places in components/webui suppressing sort-keys (search result).

@junhaoliao
Copy link
Member

@zzxthehappiest Thanks for checking and confirming!

Let's do these:

  1. In the future (After this PR is merged), if we do not wish the keys in an object to be sorted for readability reasons, we can suppress sort-keys-plus/sort-keys instead of sort-keys. Accordingly, @zzxthehappiest could you help updating also eslint-config-yscope/StylisticConfigArray.mjs in this PR?
  2. The code in clp/components/webui will soon be deprecated, which is expected around May 19. After that we can merge this PR.
  3. After this PR is merged and a new version of eslint-config-yscope is published, let's npm i in yscope-log-viewer to update the eslint-config-yscope version and update the supressed rule there.

@zzxthehappiest
Copy link
Author

@zzxthehappiest Thanks for checking and confirming!

Let's do these:

  1. In the future (After this PR is merged), if we do not wish the keys in an object to be sorted for readability reasons, we can suppress sort-keys-plus/sort-keys instead of sort-keys. Accordingly, @zzxthehappiest could you help updating also eslint-config-yscope/StylisticConfigArray.mjs in this PR?
  2. The code in clp/components/webui will soon be deprecated, which is expected around May 19. After that we can merge this PR.
  3. After this PR is merged and a new version of eslint-config-yscope is published, let's npm i in yscope-log-viewer to update the eslint-config-yscope version and update the supressed rule there.

Fixed!

@zzxthehappiest zzxthehappiest requested a review from junhaoliao May 14, 2025 12:50
Copy link
Member

@junhaoliao junhaoliao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm. thanks for addressing all comments in this repo.

let's keep this unmerged until the clp/webui code is cleaned up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants