eslint-plugin-react2vue

This is an ESLint plugin for converting the React Hooks API to the Vue Composition API for vue-jsx-vapor.

Suggest using unplugin-auto-imports to automatically import the Vue Composition API.

Install

pnpm add eslint-plugin-react2vue

Setup

.vscode/settings.json

{
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
  },
}

eslint.config.ts

import parserTs from '@typescript-eslint/parser'
import react2vue from 'eslint-plugin-react2vue'

export default {
  files: ['**/*.tsx'],
  languageOptions:{
    parser: parserTs, // support ts
    parserOptions: {
      sourceType: 'module',
      ecmaFeatures: {
        jsx: true,
      },
    },
  },
  rules: {
    'react2vue/useEffect': 'error',
    'react2vue/useState': 'error',
    'react2vue/useImperativeHandle': 'error',
    'react2vue/forwardRef': 'error',
    'react2vue/useMemo': 'error',
    'react2vue/useCallback': 'error',
    'react2vue/defineComponent': 'error',
    'react2vue/defineSlots': 'error',
  },
  plugins: {
    react2vue,
  },
}

Rules

useState

// before
const [foo, setFoo] = useState(count)
console.log([foo, setFoo(1), setFoo])

// after
const foo = ref(0)
console.log([foo.value, foo.value = 1, val => foo.value = val])

useEffect

Use watchEffect instead of useEffect.

// before
useEffect(() => {
  console.log(foo)
}, [foo])

// after
watchEffect(() => {
  console.log(foo)
})

useMemo

Use computed instead of useMemo.

// before
const double = useMemo(() => foo * 2, [foo])
console.log({ double }, [double])

// after
const double = computed(() => foo * 2)
console.log({ double: double.value }, [double.value])

defineComponent

Use defineComponent macro to support destructuring props.

// before
const Comp = ({ count = 1 }) => {
  return <div>{count}</div>
}

// after
const Comp = defineComponent(({ count = 1 }) => {
  return <div>{count}</div>
})

defineSlots

Use defineSlots instead of children prop.

// before
const Comp = ({ children }) => {
  return children
}

// after
const Comp = ({ children }) => {
  const slots = defineSlots()
  return <slots.default />
}

useCallback

Remove useCallback.

// before
const callback = useCallback(() => {
  console.log(foo)
}, [foo])

// after
const callback = () => {
  console.log(foo)
}

forwardRef

Remove forwardRef.

// before
const Comp = forwardRef(({ count }, ref) => {
  return <div>{count}</div>
})

// after
const Comp = ({ count }) => {
  return <div>{count}</div>
}

useImperativeHandle

Use defineExpose instead of useImperativeHandle.

// before
const Comp = ({ count, ref }) => {
  useImperativeHandle(ref, () => {
    return {
      count: count * 2
    }
  }, [count])
  return <div>{count}</div>
}

// after
const Comp = ({ count }) => {
  defineExpose(computed(() => {
    return {
      count: count * 2
    }
  }))
  return <div>{count}</div>
}

License

MIT License © zhiyuanzmj