ni · rajsite · Dec 6, 2025 · Dec 6, 2025 · Dec 6, 2025
@@ -5,7 +5,6 @@
         "dbaeumer.vscode-eslint",
         "redhat.vscode-yaml",
         "editorconfig.editorconfig",
-        "rvest.vs-code-prettier-eslint",
         "unifiedjs.vscode-mdx",
         "ms-dotnettools.csharp",
         "ms-dotnettools.blazorwasm-companion"

@@ -6,6 +6,6 @@
       "mode": "auto"
     }
   ],
-  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "omnisharp.useModernNet": true
 }
@@ -160,7 +160,7 @@ This repository uses automated linting and automated lint formatting. Use `npm r
 
 To enable linting and formatting during development, install the recommended VS Code extensions. The list of recommended VS Code extensions can be found in `.vscode/extensions.json`.
 
-The default formatter for the workspace should be already configured by `.vscode/settings.json`. To configure it manually go to `File >> Preferences >> Settings >> Workspace >> Text Editor >> Default Formatter` and select `Prettier ESLint`. The `Prettier ESLint` option assumes that the recommended VS Code extensions are installed.
+The default formatter for the workspace should be already configured by `.vscode/settings.json`. To configure it manually go to `File >> Preferences >> Settings >> Workspace >> Text Editor >> Default Formatter` and select `ESLint`. The `ESLint` option assumes that the recommended VS Code extensions are installed.
 
 You may wish to have the formatter run every time you save a file. This would help ensure you don't forget to run the formatter and end up with a failing PR build. If you want this behavior, turn it on in your user settings: `File >> Preferences >> Settings >> User >> Text Editor >> Format On Save`. We leave this option unset in the workspace settings so that it does not override the user setting.
 

diff --git a/change/@ni-nimble-components-528ab765-3a2c-473d-91bc-293c8a0ff5b9.json b/change/@ni-nimble-components-528ab765-3a2c-473d-91bc-293c8a0ff5b9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove prettier inline disables and update docs",
+  "packageName": "@ni/nimble-components",
+  "email": "1588923+rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@ni-spright-components-fdb8bf36-1926-4a30-bb8f-94e6554ef0e7.json b/change/@ni-spright-components-fdb8bf36-1926-4a30-bb8f-94e6554ef0e7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove prettier inline disables and update docs",
+  "packageName": "@ni/spright-components",
+  "email": "1588923+rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
@@ -73,7 +73,7 @@ export const componentsNimbleConfig = defineConfig([
     {
         files: ['**/styles.ts'],
         rules: {
-            // Prettier and eslint conflict in how they format CSS in styles files and we prefer prettier's output
+            // eslint handle does not handle indent well in style files
             '@stylistic/indent': 'off',
         },
     },
@@ -86,7 +86,7 @@ export const componentsNimbleConfig = defineConfig([
                 'error',
                 { selector: "LogicalExpression[operator='??']" },
             ],
-            // Neither prettier or eslint handle indent well in template files
+            // eslint handle does not handle indent well in template files
             '@stylistic/indent': 'off',
         },
     },

@@ -236,7 +236,6 @@ With an attribute defined there are several ways to react to updates. To minimiz
 
 2. Respond to attribute values using a behavior:
 
-    <!-- prettier-ignore -->
     ```ts
     import { css } from '@ni/fast-element';
     css`
@@ -386,7 +385,6 @@ export class MyComponent {
 
 Then in the template, bind the focusable elements' `tabindex` to the host component's property:
 
-<!-- prettier-ignore -->
 ```html
 html<MyComponent>`
     <nimble-button 

@@ -126,7 +126,6 @@ describe('Anchor Tree Item', () => {
 
         async function setup(source: Model): Promise<Fixture<TreeView>> {
             return await fixture<TreeView>(
-                // prettier-ignore
                 html<Model>`
                 <${treeViewTag} ${ref('treeView')}>
                     <${treeItemTag} ${ref('root1')}>Root1

@@ -89,7 +89,6 @@ We only formally support spans of text in the `title` and default slots, but we
 
 ### Anatomy
 
-<!-- prettier-ignore -->
 ```html
 <div class="icon">
     ${when(x => x.severity === 'error', html`

@@ -10,7 +10,6 @@ import { buttonTag } from '../button';
 import { iconTimesTag } from '../icons/times';
 import { ButtonAppearance } from '../button/types';
 
-// prettier-ignore
 export const template: FoundationElementTemplate<
 ViewTemplate<Chip>,
 ChipOptions

@@ -18,7 +18,6 @@ describe('Combobox', () => {
 
     describe('with common setup', () => {
         async function setup(): Promise<Fixture<Combobox>> {
-            // prettier-ignore
             const viewTemplate = html`
                 <${comboboxTag}>
                     <${listOptionTag}>One</${listOptionTag}>
@@ -492,7 +491,6 @@ describe('Combobox', () => {
 
     describe('with template attributes', () => {
         async function setup(): Promise<Fixture<Combobox>> {
-            // prettier-ignore
             const viewTemplate = html`
                 <${comboboxTag}
                     open
@@ -531,7 +529,6 @@ describe('Combobox', () => {
 
     describe('with many options', () => {
         async function setupWithManyOptions(): Promise<Fixture<Combobox>> {
-            // prettier-ignore
             const viewTemplate = html`
                 <${comboboxTag}
                     autocomplete="inline"
@@ -585,7 +582,6 @@ describe('Combobox', () => {
 
     describe('within a div', () => {
         async function setupInDiv(): Promise<Fixture<Combobox>> {
-            // prettier-ignore
             const viewTemplate = html`
                 <div style="overflow: auto;">
                     <<${comboboxTag}>>

@@ -16,7 +16,6 @@ describe('Icon Mapping', () => {
     let connect: () => Promise<void>;
     let disconnect: () => Promise<void>;
 
-    // prettier-ignore
     async function setup(): Promise<Fixture<MappingIcon>> {
         return await fixture<MappingIcon>(html`
         <${mappingIconTag}

@@ -31,7 +31,6 @@ import { themeBehavior } from '../../utilities/style/theme';
 import { DropdownAppearance } from './types';
 import { userSelectNone } from '../../utilities/style/user-select';
 
-// prettier-ignore
 export const styles = css`
     ${display('inline-flex')}
 

@@ -54,7 +54,6 @@ describe('RichTextMentionUsers', () => {
     let connect: () => Promise<void>;
     let disconnect: () => Promise<void>;
 
-    // prettier-ignore
     async function setup(options: {
         mappings: BasicUserMentionMapping[],
         pattern: string

@@ -29,7 +29,6 @@ async function setup(): Promise<Fixture<RichTextEditor>> {
 
 async function setupMentionConfig(): Promise<Fixture<RichTextEditor>> {
     return await fixture<RichTextEditor>(
-        // prettier-ignore
         html`<${richTextEditorTag}>
           <${richTextMentionUsersTag} pattern="^user:(.*)">
               <${mappingUserTag} key="user:1" display-name="John Doe"></${mappingUserTag}>

@@ -18,7 +18,6 @@ async function setup(): Promise<Fixture<RichTextEditor>> {
 
 async function setupWithFooter(): Promise<Fixture<RichTextEditor>> {
     return await fixture<RichTextEditor>(
-        // prettier-ignore
         html`<${richTextEditorTag}>
             <${buttonTag} slot="footer-actions" id="cancel">Cancel</${buttonTag}>
             <${buttonTag} slot="footer-actions" id="ok">OK</${buttonTag}>

@@ -24,7 +24,6 @@ describe('RichTextMentionListbox', () => {
     async function setup500Options(
         source: Model
     ): Promise<Fixture<RichTextMentionListbox>> {
-        // prettier-ignore
         return await fixture<RichTextMentionListbox>(
             html<Model>`
             <div>

@@ -953,7 +953,6 @@ describe('Markdown parser', () => {
         let connect: () => Promise<void>;
         let disconnect: () => Promise<void>;
 
-        // prettier-ignore
         async function setup(
             mappings: BasicUserMentionMapping[],
             pattern = ''

@@ -21,7 +21,6 @@ async function setup(): Promise<Fixture<RichTextViewer>> {
 
 async function setupMentionConfig(): Promise<Fixture<RichTextViewer>> {
     return await fixture<RichTextViewer>(
-        // prettier-ignore
         html`<${richTextViewerTag}>
             <${richTextMentionUsersTag} pattern="^user:(.*)">
                 <${mappingUserTag} key="user:1" display-name="John Doe"></${mappingUserTag}>

@@ -902,7 +902,6 @@ describe('Select', () => {
 
     describe('with 500 options', () => {
         async function setup500Options(): Promise<Fixture<Select>> {
-            // prettier-ignore
             const viewTemplate = html`
                 <${selectTag}>
                     ${repeat(() => [...Array(500).keys()], html<number>`
@@ -953,7 +952,6 @@ describe('Select', () => {
 
     describe('within a div', () => {
         async function setupInDiv(): Promise<Fixture<Select>> {
-            // prettier-ignore
             const viewTemplate = html`
                 <div style="overflow: auto;">
                     <${selectTag}>

@@ -26,7 +26,6 @@ class ElementReferences {
     public column!: TableColumnAnchor;
 }
 
-// prettier-ignore
 async function setup(source: ElementReferences): Promise<Fixture<Table<SimpleTableRecord>>> {
     return await fixture<Table<SimpleTableRecord>>(
         html`<${tableTag} style="width: 700px" ${ref('table')}>

@@ -29,7 +29,6 @@ describe('TableColumnDateText', () => {
     let pageObject: TableColumnDateTextPageObject<SimpleTableRecord>;
     let column: TableColumnDateText;
 
-    // prettier-ignore
     async function setup(source: ElementReferences): Promise<Fixture<Table<SimpleTableRecord>>> {
         return await fixture<Table<SimpleTableRecord>>(
             html`<${themeProviderTag} lang="en-US">
@@ -660,7 +659,6 @@ describe('TableColumnDateText', () => {
     });
 
     describe('with static config', () => {
-        // prettier-ignore
         async function setupWithConfig(source: ElementReferences): Promise<Fixture<Table<SimpleTableRecord>>> {
             return await fixture<Table<SimpleTableRecord>>(
                 html`<${tableTag} ${ref('table')} style="width: 700px">

@@ -28,7 +28,6 @@ describe('TableColumnDurationText', () => {
     let pageObject: TableColumnDurationTextPageObject<SimpleTableRecord>;
     let column: TableColumnDurationText;
 
-    // prettier-ignore
     async function setup(source: ElementReferences): Promise<Fixture<Table<SimpleTableRecord>>> {
         return await fixture<Table<SimpleTableRecord>>(
             html`<${themeProviderTag} lang="en-US">

@@ -57,7 +57,6 @@ describe('TableColumnMapping', () => {
     let columnPageObject: TableColumnMappingPageObject<SimpleTableRecord>;
     let model: Model;
 
-    // prettier-ignore
     async function setup(options: {
         keyType: MappingKeyType,
         iconMappings?: TestIconMapping[],
@@ -441,7 +440,6 @@ describe('TableColumnMapping', () => {
             ).toBeTrue();
         });
 
-        // prettier-ignore
         async function setupInvalidMappings(): Promise<Fixture<Table<SimpleTableRecord>>> {
             return await fixture<Table<SimpleTableRecord>>(
                 html`<${tableTag} style="width: 700px">

@@ -8,7 +8,6 @@ import {
 import { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';
 import { cellViewMenuSlotName } from '../types';
 
-// prettier-ignore
 export const template = html<TableColumnMenuButtonCellView>`
     ${when(x => x.showMenuButton, html<TableColumnMenuButtonCellView>`
         <${menuButtonTag}

@@ -47,7 +47,6 @@ describe('TableColumnMenuButton', () => {
     let pageObject: TableColumnMenuButtonPageObject<SimpleTableRecord>;
     let column: TableColumnMenuButton;
 
-    // prettier-ignore
     async function setup(source: ElementReferences): Promise<Fixture<Table<SimpleTableRecord>>> {
         return await fixture<Table<SimpleTableRecord>>(
             html`<${tableTag} ${ref('table')} style="width: 700px">

@@ -7,7 +7,6 @@ import type { ColumnValidator } from '../base/models/column-validator';
 type CustomSortOrderTableColumn<
     TColumnValidator extends ColumnValidator<['invalidCustomSortWithGrouping']>
 > = Pick<TableColumn<unknown, TColumnValidator>, 'columnInternals'>;
-// prettier-ignore
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type CustomSortOrderTableColumnConstructor<TColumnValidator extends ColumnValidator<['invalidCustomSortWithGrouping']>> = abstract new (...args: any[]) => CustomSortOrderTableColumn<TColumnValidator>;
 

@@ -4,7 +4,6 @@ import { defaultMinPixelWidth, defaultFractionalWidth } from '../base/types';
 
 // Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)
 type SizedTableColumn = Pick<TableColumn, 'columnInternals'>;
-// prettier-ignore
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type SizedTableColumnConstructor = abstract new (...args: any[]) => SizedTableColumn;
 

@@ -3,7 +3,6 @@ import type { TableColumn } from '../base';
 
 // Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)
 type GroupableTableColumn = Pick<TableColumn, 'columnInternals'>;
-// prettier-ignore
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type GroupableTableColumnConstructor = abstract new (...args: any[]) => GroupableTableColumn;
 

@@ -4,7 +4,6 @@ import type { TableColumn } from '../base';
 // Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)
 // Because the 'placeholder' mixin doesn't depend on any properties of the TableColumn, there are no properties to pick.
 type TableColumnWithPlaceholder = Pick<TableColumn, never>;
-// prettier-ignore
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableColumnWithPlaceholderConstructor = abstract new (...args: any[]) => TableColumnWithPlaceholder;
 

@@ -4,7 +4,6 @@ import { TableColumnSortDirection } from '../../table/types';
 
 // Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)
 type SortableTableColumn = Pick<TableColumn, 'columnInternals'>;
-// prettier-ignore
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type SortableTableColumnConstructor = abstract new (...args: any[]) => SortableTableColumn;
 

@@ -22,7 +22,6 @@ class ElementReferences {
     public column2!: TableColumnNumberText;
 }
 
-// prettier-ignore
 async function setup(source: ElementReferences): Promise<Fixture<Table<SimpleTableRecord>>> {
     return await fixture<Table<SimpleTableRecord>>(
         html`<${themeProviderTag} lang="en-US">

@@ -19,7 +19,6 @@ class ElementReferences {
     public column!: TableColumnText;
 }
 
-// prettier-ignore
 async function setup(source: ElementReferences): Promise<Fixture<Table<SimpleTableRecord>>> {
     return await fixture<Table<SimpleTableRecord>>(
         html`<${themeProviderTag} lang="en-US">

@@ -26,7 +26,6 @@ const columnCellViewName = uniqueElementName();
 })
 class TestTableColumnCellView extends TableCellView<SimpleTableCellRecord> {}
 
-// prettier-ignore
 async function setup(): Promise<Fixture<TableCell<SimpleTableCellRecord>>> {
     return await fixture<TableCell<SimpleTableCellRecord>>(
         html`<${tableCellTag}>

@@ -12,7 +12,6 @@ type TableRowSelectionToggleEventHandler = (
     evt: CustomEvent<TableRowSelectionToggleEventDetail>
 ) => void;
 
-// prettier-ignore
 async function setup(): Promise<Fixture<TableGroupRow>> {
     return await fixture<TableGroupRow>(
         html`<${tableGroupRowTag}>

@@ -37,7 +37,6 @@ type TableRowSelectionToggleEventHandler = (
 
 describe('TableRow', () => {
     describe('standalone', () => {
-        // prettier-ignore
         async function setup(): Promise<Fixture<TableRow<SimpleTableRecord>>> {
             return await fixture<TableRow<SimpleTableRecord>>(
                 html`<${tableRowTag}>
@@ -358,7 +357,6 @@ describe('TableRow', () => {
             public secondColumn!: TableColumnDateText;
         }
 
-        // prettier-ignore
         async function setupTable(source: ColumnReferences): Promise<Fixture<Table<SimpleTableRecord>>> {
             return await fixture<Table<SimpleTableRecord>>(
                 html`<${tableTag}>

@@ -244,10 +244,8 @@ describe('TableValidator', () => {
 
         it('ID field name can be an empty string', () => {
             const data = [
-                // prettier-ignore
                 // eslint-disable-next-line @typescript-eslint/naming-convention
                 { stringField: 'value-1', numberField: 10, '': 'empty-1' },
-                // prettier-ignore
                 // eslint-disable-next-line @typescript-eslint/naming-convention
                 { stringField: 'value-2', numberField: 11, '': 'empty-2' }
             ];
@@ -261,10 +259,8 @@ describe('TableValidator', () => {
 
         it('validation occurs when ID field name is an empty string', () => {
             const data = [
-                // prettier-ignore
                 // eslint-disable-next-line @typescript-eslint/naming-convention
                 { stringField: 'value-1', numberField: 10, '': 'empty-1' },
-                // prettier-ignore
                 // eslint-disable-next-line @typescript-eslint/naming-convention
                 { stringField: 'value-2', numberField: 11, '': 'empty-1' }
             ];

@@ -45,7 +45,6 @@ const simpleTableData = [
     }
 ] as const;
 
-// prettier-ignore
 async function setup(): Promise<Fixture<Table<SimpleTableRecord>>> {
     return await fixture<Table<SimpleTableRecord>>(
         html`<${tableTag}>