Я сделал плагин VSCODE, который может записать каждую часть компонента React в нескольких разделительных редакторах на одном экране

Всем привет! Я разработчик FE, который использовал React в течение более 6 лет, я предпочитаю комбинацию React + mobx + css-in-js Анкет Большинство моих проектов разработаны с помощью React, но небольшое количество из них использовали Vue, и я также следил за некоторыми новыми функциями Vue.

Недавно я только что обнаружил интересную новую функцию Vue Ecosystem: Разделенные редакторы Анкет

Что такое разделенные редакторы

Что такое Разделенные редакторы ? Это функция нового плагина VSCODE для VUE под названием Volar , вы можете Установите Volar и испытать это в проектах VUE. Вот воларная демонстрация:

В демонстрации щелкните Разделенные редакторы кнопка в верхнем правом углу, чтобы генерировать 3 субноконтратора в соответствии с Шаблон / стиль / Скрипт Код в SFC, а затем каждый редактор складывает несвязанный код.

Вначале я только что нашел это интересным. Но после размышлений и экспериментов я также нашел это полезным. Я понимаю, что:

Это не только позволяет нам больше сосредоточиться на разработке определенной категории кода в каждом компоненте, а также позволяет нам легко сканировать и контролировать общий код компонента, чтобы справиться с отношениями между различными кодами категорий.

Осуществимость разделенных редакторов в React

Потому что я часто использую CSS в JS Чтобы написать стили в разработке React, я подумал о возможности объединить эту идею с React. В этой идее нам необходимо разделить код компонента React на несколько категорий в одном файле, а затем поместить их на каждого разделенного редактора и сложить не связанный код отдельно. О форме расщепления, если в соответствии с уровнем детализации, есть следующие ситуации:

1-й уровень

• Код компонента
• код стилей

Уровень 2

Если разделение более подробно:

• Код логического компонента
• Код компонента (JSX)
• код стилей

Уровень 3

На самом деле, это может быть более подробно:

• Код логического компонента
• Код компонента (JSX)
• код стилей
• Глобальные члены (константы, функции, пользовательские крючки и т. Д.)

Чем более подробные категории кодов, тем лучше будет эффект разделенных редакторов. Потому что таким образом, более не связанный код может быть сложен в каждом редакторе, а область вертикальной прокрутки может быть уменьшена как можно больше.

Мое решение

В настоящее время синтаксис функциональных компонентов React очень свободен. Если мы не добавим какую -либо соглашение о структуре кода, будет некоторым трудно реализовать эту идею идеально. Здесь я покажу выполнимое решение, которое может реализовать всю форму расщепления уровня 1-3, упомянутое выше.

Должно быть более одного способа реализации этой идеи. Например, я также думаю о решении, основанном на синтаксисе регулярных функциональных компонентов. Но в настоящее время решение в этой статье может полностью реализовать функции идеи разделенных редакторов.

Это решение должно добавить соглашения в код компонента, оно использует интересный API компонентов функции React, который я недавно сделал:

Joe-Sky/JSX-SFC

API компонента функционального компонента SFC, подобного React, для управления CSS-In-JS и статическими элементами.

Вступление

JSX-SFC (JSX отдельные компоненты функции) – это SFC как API функционального компонента React для управления CSS-In-JS и статическими членами. Он написан TypeScript и обладает полной безопасностью типа, и на основе оптимизации компиляторов также легко использовать ️.

Живая демонстрация здесь ( css в js использовать twin.macro , может испытать Типинг/горячее перезагрузка/Dev Tools по коде и ящику).

Функции

• ✨ Явно отдельно JSX Tags , Логика , стили и Любые другие члены внутри компонентов функции React
• 💫 Полностью тип вывод Дизайн по типографию
• 🎉 Поддержите все крючки React
• 🔥 Поддержка Реагируйте быстро обновление
• 🔧 Поддержка плагинов React Eslint
• 🔨 Поддержка React Dev Tools
• ⚡ Производительность рендеринга аналогична регулярной функциональной компонентам, Есть простой тестер
• 🚀 Размер кода времени выполнения менее 1 кб и без зависимостей
• 💻 Поддержка Разделенные редакторы Похоже на Volar по VSCODE-JSX-SFC , вот…

Этот API ( jsx-sfc ) полностью основан на TypeScript, это заменитель, согласующийся с типами TS синтаксиса компонентов регулярных функций. Это может рассматриваться как ментальная модель со структурой кода, аналогичной SFC , но он используется для написания компонентов функции React в чистых файлах JSX/TSX. Динамическая демонстрация:

Кроме того, JSX-SFC является API, который должен использоваться с компилятором, чтобы улучшить производительность рендеринга и адаптивность экосистемы React, и у меня используется более 4 производственных проектов. Для получения подробной информации вы можете увидеть его документацию Анкет

Определение типа TS этого API (грубая версия):

function sfc(
  options: {
    Component: (props?: Props & Styles & Static & { props: Props }) => ComponentData;
    render?: (args: { data: ComponentData; props: Props; styles: Styles } & Static) => JSX.Element;
    styles?: Styles;
    static?: Static;
  }
): React.FC & { Render: (data?: ComponentData), Component: React.FC } & Styles & Static;

Фактическое определение типа здесь.

Компонент, который использует JSX-SFC Написать выглядит так:

import sfc from 'jsx-sfc';
import styled from 'styled-components';

const Todo = sfc({
  Component({ value, styles: { Input } }) {
    return ;
  },

  styles: () => ({
    Input: styled.input`
      color: #000;
    `
  })
});

/* Equivalent regular syntax:
function Todo({ value }) {
  return ;
}

const Input = styled.input`
  color: #000;
`;

Object.assign(Todo, { styles: { Input } });
*/

const App = () => ;

Он также поддерживает написание визуализации компонента в отдельной функции:

import sfc from 'jsx-sfc';
import styled from 'styled-components';

const Todo = sfc({
  Component() {
    const [value, setValue] = useState('test');

    return {
      value,
      onChange(e) {
        setValue(e.target.value);
      }
    };
  },

  render: ({ data, props, styles: { Input } }) => (
    return ;
  ),

  styles: () => ({
    Input: styled.input`
      color: #000;
    `
  })
});

/* Equivalent regular syntax:
function Todo(props) {
  const [value, setValue] = useState('test');

  function onChange(e) {
    setValue(e.target.value);
  }

  return ;
}

const Input = styled.input`
  color: #000;
`;

Object.assign(Todo, { styles: { Input } });
*/

const App = () => ;

Кроме того, он поддерживает определение статических членов компонентов:

Каковы статические члены функционального компонента? Вы можете обратиться к здесь.

import sfc from 'jsx-sfc';
import styled from 'styled-components';

const Todo = sfc({
  Component({ hooks: { useInputValue } }) {
    const [value, setValue] = useInputValue('test');

    return {
      value,
      onChange(e) {
        setValue(e.target.value);
      }
    };
  },

  static: () => {
    function useInputValue(initial) {
      const [value, setValue] = useState(initial);
      return { value, setValue };
    }

    return {
      hooks: {
        useInputValue
      }
    };
  },

  render: ({ data, styles: { Input } }) => (
    return ;
  ),

  styles: () => ({
    Input: styled.input`
      color: #000;
    `
  })
});

/* Equivalent regular syntax:
function Todo() {
  const [value, setValue] = useInputValue('test');

  function onChange(e) {
    setValue(e.target.value);
  }

  return ;
}

function useInputValue(initial) {
  const [value, setValue] = useState(initial);
  return { value, setValue };
}

const Input = styled.input`
  color: #000;
`;

Object.assign(Todo, { hooks: { useInputValue }, styles: { Input } });
*/

// Using the static members
const App = () => {
  const [value, setValue] = Todo.hooks.useInputValue('test');
  return (
    <>
      
      
    
  );
};

Приведенные выше 3 ситуации точно соответствуют 3 уровням формы разделения кода, упомянутой в предыдущем разделе.

Я сделал несколько примеров использования этого API для управления различными библиотеками CSS-In-JS, Что вы можете увидеть здесь Анкет

Сделал плагин Vscode для разделенных редакторов в React

Я также сделал плагин VSCODE с аналогичной идеей: VSCODE-JSX-SFC . Это должно использоваться с JSX-SFC , вот демонстрация:

Как Волар, мы можем сосредоточиться на написании Составная часть / оказывать / стили Коды компонентов реагирования в нескольких разделенных редакторах; В то же время он может обзор всех кодов компонентов, чтобы уменьшить умственную нагрузку, вызванную взаимосвязи между этими различными категориями кода, и уменьшить длину вертикального кода прокрутки.

Если вы не привыкли написать отдельную функцию рендеринга, разделенные редакторы по -прежнему могут поддерживать только Компонент / Стили :

Если несколько функциональных компонентов определены JSX-SFC Существуют в одном файле, несвязанный код будет сложен для каждого компонента в каждом разделенном редакторе:

Если вы Используйте JSX-SFC для определения статических членов , они будут разделены в Компонент и статический / рендер / Стили форма:

Как быстро испытать

Шаг 1: Создайте образец проекта, используя Создать-реакт-приложение :

npx create-react-app my-app

Шаг 2: Установка JSX-SFC.MACRO и Стилидированные компоненты :

cd my-app
npm install jsx-sfc.macro styled-components

Шаг 3: Скопируйте этот код в src/app.js :

import styled from 'styled-components';
import sfc from 'jsx-sfc.macro';
import logo from './logo.svg';

const App = sfc({
  Component({ styles: { Wrapper }, ...props }) {
    return (
      
        

          
          

            Edit src/App.js and save to reload.
          
          
            Learn React
          
        
      
    );
  },

  styles: () => {
    return {
      Wrapper: styled.div`
        text-align: center;

        .App-logo {
          height: 40vmin;
          pointer-events: none;
        }

        @media (prefers-reduced-motion: no-preference) {
          .App-logo {
            animation: App-logo-spin infinite 20s linear;
          }
        }

        .App-header {
          background-color: #282c34;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: calc(10px + 2vmin);
          color: white;
        }

        .App-link {
          color: #61dafb;
        }

        @keyframes App-logo-spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      `
    };
  }
});

export default App;

Шаг 4: Установка VSCODE-JSX-SFC (Поиск “JSX-SFC”) в vScode, затем нажмите ИКОНА РЕДАКТОРЫ РЕДАКТОРЫ В правом верхнем углу редактора просмотра кода и начните испытывать:

Вышесказанное – испытать в форме макроса Babel в CRA, а также другие, такие как WebPack, Rollup и Vite, также можно поддерживать, просто замените JSX-SFC.MACRO с JSX-SFC . Пожалуйста, смотрите здесь для деталей.

Спасибо за прочтение.

Этот плагин VSCode, безусловно, не идеальна в настоящее время, но его уже можно попытаться использовать для ежедневного развития. Его реализация использует @Vue/Reactivity, которая такая же, как Volar.

Добро пожаловать, чтобы испытать этот интересный инструмент и придать предложения, репо и документация кода:

Joe-Sky/JSX-SFC

API компонента функционального компонента SFC, подобного React, для управления CSS-In-JS и статическими элементами.

Оригинал: “https://dev.to/joesky/i-made-a-vscode-plugin-that-can-write-each-part-of-react-component-in-multiple-split-editors-on-the-same-screen-58a5”