chore(lint): add import linting and prettier formatting locally by shaejaz · Pull Request #6981 · algolia/instantsearch

shaejaz · 2026-04-20T12:59:29Z

Summary

CI: re-adds a prettier format check (previously enforced via eslint-plugin-prettier, dropped in the migration). Runs as its own step in the lint job.
import/order in-editor: minimal root .eslintrc.cjs drives the ESLint extension for just import/order + prettier/prettier, restoring live squiggles that oxlint's jsPlugins don't yet surface in the LSP. .oxlintrc.json stays 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.
New lint rule instantsearch/prefer-prettier-ignore-comment: catches eslint-disable … prettier/prettier comments and directs contributors to the native // prettier-ignore directive (which both the editor ESLint and CI standalone prettier honor). Lives in the existing instantsearch-oxlint-plugin.mjs for 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

pkg-pr-new · 2026-04-20T13:04:11Z

More templates

algoliasearch-helper

npm i https://pkg.pr.new/algolia/instantsearch/algoliasearch-helper@6981

instantsearch-ui-components

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch-ui-components@6981

instantsearch.css

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.css@6981

instantsearch.js

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.js@6981

react-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch@6981

react-instantsearch-core

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-core@6981

react-instantsearch-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-nextjs@6981

react-instantsearch-router-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-router-nextjs@6981

vue-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/vue-instantsearch@6981

commit: 55e2d31

codacy-production · 2026-04-20T13:04:17Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 6 complexity · 0 duplication

Metric Results

Complexity 6

Duplication 0

View in Codacy

_{TIP This summary will be updated as you push new changes. Give us feedback}

Copilot

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:check scripts and a CircleCI “Format check” step that runs prettier --check and prints diffs on failure.
Add editor-only .eslintrc.cjs plus a local workspace eslint-plugin-instantsearch-editor to surface live diagnostics (incl. a custom rule mirroring the Oxlint plugin).
Expand .prettierignore, add an Oxlint rule instantsearch/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.

Copilot · 2026-04-22T10:22:01Z

 ```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}}' />
  {/* ... */}


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  marker (or similar) so Prettier doesn’t mangle this mixed JS/Handlebars code block again.

Copilot · 2026-04-22T10:22:02Z

 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:
+


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.

Copilot · 2026-04-22T10:22:02Z

+.ais-Hits-banner-image .ais-InfiniteHits-banner-image {
  max-width: 100%;
 }


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.

Haroenv

formatting seems mostly ok, however we shouldn't reintroduce eslint just for this

Haroenv · 2026-04-23T11:52:54Z

@@ -113,24 +113,16 @@ By default, the `build` task supports the [Handlebars](https://handlebarsjs.com)
 <h6 align="center">App.js.hbs</h6>

 ```handlebars


revert this change and remove the "handlebars" formatting

Haroenv · 2026-04-23T11:53:11Z

+    },
+  },
+  rules: {
+    'prettier/prettier': 'error',


let's do prettier separate without eslint

Makes sense, but we won't get the error highlighted (squiggly lines) on the editor without it. But it should work for just formatting.

personally I don't think it's needed to have squiggles for formatting that will be fixed automatically on save (with prettier extension) or on lint:fix / in CI?

yeah makes sense, I added it back since that was the how it used to work with just eslint.

Haroenv · 2026-04-23T11:53:37Z

+  rules: {
+    'prettier/prettier': 'error',
+    'instantsearch-editor/prefer-prettier-ignore-comment': 'error',
+    'import/order': [


does oxlint not have this? or custom oxlint?

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

does that mean your editor was still showing eslint even though it was disabled?

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.

shaejaz added 4 commits April 20, 2026 13:05

add eslint config

600d4ab

update formatting ci

21fcf8d

reset script

ba59f56

format code

ea2302d

shaejaz added 4 commits April 20, 2026 18:19

fix codacy

875f1eb

fix lint

baeb3e7

Merge branch 'master' into chore/import-lint-local

6c06221

fix formatting

55e2d31

shaejaz changed the title ~~chore(lint): add editor level import and formatting~~ chore(lint): add import linting and prettier formatting locally Apr 21, 2026

shaejaz marked this pull request as ready for review April 22, 2026 10:16

Copilot AI review requested due to automatic review settings April 22, 2026 10:16

Copilot started reviewing on behalf of shaejaz April 22, 2026 10:17 View session

Copilot AI reviewed Apr 22, 2026

View reviewed changes

Haroenv reviewed Apr 23, 2026

View reviewed changes

		@@ -113,24 +113,16 @@ By default, the `build` task supports the [Handlebars](https://handlebarsjs.com)
		<h6 align="center">App.js.hbs</h6>

		```handlebars

Conversation

shaejaz commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Format sweep

Uh oh!

pkg-pr-new Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codacy-production Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Up to standards ✅

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Haroenv left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Haroenv Apr 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shaejaz commented Apr 20, 2026 •

edited

Loading

pkg-pr-new Bot commented Apr 20, 2026 •

edited

Loading

codacy-production Bot commented Apr 20, 2026 •

edited

Loading

Haroenv Apr 25, 2026 •

edited

Loading