diff --git a/.eslintignore b/.eslintignore
index 377cb7b6763..dec37cf69b7 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -16,8 +16,6 @@ components/flow-types/**
 app-shell/lib/**
 discovery-client/lib/**
 **/lib/**/*.d.ts
-# TODO add story files back to linting once the are parsed by tsc
-**/*.stories.tsx
 
 # prettier
 **/package.json
diff --git a/.eslintrc.js b/.eslintrc.js
index 92f5ed6d453..4cb9421244c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,7 +4,7 @@ module.exports = {
   root: true,
 
   parserOptions: {
-    project: './*/tsconfig.json',
+    project: './tsconfig-eslint.json',
   },
 
   extends: ['standard-with-typescript', 'plugin:react/recommended', 'prettier'],
@@ -95,6 +95,13 @@ module.exports = {
         'jest/no-done-callback': 'warn',
       },
     },
+    {
+      files: ['**/*.stories.tsx'],
+      rules: {
+        'import/no-default-export': 'off',
+        '@typescript-eslint/consistent-type-assertions': 'off',
+      },
+    },
     {
       files: ['**/cypress/**'],
       extends: ['plugin:cypress/recommended'],
diff --git a/components/src/deck/Module.stories.tsx b/components/src/deck/Module.stories.tsx
index f3d79e84004..e5c448fa605 100644
--- a/components/src/deck/Module.stories.tsx
+++ b/components/src/deck/Module.stories.tsx
@@ -30,16 +30,16 @@ export default {
 
 const Template: Story<React.ComponentProps<typeof ModuleComponent>> = args => {
   return (
-      <RobotWorkSpace deckDef={getDeckDefinitions()["ot2_standard"]}>
-        {({deckSlotsById}: RobotWorkSpaceRenderProps) => {
-          const slot =  deckSlotsById['7']
-          return (
-            <g transform={`translate(${slot.position[0]}, ${slot.position[1]})`} >
-                <ModuleComponent mode={args.mode} model={args.model} slot={slot}/>
-            </g>
-          )
-        }}
-      </RobotWorkSpace>
+    <RobotWorkSpace deckDef={getDeckDefinitions()['ot2_standard']}>
+      {({ deckSlotsById }: RobotWorkSpaceRenderProps) => {
+        const slot = deckSlotsById['7']
+        return (
+          <g transform={`translate(${slot.position[0]}, ${slot.position[1]})`}>
+            <ModuleComponent mode={args.mode} model={args.model} slot={slot} />
+          </g>
+        )
+      }}
+    </RobotWorkSpace>
   )
 }
 export const Module = Template.bind({})
@@ -49,14 +49,13 @@ Module.argTypes = {
       type: 'select',
       options: moduleModels,
     },
-    defaultValue: moduleModels[0]
+    defaultValue: moduleModels[0],
   },
   mode: {
     control: {
       type: 'select',
       options: displayModes,
     },
-    defaultValue: displayModes[0]
+    defaultValue: displayModes[0],
   },
 }
-
diff --git a/components/src/deck/RobotWorkSpace.stories.tsx b/components/src/deck/RobotWorkSpace.stories.tsx
index 592ef2926c9..530c9390866 100644
--- a/components/src/deck/RobotWorkSpace.stories.tsx
+++ b/components/src/deck/RobotWorkSpace.stories.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { RobotWorkSpace } from './RobotWorkSpace'
-import { RobotCoordsText, RobotCoordsForeignDiv, Module } from '@opentrons/components'
+import {
+  RobotCoordsText,
+  RobotCoordsForeignDiv,
+  Module,
+} from '@opentrons/components'
 import { getDeckDefinitions } from './getDeckDefinitions'
 
 import type { Story, Meta } from '@storybook/react'
@@ -38,7 +42,7 @@ const Template: Story<React.ComponentProps<typeof RobotWorkSpace>> = ({
 export const Deck = Template.bind({})
 Deck.args = {
   children: ({ deckSlotsById }) => {
-    const divSlot =  deckSlotsById['9']
+    const divSlot = deckSlotsById['9']
     const moduleSlot = deckSlotsById['10']
     const rectSlot = deckSlotsById['11']
     return (
@@ -57,7 +61,11 @@ Deck.args = {
           height={divSlot.boundingBox.yDimension}
         >
           <input
-            style={{ backgroundColor: 'lightgray', margin: '1rem', width: '6rem' }}
+            style={{
+              backgroundColor: 'lightgray',
+              margin: '1rem',
+              width: '6rem',
+            }}
             placeholder="example input"
           />
         </RobotCoordsForeignDiv>
diff --git a/components/src/forms/CheckboxField.stories.tsx b/components/src/forms/CheckboxField.stories.tsx
index b515cd4539b..eeef1f4a0b6 100644
--- a/components/src/forms/CheckboxField.stories.tsx
+++ b/components/src/forms/CheckboxField.stories.tsx
@@ -9,7 +9,9 @@ export default {
   component: CheckboxFieldComponent,
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof CheckboxFieldComponent>> = args => {
+const Template: Story<
+  React.ComponentProps<typeof CheckboxFieldComponent>
+> = args => {
   const [isChecked, setIsChecked] = React.useState<boolean>(false)
   return (
     <CheckboxFieldComponent
diff --git a/components/src/forms/DropdownField.stories.tsx b/components/src/forms/DropdownField.stories.tsx
index 77525f637fb..fbb849caa9e 100644
--- a/components/src/forms/DropdownField.stories.tsx
+++ b/components/src/forms/DropdownField.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { DropdownField as DropdownFieldComponent} from './DropdownField'
+import { DropdownField as DropdownFieldComponent } from './DropdownField'
 
 import type { Story, Meta } from '@storybook/react'
 
@@ -9,7 +9,9 @@ export default {
   argTypes: { onChange: { action: 'clicked' } },
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof DropdownFieldComponent>> = args => {
+const Template: Story<
+  React.ComponentProps<typeof DropdownFieldComponent>
+> = args => {
   const [selectedValue, setSelectedValue] = React.useState<string | null>(null)
   return (
     <DropdownFieldComponent
diff --git a/components/src/forms/FormGroup.stories.tsx b/components/src/forms/FormGroup.stories.tsx
index 6a8fc71c302..dba323fe9de 100644
--- a/components/src/forms/FormGroup.stories.tsx
+++ b/components/src/forms/FormGroup.stories.tsx
@@ -10,14 +10,14 @@ export default {
   argTypes: { onChange: { action: 'clicked' } },
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof FormGroupComponent>> = args => (
-  <FormGroupComponent {...args} />
-)
+const Template: Story<
+  React.ComponentProps<typeof FormGroupComponent>
+> = args => <FormGroupComponent {...args} />
 export const FormGroup = Template.bind({})
 FormGroup.args = {
   label: 'This is a FormGroup',
   children: [
-      <CheckboxField onChange={e => {}} key="first" label='first field'/>,
-      <CheckboxField onChange={e => {}} key="second" label='second field'/>
-  ]
+    <CheckboxField onChange={e => {}} key="first" label="first field" />,
+    <CheckboxField onChange={e => {}} key="second" label="second field" />,
+  ],
 }
diff --git a/components/src/forms/InputField.stories.tsx b/components/src/forms/InputField.stories.tsx
index 60d152edad4..8d8b79bec96 100644
--- a/components/src/forms/InputField.stories.tsx
+++ b/components/src/forms/InputField.stories.tsx
@@ -5,13 +5,15 @@ import { InputField as InputFieldComponent } from './InputField'
 
 import type { Story, Meta } from '@storybook/react'
 
-
 export default {
   title: 'Library/Molecules/Forms/Input Field',
 } as Meta
 
-
-const Template: Story<React.ComponentProps<typeof InputFieldComponent>> = ({value, onChange, ...args}) => {
+const Template: Story<React.ComponentProps<typeof InputFieldComponent>> = ({
+  value,
+  onChange,
+  ...args
+}) => {
   const [controlledValue, setControlledValue] = React.useState('')
   const secondaryCaption = controlledValue.length + '/12'
   const error = controlledValue.length > 12 ? 'Too many characters' : undefined
@@ -22,15 +24,16 @@ const Template: Story<React.ComponentProps<typeof InputFieldComponent>> = ({valu
         error={error}
         secondaryCaption={secondaryCaption}
         value={controlledValue}
-        onChange={e => setControlledValue(e.target.value)} />
+        onChange={e => setControlledValue(e.target.value)}
+      />
     </Box>
   )
 }
 export const InputField = Template.bind({})
 InputField.args = {
-  label: "Input field",
-  placeholder: "Placeholder Text",
-  units: "μL",
-  caption: "caption here",
+  label: 'Input field',
+  placeholder: 'Placeholder Text',
+  units: 'μL',
+  caption: 'caption here',
   isIndeterminate: false,
 }
diff --git a/components/src/forms/RadioGroup.stories.tsx b/components/src/forms/RadioGroup.stories.tsx
index 6d289e0c3a6..0694c2bd89c 100644
--- a/components/src/forms/RadioGroup.stories.tsx
+++ b/components/src/forms/RadioGroup.stories.tsx
@@ -5,26 +5,31 @@ import { RadioGroup as RadioGroupComponent } from './RadioGroup'
 
 import type { Story, Meta } from '@storybook/react'
 
-
 export default {
   title: 'Library/Molecules/Forms/Radio Group',
 } as Meta
 
-
 const OPTIONS = [
   { name: 'Hazelnut', value: 'hazelnut' },
   { name: 'Chocolate', value: 'chocolate' },
   { name: 'Ginger', value: 'ginger' },
 ]
 
-const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({value, onChange, ...args}) => {
-  const [controlledValue, setControlledValue] = React.useState(args.options[0].value)
+const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({
+  value,
+  onChange,
+  ...args
+}) => {
+  const [controlledValue, setControlledValue] = React.useState(
+    args.options[0].value
+  )
   return (
     <Box width={SIZE_6}>
       <RadioGroupComponent
         {...args}
         value={controlledValue}
-        onChange={e => setControlledValue(e.target.value)} />
+        onChange={e => setControlledValue(e.target.value)}
+      />
     </Box>
   )
 }
diff --git a/components/src/forms/Select.stories.tsx b/components/src/forms/Select.stories.tsx
index b52550055f1..8d462b07181 100644
--- a/components/src/forms/Select.stories.tsx
+++ b/components/src/forms/Select.stories.tsx
@@ -17,7 +17,8 @@ export const Basic = Template.bind({})
 Basic.parameters = {
   docs: {
     description: {
-      component: 'Thin wrapper around `react-select` to apply our Opentrons-specific styles. All props are passed directly to [`react-select`](https://react-select.com/props) except for `styles`, `components`, and `classNamePrefix`. The `className` prop appends to the `className` we pass `react-select`. Those props are not passed directly because they provide the base styling of the component'
+      component:
+        'Thin wrapper around `react-select` to apply our Opentrons-specific styles. All props are passed directly to [`react-select`](https://react-select.com/props) except for `styles`, `components`, and `classNamePrefix`. The `className` prop appends to the `className` we pass `react-select`. Those props are not passed directly because they provide the base styling of the component',
     },
   },
 }
@@ -33,7 +34,7 @@ export const GroupedOptions = Template.bind({})
 GroupedOptions.parameters = {
   docs: {
     description: {
-      component: 'You can also pass grouped options:'
+      component: 'You can also pass grouped options:',
     },
   },
 }
@@ -44,14 +45,14 @@ GroupedOptions.args = {
       options: [
         { label: 'DNA', value: 'dna' },
         { label: 'RNA', value: 'rna' },
-      ]
+      ],
     },
     {
       label: 'Polypeptides',
       options: [
-        {label: 'Dipeptide', value: 'dipeptide'},
-        {label: 'Tripeptide', value: 'Tripeptide'}
-      ]
+        { label: 'Dipeptide', value: 'dipeptide' },
+        { label: 'Tripeptide', value: 'Tripeptide' },
+      ],
     },
   ],
 }
@@ -60,7 +61,8 @@ export const Controlled = Template.bind({})
 Controlled.parameters = {
   docs: {
     description: {
-      component: 'Passing `value` controls the input. **Note that `value` has the same format as an entry in `options`**'
+      component:
+        'Passing `value` controls the input. **Note that `value` has the same format as an entry in `options`**',
     },
   },
 }
@@ -69,7 +71,7 @@ Controlled.args = {
   options: [
     { label: 'DNA', value: 'dna' },
     { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein'}
+    { label: 'Protein', value: 'protein' },
   ],
 }
 
@@ -77,7 +79,8 @@ export const FormattedOptionLabel = Template.bind({})
 FormattedOptionLabel.parameters = {
   docs: {
     description: {
-      component: 'You can control the renders of individual options with the `formatOptionLabel` prop:'
+      component:
+        'You can control the renders of individual options with the `formatOptionLabel` prop:',
     },
   },
 }
@@ -85,22 +88,22 @@ FormattedOptionLabel.args = {
   options: [
     { label: 'DNA', value: 'dna' },
     { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein'}
+    { label: 'Protein', value: 'protein' },
   ],
-  formatOptionLabel: (option, { context }) => (
+  formatOptionLabel: (option, { context }) =>
     context === 'menu' && option.value === 'rna' ? (
       <span style={{ color: 'green' }}>{option.label}</span>
     ) : (
       option.label
-    )
-  )
+    ),
 }
 
 export const StyleOverride = Template.bind({})
 StyleOverride.parameters = {
   docs: {
     description: {
-      component: "To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error"
+      component:
+        "To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error",
     },
   },
 }
@@ -109,6 +112,6 @@ StyleOverride.args = {
   options: [
     { label: 'DNA', value: 'dna' },
     { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein'}
+    { label: 'Protein', value: 'protein' },
   ],
-}
\ No newline at end of file
+}
diff --git a/components/src/forms/ToggleField.stories.tsx b/components/src/forms/ToggleField.stories.tsx
index a19c9cb9462..6a1afca3f62 100644
--- a/components/src/forms/ToggleField.stories.tsx
+++ b/components/src/forms/ToggleField.stories.tsx
@@ -9,7 +9,9 @@ export default {
   component: ToggleField,
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof ToggleFieldComponent>> = args => {
+const Template: Story<
+  React.ComponentProps<typeof ToggleFieldComponent>
+> = args => {
   const [isOn, setIsOn] = React.useState<boolean>(false)
   return (
     <ToggleFieldComponent
diff --git a/components/src/instrument/InstrumentDiagram.stories.tsx b/components/src/instrument/InstrumentDiagram.stories.tsx
index a2f94a9d3dd..1379a7fff58 100644
--- a/components/src/instrument/InstrumentDiagram.stories.tsx
+++ b/components/src/instrument/InstrumentDiagram.stories.tsx
@@ -6,7 +6,10 @@ import { InstrumentDiagram as InstrumentDiagramComponent } from './InstrumentDia
 
 import type { Story, Meta } from '@storybook/react'
 
-const allPipetteSpecsByDisplayNames = keyBy(getAllPipetteNames().map(getPipetteNameSpecs), 'displayName')
+const allPipetteSpecsByDisplayNames = keyBy(
+  getAllPipetteNames().map(getPipetteNameSpecs),
+  'displayName'
+)
 
 export default {
   title: 'Library/Organisms/Instrument Diagram',
@@ -24,12 +27,16 @@ export default {
         options: Object.keys(allPipetteSpecsByDisplayNames),
       },
       defaultValue: Object.keys(allPipetteSpecsByDisplayNames)[0],
-    }
-  }
+    },
+  },
 } as Meta
 
-
-const Template: Story<React.ComponentProps<typeof InstrumentDiagramComponent>> = ({pipetteSpecs, ...args}) => (
-  <InstrumentDiagramComponent {...args} pipetteSpecs={allPipetteSpecsByDisplayNames[pipetteSpecs]} />
+const Template: Story<
+  React.ComponentProps<typeof InstrumentDiagramComponent>
+> = ({ pipetteSpecs, ...args }) => (
+  <InstrumentDiagramComponent
+    {...args}
+    pipetteSpecs={allPipetteSpecsByDisplayNames[pipetteSpecs]}
+  />
 )
 export const InstrumentDiagram = Template.bind({})
diff --git a/components/src/instrument/InstrumentGroup.stories.tsx b/components/src/instrument/InstrumentGroup.stories.tsx
index 59f3ace5bc3..a2831f0fd27 100644
--- a/components/src/instrument/InstrumentGroup.stories.tsx
+++ b/components/src/instrument/InstrumentGroup.stories.tsx
@@ -7,31 +7,40 @@ import { InstrumentGroup as InstrumentGroupComponent } from './InstrumentGroup'
 
 import type { Story, Meta } from '@storybook/react'
 
-
-const allPipetteSpecsByDisplayNames = keyBy(getAllPipetteNames().map(getPipetteNameSpecs), 'displayName')
-const leftPipettesByName = reduce(allPipetteSpecsByDisplayNames, (acc, pipetteSpecs, displayName) => {
-  return {
-    ...acc,
-    [displayName]:{
-      mount: 'left',
-      description: displayName,
-      pipetteSpecs,
-      isDisabled: false,
+const allPipetteSpecsByDisplayNames = keyBy(
+  getAllPipetteNames().map(getPipetteNameSpecs),
+  'displayName'
+)
+const leftPipettesByName = reduce(
+  allPipetteSpecsByDisplayNames,
+  (acc, pipetteSpecs, displayName) => {
+    return {
+      ...acc,
+      [displayName]: {
+        mount: 'left',
+        description: displayName,
+        pipetteSpecs,
+        isDisabled: false,
+      },
     }
-  }
-}, {})
-const rightPipettesByName = reduce(allPipetteSpecsByDisplayNames, (acc, pipetteSpecs, displayName) => {
-  return {
-    ...acc,
-    [displayName]:{
-      mount: 'right',
-      description: displayName,
-      pipetteSpecs,
-      isDisabled: false,
+  },
+  {}
+)
+const rightPipettesByName = reduce(
+  allPipetteSpecsByDisplayNames,
+  (acc, pipetteSpecs, displayName) => {
+    return {
+      ...acc,
+      [displayName]: {
+        mount: 'right',
+        description: displayName,
+        pipetteSpecs,
+        isDisabled: false,
+      },
     }
-  }
-}, {})
-
+  },
+  {}
+)
 
 export default {
   title: 'Library/Organisms/Instrument Group',
@@ -49,13 +58,18 @@ export default {
         options: Object.keys(rightPipettesByName),
       },
       defaultValue: Object.keys(rightPipettesByName)[0],
-    }
-  }
+    },
+  },
 } as Meta
 
-
-const Template: Story<React.ComponentProps<typeof InstrumentGroupComponent>> = ({left, right, ...args}) => (
-  <InstrumentGroupComponent {...args} left={leftPipettesByName[left]} right={rightPipettesByName[right]} />
+const Template: Story<
+  React.ComponentProps<typeof InstrumentGroupComponent>
+> = ({ left, right, ...args }) => (
+  <InstrumentGroupComponent
+    {...args}
+    left={leftPipettesByName[left]}
+    right={rightPipettesByName[right]}
+  />
 )
 export const InstrumentGroup = Template.bind({})
 InstrumentGroup.args = {
@@ -70,5 +84,5 @@ InstrumentGroup.args = {
     description: 'p10 Single',
     pipetteSpecs: { channels: 1, displayCategory: 'GEN2' },
     isDisabled: true,
-  }
+  },
 }
diff --git a/components/src/instrument/PipetteSelect.stories.tsx b/components/src/instrument/PipetteSelect.stories.tsx
index b08a1552476..6ba094bfc9a 100644
--- a/components/src/instrument/PipetteSelect.stories.tsx
+++ b/components/src/instrument/PipetteSelect.stories.tsx
@@ -7,10 +7,22 @@ export default {
   title: 'Library/Organisms/Pipette Select',
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof PipetteSelectComponent>> = ({pipetteName, ...args}) => {
-  const [pipetteNameControlled, setPipetteNameControlled] = React.useState(pipetteName)
-  const handleChange = (pipName: string): unknown => setPipetteNameControlled(pipName)
-  return <PipetteSelectComponent {...args} pipetteName={pipetteNameControlled} onPipetteChange={handleChange} />
+const Template: Story<React.ComponentProps<typeof PipetteSelectComponent>> = ({
+  pipetteName,
+  ...args
+}) => {
+  const [pipetteNameControlled, setPipetteNameControlled] = React.useState(
+    pipetteName
+  )
+  const handleChange = (pipName: string): unknown =>
+    setPipetteNameControlled(pipName)
+  return (
+    <PipetteSelectComponent
+      {...args}
+      pipetteName={pipetteNameControlled}
+      onPipetteChange={handleChange}
+    />
+  )
 }
 export const PipetteSelect = Template.bind({})
 PipetteSelect.args = {
diff --git a/components/src/modals/Modal.stories.tsx b/components/src/modals/Modal.stories.tsx
index 4268664ff54..28fcb35bd36 100644
--- a/components/src/modals/Modal.stories.tsx
+++ b/components/src/modals/Modal.stories.tsx
@@ -1,16 +1,37 @@
 import * as React from 'react'
-import { AlertModal, BaseModal, ContinueModal, Overlay, SpinnerModal, SpinnerModalPage} from './'
-import { Box, Text, Flex, SecondaryBtn, Icon, JUSTIFY_FLEX_END, DISPLAY_FLEX, ALIGN_CENTER, FONT_SIZE_HEADER, FONT_WEIGHT_REGULAR, SPACING_2 } from '@opentrons/components'
+import {
+  AlertModal,
+  BaseModal,
+  ContinueModal,
+  Overlay,
+  SpinnerModal,
+  SpinnerModalPage,
+} from './'
+import {
+  Box,
+  Text,
+  Flex,
+  SecondaryBtn,
+  Icon,
+  JUSTIFY_FLEX_END,
+  DISPLAY_FLEX,
+  ALIGN_CENTER,
+  FONT_SIZE_HEADER,
+  FONT_WEIGHT_REGULAR,
+  SPACING_2,
+} from '@opentrons/components'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Modal',
-  decorators: [Story => (
-    <Box width="32rem" height="16rem">
-      <Story />
-    </Box>
-  )]
+  decorators: [
+    Story => (
+      <Box width="32rem" height="16rem">
+        <Story />
+      </Box>
+    ),
+  ],
 } as Meta
 
 const BaseTemplate: Story<React.ComponentProps<typeof BaseModal>> = args => (
@@ -20,11 +41,11 @@ export const Base = BaseTemplate.bind({})
 Base.args = {
   header: (
     <Text
-    as="h2"
-    display={DISPLAY_FLEX}
-    alignItems={ALIGN_CENTER}
-    fontSize={FONT_SIZE_HEADER}
-    fontWeight={FONT_WEIGHT_REGULAR}
+      as="h2"
+      display={DISPLAY_FLEX}
+      alignItems={ALIGN_CENTER}
+      fontSize={FONT_SIZE_HEADER}
+      fontWeight={FONT_WEIGHT_REGULAR}
     >
       <Icon name="alert" width="1em" marginRight={SPACING_2} />
       Attention
@@ -37,8 +58,8 @@ Base.args = {
         tempor incididunt ut labore et dolore magna aliqua.
       </Text>
       <Text marginBottom={SPACING_2}>
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat.
       </Text>
       <Text>
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -53,38 +74,39 @@ Base.args = {
   ),
 }
 
-
 const AlertTemplate: Story<React.ComponentProps<typeof AlertModal>> = args => (
   <AlertModal {...args} />
 )
 export const Alert = AlertTemplate.bind({})
 Alert.args = {
-  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   heading: 'heading',
   alertOverlay: true,
-  buttons: [{children: 'foo'}]
+  buttons: [{ children: 'foo' }],
 }
 
-const ContinueTemplate: Story<React.ComponentProps<typeof ContinueModal>> = args => (
-  <ContinueModal {...args} />
-)
+const ContinueTemplate: Story<
+  React.ComponentProps<typeof ContinueModal>
+> = args => <ContinueModal {...args} />
 export const Continue = ContinueTemplate.bind({})
 Continue.args = {
-  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   heading: 'heading',
 }
 
-const SpinnerTemplate: Story<React.ComponentProps<typeof SpinnerModal>> = args => (
-  <SpinnerModal {...args} />
-)
+const SpinnerTemplate: Story<
+  React.ComponentProps<typeof SpinnerModal>
+> = args => <SpinnerModal {...args} />
 export const Spinner = SpinnerTemplate.bind({})
 
-const SpinnerPageTemplate: Story<React.ComponentProps<typeof SpinnerModalPage>> = args => (
-  <SpinnerModalPage {...args} />
-)
+const SpinnerPageTemplate: Story<
+  React.ComponentProps<typeof SpinnerModalPage>
+> = args => <SpinnerModalPage {...args} />
 export const SpinnerPage = SpinnerPageTemplate.bind({})
 
 const OverlayTemplate: Story<React.ComponentProps<typeof Overlay>> = args => (
   <Overlay {...args} />
 )
-export const JustOverlay = OverlayTemplate.bind({})
\ No newline at end of file
+export const JustOverlay = OverlayTemplate.bind({})
diff --git a/components/src/nav/SidePanel.stories.tsx b/components/src/nav/SidePanel.stories.tsx
index 0b37428a45e..271b7a67e59 100644
--- a/components/src/nav/SidePanel.stories.tsx
+++ b/components/src/nav/SidePanel.stories.tsx
@@ -1,25 +1,29 @@
 import * as React from 'react'
-import { SidePanel as SidePanelComponent} from './SidePanel'
-import {Text, Flex, JUSTIFY_CENTER, ALIGN_CENTER} from '@opentrons/components'
+import { SidePanel as SidePanelComponent } from './SidePanel'
+import { Text, Flex, JUSTIFY_CENTER, ALIGN_CENTER } from '@opentrons/components'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Side Panel',
   decorators: [
-    Story => <Flex><Story /></Flex>
-  ]
+    Story => (
+      <Flex>
+        <Story />
+      </Flex>
+    ),
+  ],
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof SidePanelComponent>> = args => (
-  <SidePanelComponent {...args} />
-)
+const Template: Story<
+  React.ComponentProps<typeof SidePanelComponent>
+> = args => <SidePanelComponent {...args} />
 export const SidePanel = Template.bind({})
 SidePanel.args = {
-  title: "Title goes here",
+  title: 'Title goes here',
   children: (
     <Flex justifyContent={JUSTIFY_CENTER} alignItems={ALIGN_CENTER}>
       <Text>Side Panel Children</Text>
     </Flex>
-  )
+  ),
 }
diff --git a/components/src/primitives/Box.stories.tsx b/components/src/primitives/Box.stories.tsx
index 32480dd7657..3d322842a0a 100644
--- a/components/src/primitives/Box.stories.tsx
+++ b/components/src/primitives/Box.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box as BoxComponent} from './Box'
+import { Box as BoxComponent } from './Box'
 
 import type { Story, Meta } from '@storybook/react'
 
diff --git a/components/src/primitives/Flex.stories.tsx b/components/src/primitives/Flex.stories.tsx
index 4947ce00e3e..f9773b5fc55 100644
--- a/components/src/primitives/Flex.stories.tsx
+++ b/components/src/primitives/Flex.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Flex as FlexComponent} from './Flex'
+import { Flex as FlexComponent } from './Flex'
 import {
   Box,
   DIRECTION_COLUMN,
diff --git a/components/src/primitives/Svg.stories.tsx b/components/src/primitives/Svg.stories.tsx
index b33a9b4d50b..088e5ed6721 100644
--- a/components/src/primitives/Svg.stories.tsx
+++ b/components/src/primitives/Svg.stories.tsx
@@ -10,7 +10,7 @@ export default {
 const Template: Story<React.ComponentProps<typeof SvgComponent>> = args => (
   <SvgComponent {...args} />
 )
-export const Svg= Template.bind({})
+export const Svg = Template.bind({})
 Svg.args = {
   svgWidth: '300',
   svgHeight: '300',
diff --git a/components/src/structure/Card.stories.tsx b/components/src/structure/Card.stories.tsx
index f29ba2a0e4a..e6cb7b6ddf2 100644
--- a/components/src/structure/Card.stories.tsx
+++ b/components/src/structure/Card.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Card as CardComponent } from './Card'
-import { Box, Text, SIZE_4, SPACING_3} from '@opentrons/components'
+import { Box, Text, SIZE_4, SPACING_3 } from '@opentrons/components'
 
 import type { Story, Meta } from '@storybook/react'
 
@@ -16,13 +16,13 @@ Card.args = {
   title: 'Main Title Goes Here',
   disabled: false,
   children: (
-      <>
-        <Box size={SIZE_4} padding={SPACING_3}>
-          <Text>Some text contents</Text>
-        </Box>
-        <Box size={SIZE_4} padding={SPACING_3}>
-          <Text>Some more text contents</Text>
-        </Box>
-      </>
-    )
+    <>
+      <Box size={SIZE_4} padding={SPACING_3}>
+        <Text>Some text contents</Text>
+      </Box>
+      <Box size={SIZE_4} padding={SPACING_3}>
+        <Text>Some more text contents</Text>
+      </Box>
+    </>
+  ),
 }
diff --git a/components/src/structure/LabeledValue.stories.tsx b/components/src/structure/LabeledValue.stories.tsx
index cde00f4f0f1..32c657acd80 100644
--- a/components/src/structure/LabeledValue.stories.tsx
+++ b/components/src/structure/LabeledValue.stories.tsx
@@ -7,11 +7,11 @@ export default {
   title: 'Library/Molecules/Labeled Value',
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof LabeledValueComponent>> = args => (
-  <LabeledValueComponent {...args} />
-)
+const Template: Story<
+  React.ComponentProps<typeof LabeledValueComponent>
+> = args => <LabeledValueComponent {...args} />
 export const LabeledValue = Template.bind({})
 LabeledValue.args = {
   label: 'Here is the label',
-  value: "This is the value that needs a label",
+  value: 'This is the value that needs a label',
 }
diff --git a/components/src/structure/Splash.stories.tsx b/components/src/structure/Splash.stories.tsx
index 28384886738..7c2b071d00d 100644
--- a/components/src/structure/Splash.stories.tsx
+++ b/components/src/structure/Splash.stories.tsx
@@ -6,15 +6,19 @@ import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Library/Molecules/Splash',
-  decorators: [(Story) => (
-    <Box height="20rem" width="100%">
-      <Story />
-    </Box>
-  )]
+  decorators: [
+    Story => (
+      <Box height="20rem" width="100%">
+        <Story />
+      </Box>
+    ),
+  ],
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof SplashComponent>> = (args) => <SplashComponent {...args}/>
+const Template: Story<React.ComponentProps<typeof SplashComponent>> = args => (
+  <SplashComponent {...args} />
+)
 export const Splash = Template.bind({})
 Splash.args = {
-  iconName: 'ot-logo'
+  iconName: 'ot-logo',
 }
diff --git a/components/src/structure/TitleBar.stories.tsx b/components/src/structure/TitleBar.stories.tsx
index ba65e3a85d7..1d47c372cd1 100644
--- a/components/src/structure/TitleBar.stories.tsx
+++ b/components/src/structure/TitleBar.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { TitleBar } from './TitleBar'
-import { Text, Icon, SIZE_1} from '@opentrons/components'
+import { Text, Icon, SIZE_1 } from '@opentrons/components'
 
 import type { Story, Meta } from '@storybook/react'
 
@@ -19,8 +19,16 @@ Basic.args = {
 
 export const TitlesAsReactNodes = Template.bind({})
 TitlesAsReactNodes.args = {
-  title: <Text as="span">Fancy Title With Icon <Icon size={SIZE_1} name="wifi"/></Text>,
-  subtitle: <Text as="a" href="#">sub-title as  link</Text>,
+  title: (
+    <Text as="span">
+      Fancy Title With Icon <Icon size={SIZE_1} name="wifi" />
+    </Text>
+  ),
+  subtitle: (
+    <Text as="a" href="#">
+      sub-title as link
+    </Text>
+  ),
 }
 
 export const WithBackButton = Template.bind({})
@@ -30,5 +38,5 @@ WithBackButton.args = {
   back: {
     children: 'back',
     onClick: () => {},
-  }
-}
\ No newline at end of file
+  },
+}
diff --git a/components/src/tooltips/Tooltip.stories.tsx b/components/src/tooltips/Tooltip.stories.tsx
index b391b12cf98..dd484fe84b7 100644
--- a/components/src/tooltips/Tooltip.stories.tsx
+++ b/components/src/tooltips/Tooltip.stories.tsx
@@ -2,23 +2,34 @@ import * as React from 'react'
 import { Tooltip } from './Tooltip'
 import { useTooltip } from './useTooltip'
 import { useHoverTooltip } from './useHoverTooltip'
-import { Box, Flex, JUSTIFY_CENTER, ALIGN_CENTER, SIZE_4, SIZE_3, C_LIGHT_GRAY, C_MED_GRAY } from '@opentrons/components'
+import {
+  Box,
+  Flex,
+  JUSTIFY_CENTER,
+  ALIGN_CENTER,
+  SIZE_4,
+  SIZE_3,
+  C_LIGHT_GRAY,
+  C_MED_GRAY,
+} from '@opentrons/components'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Library/Atoms/Tooltip',
-  decorators: [Story => (
-    <Flex
-      justifyContent={JUSTIFY_CENTER}
-      alignItems={ALIGN_CENTER}
-      height={SIZE_4}
-      width="100%"
-      backgroundColor={C_LIGHT_GRAY}>
-        <Story/>
-    </Flex>
-
-  )]
+  decorators: [
+    Story => (
+      <Flex
+        justifyContent={JUSTIFY_CENTER}
+        alignItems={ALIGN_CENTER}
+        height={SIZE_4}
+        width="100%"
+        backgroundColor={C_LIGHT_GRAY}
+      >
+        <Story />
+      </Flex>
+    ),
+  ],
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Tooltip>> = args => (
@@ -27,8 +38,7 @@ const Template: Story<React.ComponentProps<typeof Tooltip>> = args => (
 export const Basic = Template.bind({})
 Basic.args = {
   visible: true,
-  children:
-    'This is a simple tooltip atom.',
+  children: 'This is a simple tooltip atom.',
   id: 'string-usually-provided-by-useTooltip-hook',
   placement: 'auto',
   style: {},
@@ -37,14 +47,19 @@ Basic.args = {
 }
 
 const StatefulTemplate: Story<React.ComponentProps<typeof Tooltip>> = args => {
-  const {visible, children, placement} = args
+  const { visible, children, placement } = args
   const [targetProps, tooltipProps] = useTooltip({ placement })
   return (
     <>
-      <Box height={SIZE_3} width={SIZE_3} backgroundColor={C_MED_GRAY} {...targetProps}>
+      <Box
+        height={SIZE_3}
+        width={SIZE_3}
+        backgroundColor={C_MED_GRAY}
+        {...targetProps}
+      >
         Target
       </Box>
-      <Tooltip {...tooltipProps} {...{visible, children}} />
+      <Tooltip {...tooltipProps} {...{ visible, children }} />
     </>
   )
 }
@@ -56,11 +71,16 @@ WithUseTooltip.args = {
 }
 
 const HoverTemplate: Story<React.ComponentProps<typeof Tooltip>> = args => {
-  const {children} = args
+  const { children } = args
   const [targetProps, tooltipProps] = useHoverTooltip()
   return (
-     <>
-      <Box height={SIZE_3} width={SIZE_3} backgroundColor={C_MED_GRAY} {...targetProps}>
+    <>
+      <Box
+        height={SIZE_3}
+        width={SIZE_3}
+        backgroundColor={C_MED_GRAY}
+        {...targetProps}
+      >
         Target
       </Box>
       <Tooltip {...tooltipProps}>{children}</Tooltip>
@@ -71,4 +91,4 @@ export const WithUseHoverTooltip = HoverTemplate.bind({})
 WithUseHoverTooltip.args = {
   children:
     'This is a tooltip that takes advantage of the useHoverTooltip hook, and only appears when the target is hovered.',
-}
\ No newline at end of file
+}
diff --git a/components/tsconfig.json b/components/tsconfig.json
index 2c33e292dbe..ebfcf7f2359 100644
--- a/components/tsconfig.json
+++ b/components/tsconfig.json
@@ -6,5 +6,6 @@
     "rootDir": "src",
     "outDir": "lib"
   },
-  "include": ["typings", "src"]
+  "include": ["typings", "src"],
+  "exclude": ["**/*.stories.tsx"]
 }
diff --git a/tsconfig-base.json b/tsconfig-base.json
index 2b43d853146..d8219bb09cb 100644
--- a/tsconfig-base.json
+++ b/tsconfig-base.json
@@ -9,6 +9,5 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "resolveJsonModule": true
-  },
-  "exclude": ["**/*.stories.tsx"]
+  }
 }
diff --git a/tsconfig-eslint.json b/tsconfig-eslint.json
new file mode 100644
index 00000000000..f8a6cf1bebe
--- /dev/null
+++ b/tsconfig-eslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig-base.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": true
+  },
+  "include": [
+    "app-shell/src",
+    "app-shell/typings",
+    "components/src",
+    "components/typings",
+    "discovery-client/src",
+    "discovery-client/typings",
+    "labware-library/src",
+    "labware-library/typings"
+  ]
+}