chore(lint): add import linting and prettier formatting locally#6981
chore(lint): add import linting and prettier formatting locally#6981shaejaz wants to merge 14 commits into
Conversation
More templates
algoliasearch-helper
instantsearch-ui-components
instantsearch.css
instantsearch.js
react-instantsearch
react-instantsearch-core
react-instantsearch-nextjs
react-instantsearch-router-nextjs
vue-instantsearch
commit: |
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 0 |
| Duplication | 0 |
TIP This summary will be updated as you push new changes.
There was a problem hiding this comment.
Pull request overview
This PR restores Prettier-based formatting enforcement (via a dedicated CI step) and improves local/editor linting by adding an editor-only ESLint setup for import/order + prettier/prettier, while keeping Oxlint as the authoritative CLI/CI linter. It also expands .prettierignore and introduces a custom rule to prefer native // prettier-ignore over eslint-disable prettier/prettier.
Changes:
- Add
format/format:checkscripts and a CircleCI “Format check” step that runsprettier --checkand prints diffs on failure. - Add editor-only
.eslintrc.cjsplus a local workspaceeslint-plugin-instantsearch-editorto surface live diagnostics (incl. a custom rule mirroring the Oxlint plugin). - Expand
.prettierignore, add an Oxlint ruleinstantsearch/prefer-prettier-ignore-comment, and apply Prettier formatting across many files.
Reviewed changes
Copilot reviewed 107 out of 109 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Adds dependencies for editor ESLint/Prettier flow (e.g., TS ESLint parser v4, eslint-plugin-prettier). |
| tsconfig.declaration.json | Prettier formatting (trailing comma removal). |
| tests/e2e/tsconfig.json | Prettier formatting (single-line include). |
| tests/e2e/CONTRIBUTING.md | Collapses NOTE block into one line (formatting). |
| tests/common/widgets/chat/templates.tsx | Prettier formatting of template strings. |
| tests/common/widgets/chat/options.tsx | Prettier formatting and indentation changes. |
| tests/common/connectors/chat/options.ts | Prettier formatting of assertions. |
| tests/common/.oxlintrc.json | Prettier formatting of JSON. |
| specs/src/pages/widgets/trending-items.md | Quote style normalization (double → single) in frontmatter. |
| specs/src/pages/widgets/related-products.md | Quote style normalization (double → single) in frontmatter. |
| specs/src/pages/widgets/looking-similar.md | Quote style normalization (double → single) in frontmatter. |
| scripts/lint/run-oxlint.cjs | Prettier formatting (function signature/layout). |
| scripts/lint/instantsearch-oxlint-plugin.mjs | Adds new custom rule prefer-prettier-ignore-comment. |
| scripts/eslint-plugin-instantsearch-editor/package.json | New workspace package for editor-only ESLint rules. |
| scripts/eslint-plugin-instantsearch-editor/index.cjs | New editor-only ESLint rule implementation + fixer. |
| scripts/.oxlintrc.json | Prettier formatting of JSON. |
| packages/vue-instantsearch/.oxlintrc.json | Prettier formatting of JSON. |
| packages/react-instantsearch/src/widgets/chat/tools/SearchIndexTool.tsx | Import formatting changes. |
| packages/react-instantsearch/src/widgets/TrendingFacets.tsx | Type union formatting changes. |
| packages/react-instantsearch/src/ui/SearchBox.tsx | JSX className formatting change. |
| packages/react-instantsearch-router-nextjs/tsconfig.declaration.json | Prettier formatting (single-line arrays). |
| packages/instantsearch.js/src/widgets/trending-facets/trending-facets.tsx | Prettier formatting of component/template typing. |
| packages/instantsearch.js/src/widgets/trending-facets/tests/trending-facets.test.tsx | Prettier formatting of assertions. |
| packages/instantsearch.js/src/widgets/chat/chat.tsx | Type formatting (single-line union). |
| packages/instantsearch.js/src/middlewares/createInsightsMiddleware.ts | Switches disable directives from eslint-* to oxlint-*. |
| packages/instantsearch.js/src/lib/routers/history.ts | Prettier formatting of safelyRunOnBrowser call structure. |
| packages/instantsearch.js/src/connectors/trending-facets/connectTrendingFacets.ts | Prettier formatting of thrown error. |
| packages/instantsearch.js/src/connectors/chat/connectChat.ts | Prettier formatting; expands sendMessage call formatting. |
| packages/instantsearch.js/src/connectors/chat/tests/connectChat-test.ts | Prettier formatting of ReadableStream setup. |
| packages/instantsearch.js/src/components/SearchBox/SearchBox.tsx | Prettier formatting of type alias. |
| packages/instantsearch.js/src/tests/common-connectors.test.tsx | Prettier formatting; multiline destructure/template strings. |
| packages/instantsearch.css/src/themes/satellite.scss | Selector formatting change. |
| packages/instantsearch.css/src/themes/algolia.scss | Selector formatting change (includes a behavioral selector change). |
| packages/instantsearch.css/src/components/filter-suggestions.scss | Prettier formatting of rgba() call. |
| packages/instantsearch.css/src/components/chat/_chat-suggestions.scss | Removes trailing whitespace line. |
| packages/instantsearch.css/src/components/chat/_chat-sidepanel-layout.scss | Prettier formatting of long transition declarations. |
| packages/instantsearch.css/src/components/chat/_chat-overlay-layout.scss | Prettier formatting of transition declaration. |
| packages/instantsearch.css/src/components/chat/_chat-messages.scss | Prettier formatting of transition declarations. |
| packages/instantsearch-ui-components/src/components/chat/types.ts | Type formatting and trailing whitespace cleanup. |
| packages/instantsearch-ui-components/src/components/chat/tests/ChatMessages.test.tsx | Prettier formatting of long selectors. |
| packages/instantsearch-ui-components/src/components/chat/ChatMessages.tsx | Splits type import into multiline block. |
| packages/instantsearch-ui-components/src/components/chat/ChatInlineLayout.tsx | JSX formatting for className composition. |
| packages/instantsearch-ui-components/src/components/chat/ChatGreeting.tsx | Type formatting + translation assignment formatting. |
| packages/instantsearch-ui-components/src/components/tests/TrendingFacets.test.tsx | Prettier formatting. |
| packages/instantsearch-ui-components/src/components/tests/RelatedProducts.test.tsx | Prettier formatting of click call. |
| packages/instantsearch-ui-components/.oxlintrc.json | Prettier formatting of JSON. |
| packages/create-instantsearch-app/docs/custom-templates.md | Prettier reformats a mixed Handlebars/JS snippet (currently harms correctness). |
| packages/create-instantsearch-app/.oxlintrc.json | Prettier formatting of JSON. |
| packages/algoliasearch-helper/documentation-src/partials/types.hbs | Whitespace normalization. |
| packages/algoliasearch-helper/.oxlintrc.json | Prettier formatting of JSON. |
| packages/algolia-experiences/README.md | DocToc formatting changes. |
| package.json | Adds format/format:check scripts + editor deps (@typescript-eslint/parser, eslint-plugin-prettier). |
| examples/vue/ssr/public/index.html | Prettier formatting of SSR template output blocks. |
| examples/vue/.oxlintrc.json | Prettier formatting of JSON. |
| examples/js/showcase/src/views/InstantSearchView.tsx | Quote/style normalization + layout formatting. |
| examples/js/showcase/src/views/GeoSearchView.tsx | Quote/style normalization + layout formatting. |
| examples/js/showcase/src/style.css | Quote normalization + formatting changes. |
| examples/js/showcase/src/main.tsx | Quote normalization in imports/DOM lookup. |
| examples/js/showcase/src/hooks/useWidget.ts | Prettier formatting of function signature. |
| examples/js/showcase/src/hooks/useColorMode.ts | Quote normalization + formatting of matchMedia subscription. |
| examples/js/showcase/src/context/search.ts | Quote normalization + formatting. |
| examples/js/showcase/src/context/flavor.ts | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetVoiceSearch.tsx | Quote normalization in imports. |
| examples/js/showcase/src/components/widgets/WidgetToggleRefinement.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetStats.tsx | Formatting of template literal line breaks. |
| examples/js/showcase/src/components/widgets/WidgetSortBy.tsx | Quote normalization + item formatting. |
| examples/js/showcase/src/components/widgets/WidgetSearchBox.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetRelevantSort.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetRefinementList.tsx | Quote normalization + JSX formatting. |
| examples/js/showcase/src/components/widgets/WidgetRatingMenu.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetRangeSlider.tsx | Quote normalization + formatting; adds prettier-ignore for TS indexed access type. |
| examples/js/showcase/src/components/widgets/WidgetRangeInput.tsx | Quote normalization + JSX formatting. |
| examples/js/showcase/src/components/widgets/WidgetPoweredBy.tsx | Quote normalization in imports. |
| examples/js/showcase/src/components/widgets/WidgetPanel.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetPagination.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetNumericMenu.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetMenuSelect.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetMenu.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetInfiniteHits.tsx | Quote normalization + multiline HTML template formatting. |
| examples/js/showcase/src/components/widgets/WidgetHitsPerPage.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetHits.tsx | Quote normalization + multiline HTML template formatting. |
| examples/js/showcase/src/components/widgets/WidgetHierarchicalMenu.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetGeoSearch.tsx | Quote normalization + formatting; updates Google Maps loader options + error string. |
| examples/js/showcase/src/components/widgets/WidgetCurrentRefinements.tsx | Quote normalization in imports. |
| examples/js/showcase/src/components/widgets/WidgetConfigure.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetClearRefinements.tsx | Quote normalization in imports. |
| examples/js/showcase/src/components/widgets/WidgetBreadcrumb.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/WidgetAutocomplete.tsx | Quote normalization + multiline HTML template formatting. |
| examples/js/showcase/src/components/widgets/WidgetAirportHits.tsx | Quote normalization + multiline HTML template formatting. |
| examples/js/showcase/src/components/widgets/SearchBoxPoweredBy.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/widgets/DynamicWidgets.tsx | Quote normalization + layout formatting. |
| examples/js/showcase/src/components/WidgetSwitcher.tsx | Quote normalization + formatting of complex class strings and mapping. |
| examples/js/showcase/src/components/SegmentedControl.tsx | Quote normalization + formatting. |
| examples/js/showcase/src/components/ColorModeSwitcher.tsx | Quote normalization + JSX formatting. |
| examples/js/showcase/src/App.tsx | Quote normalization + JSX formatting. |
| examples/js/showcase/index.html | Quote normalization in inline script. |
| examples/js/e-commerce-umd/tsconfig.json | Prettier formatting (trailing comma removal + single-line include). |
| examples/.oxlintrc.json | Prettier formatting of JSON; condenses arrays. |
| CONTRIBUTING.md | Updates lint/format command documentation; clarifies editor-only ESLint config. |
| .prettierignore | Expanded ignore list (generated artifacts, caches, playwright artifacts, handlebars partials, generated CSS, etc.). |
| .oxlintrc.json | Adds instantsearch/prefer-prettier-ignore-comment rule + formatting updates. |
| .github/workflows/pkg-pr-new.yml | Reformats npx pkg-pr-new publish invocation into a single line. |
| .github/workflows/docs-automation.yml | Flattens if: condition formatting. |
| .github/prompts/docs-automation.md | Prettier formatting changes (currently reduces clarity). |
| .eslintrc.cjs | New editor-only ESLint config for VS Code (import/order, prettier/prettier, custom editor rule). |
| .codacy.yml | Quote normalization. |
| .claude/skills/port-widget/agents/openai.yaml | Quote normalization. |
| .claude/rules/e2e.md | Markdown formatting (tables, spacing, code fences). |
| .circleci/config.yml | Adds dedicated Prettier format check step before lint/typecheck. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ```handlebars | ||
| import React, { Component } from 'react'; | ||
| import algoliasearch from 'algoliasearch/lite'; | ||
| import { | ||
| InstantSearch, | ||
| Hits, | ||
| SearchBox, | ||
| {{#if attributesToDisplay}} | ||
| import React, { Component } from 'react'; import algoliasearch from | ||
| 'algoliasearch/lite'; import { InstantSearch, Hits, SearchBox, | ||
| {{#if attributesToDisplay}} | ||
| Highlight, | ||
| {{/if}} | ||
| } from 'react-instantsearch-dom'; | ||
| {{/if}} | ||
| } from 'react-instantsearch-dom'; const searchClient = algoliasearch( '{{appId}}', | ||
| '{{apiKey}}' ); | ||
|
|
||
| const searchClient = algoliasearch( | ||
| '{{appId}}', | ||
| '{{apiKey}}' | ||
| ); | ||
|
|
||
| <InstantSearch searchClient={searchClient} indexName="{{indexName}}"> | ||
| <SearchBox placeholder="{{searchPlaceholder}}" /> | ||
| <InstantSearch searchClient='{searchClient}' indexName='{{indexName}}'> | ||
| <SearchBox placeholder='{{searchPlaceholder}}' /> | ||
| {/* ... */} |
There was a problem hiding this comment.
This Handlebars template example was reformatted into long wrapped lines and now contains incorrect JSX/Handlebars syntax (e.g., searchClient='{searchClient}' becomes a string instead of JSX expression). Please restore the snippet to a valid, readable example (notably searchClient={searchClient}) and consider adding a <!-- prettier-ignore --> marker (or similar) so Prettier doesn’t mangle this mixed JS/Handlebars code block again.
There was a problem hiding this comment.
copilot is right, this change should be reverted
| 4. After making changes, run link check to catch broken links: | ||
| - cd docs-new && npm run check:links | ||
| Fix any broken links you introduced, but don't spend time on pre-existing issues. | ||
|
|
||
| 5. REQUIRED: Write a summary file at CHANGES_SUMMARY.md with this exact format: | ||
| --- | ||
| - cd docs-new && npm run check:links Fix any broken links you introduced, but don't spend time on pre-existing issues. | ||
|
|
||
| 5. ## REQUIRED: Write a summary file at CHANGES_SUMMARY.md with this exact format: | ||
|
|
There was a problem hiding this comment.
The numbered instructions here were collapsed in a way that hurts clarity and changes meaning (e.g., the check:links command and its explanation are merged into one bullet, and 5. ## REQUIRED: is an odd hybrid of list item + heading). Please reformat these steps back into clear bullets/lines so the automation prompt remains unambiguous.
There was a problem hiding this comment.
was reformatted because of the --- being a header
| .ais-Hits-banner-image .ais-InfiniteHits-banner-image { | ||
| max-width: 100%; | ||
| } |
There was a problem hiding this comment.
The selector .ais-Hits-banner-image .ais-InfiniteHits-banner-image is a descendant selector; it looks like the intent was to target both .ais-Hits-banner-image and .ais-InfiniteHits-banner-image (previously a multi-selector). Add the missing comma so both classes are styled independently, otherwise .ais-InfiniteHits-banner-image won’t receive this rule unless nested inside .ais-Hits-banner-image.
There was a problem hiding this comment.
yes should have been a comma, previously a bug
Haroenv
left a comment
There was a problem hiding this comment.
formatting seems mostly ok, however we shouldn't reintroduce eslint just for this
| @@ -113,24 +113,16 @@ By default, the `build` task supports the [Handlebars](https://handlebarsjs.com) | |||
| <h6 align="center">App.js.hbs</h6> | |||
|
|
|||
| ```handlebars | |||
There was a problem hiding this comment.
revert this change and remove the "handlebars" formatting
| rules: { | ||
| 'prettier/prettier': 'error', | ||
| 'instantsearch-editor/prefer-prettier-ignore-comment': 'error', | ||
| 'import/order': [ |
There was a problem hiding this comment.
does oxlint not have this? or custom oxlint?
There was a problem hiding this comment.
There seems to be an inconsistency between what is shown on the editor and what is shown from the cmd. Using eslint for the editor made it work consistentyl
There was a problem hiding this comment.
does that mean your editor was still showing eslint even though it was disabled?
There was a problem hiding this comment.
No I mean that the oxlint output shown via the code editor extension is sometimes not the same as the one from the CLI. Since the import order plugin in oxlint is a jsPlugin (so based on eslint), if we use it via eslint in the editor, the output for both editor and CLI is consistent.
I believe it's due to the oxlint extension not properly supporting jsPlugins for now.
Removes the editor-only ESLint config introduced earlier in this branch, deletes Prettier and all related plugins, and configures oxfmt as the single formatter. Prettier settings (singleQuote, proseWrap: never, trailingComma: es5) and ignore patterns were migrated to .oxfmtrc.json via `oxfmt --migrate=prettier`. The accompanying repo-wide reformat lands in the following commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mechanical reformat produced by running `yarn format` (`oxfmt .`) with the migrated Prettier settings in .oxfmtrc.json. No semantic code changes; SHA recorded in .git-blame-ignore-revs in a follow-up commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
CI's Format check step now invokes oxfmt for the diff output, and the CONTRIBUTING guide reflects oxfmt as the single formatter (removing the editor-only ESLint note). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`yarn lint:fix` removed redundant type assertions and reordered imports to satisfy `import-js/order` after the oxfmt reformat. A subsequent `yarn format` normalises the resulting layout. Pre-existing lint failures (eslint-plugin-import `extensions` rule mis-parsing `instantsearch.js/...` package paths as file extensions) are unchanged; total error count drops from 79 to 71 versus the branch baseline. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Haroenv
left a comment
There was a problem hiding this comment.
looks good, just probably need to do a rebase and double check some of the removed type annotations. Is oxlint check or fix now ran on CI too?
| templates: { | ||
| item(hit, { html, components }) { | ||
| return html` | ||
| <div class="flex h-full flex-col"> |
There was a problem hiding this comment.
Is this change on purpose?
| import { useState } from 'preact/hooks'; | ||
|
|
||
| import { useFlavor, type Flavor } from '../context/flavor'; | ||
| import { DocsLinks } from './DocsLink'; |
There was a problem hiding this comment.
and this? or is it from a wrong rebase?
| @@ -1,8 +1,9 @@ | |||
| import { Search, MapPin } from 'lucide-preact'; | |||
| import { MapPin, Search, Sparkles } from 'lucide-preact'; | |||
|
|
||
| // Post content height to the docs parent so the iframe can resize to fit | ||
| // (paired with iframe-resize.js in algolia/docs-new). | ||
| if (window.parent && window.parent !== window) { |
| import type { | ||
| UseInfiniteHitsProps} from 'react-instantsearch-core'; |
| @@ -7,9 +7,7 @@ import type { IndexWidget, UiState } from 'instantsearch.js'; | |||
| import type { Context } from 'react'; | |||
|
|
|||
| export function useIndexContext<TUiState extends UiState = UiState>() { | |||
| const context = useContext( | |||
There was a problem hiding this comment.
even though the type argument is different, this passes?
| const search = new InstantSearch(props) as InternalInstantSearch< | ||
| TUiState, | ||
| TRouteState | ||
| >; |
| >() { | ||
| const search = useContext( | ||
| InstantSearchContext as Context<InternalInstantSearch< |
Summary
eslint-plugin-prettier, dropped in the migration). Runs as its own step in the lint job.import/orderin-editor: minimal root.eslintrc.cjsdrives the ESLint extension for justimport/order+prettier/prettier, restoring live squiggles that oxlint's jsPlugins don't yet surface in the LSP..oxlintrc.jsonstays authoritative for CLI/CI..prettierignore: expanded to cover generated SCSS output (instantsearch.css/{components,themes}/,specs/public/themes/), Nuxt caches, playwright artifacts, Handlebars partials, and the directories previously listed only in.eslintignore.instantsearch/prefer-prettier-ignore-comment: catcheseslint-disable … prettier/prettiercomments and directs contributors to the native// prettier-ignoredirective (which both the editor ESLint and CI standalone prettier honor). Lives in the existinginstantsearch-oxlint-plugin.mjsfor CLI/CI enforcement. A corresponding eslint plugin added for the local flow.See this CI run for a sample of a format step error: https://app.circleci.com/pipelines/github/algolia/instantsearch/14675/workflows/55ca6e8f-154f-4a28-957b-e0771b4acd67/jobs/76302
Format sweep
The prettier-driven reformat of existing drifted files is isolated in a couple commits for easier review: ea2302d + 55e2d31