Eslint plugin

[matheusps]

Eslint plugin Admin UI

This discussion exists to gather ideas for building an eslint-plugin for Admin UI. It can help us to ensure the correct usage of our features.

Rules

The rules supported by @vtex/eslint-plugin-admin-ui

ensure-token-usage

Using tokens is considered good practice to achieve consistency. This rule ensures that themeable csx properties prefer tokens instead of hardcoded values.

✅ Pass

import { csx } from '@vtex/admin-ui'

const styles = csx({
  bg: '$blue50'
})

import { csx } from '@vtex/admin-ui'

const styles = csx({
  display: 'flex'
})

❌ Fail

import { csx } from '@vtex/admin-ui'

const styles = csx({
  bg: 'black' // warning
})

import { csx } from '@vtex/admin-ui'

const styles = csx({
  bg: '#000' // warning
})

import { csx } from '@vtex/admin-ui'

const blackColor = '#000'

const styles = csx({
  bg: blackColor, // warning
})

ensure-csx-correct-usage

The csx function should not be used inside of React components scope.

✅ Pass

import { csx } from '@vtex/admin-ui'

const className = csx({
  bg: '$blue10',
})

function Div(){
  return (
    <div className={className} />
  )
}

❌ Fail

import { csx } from '@vtex/admin-ui'

function Div(){
  return (
    <div className={csx({ bg: '$blue10' })} />
  )
}

import { csx } from '@vtex/admin-ui'

const styleObject = {
  bg: '$blue10',
}

function Div(){
  return (
    <div className={csx(styleObject)} />
  )
}

import { csx } from '@vtex/admin-ui'

function Div(){
  const className = csx({
    bg: '$blue10',
  })

  return (
    <div className={className} />
  )
}

References

Other design systems, like Admin UI, rely on Eslint plugins to boost the developer experience. Some examples:

• https://atlassian.design/components/eslint-plugin-design-system/usage
• https://gestalt.pinterest.systems/get_started/developers/eslint_plugin

Open space for ideas

This plugin will not be successful without our user's/contributors' input. So, please, your opinions are welcome and important.

1. Do you think the proposed rules are useful for your daily tasks?
2. Are there other rules that you have in mind?
3. Are there any other developer performance let don't that you have in Admin UI?