Как настроить intellisense в vsCode для React?

WbICHA, Я использую typescript, все равно не подсвечивает не чего
Вот как в целом выглядит этот хук откуда я пытаюсь получить данные и фнукци

import { createTranslator } from "@root/utils";
import {
  useQuery,
  usePut,
  usePost,
  useNavigate,
  useStyledNotification,
} from "@uikit";
import { useEffect } from "react";

interface IUseWorkOrderApi {
  id: string;
  setProcedures: React.Dispatch<React.SetStateAction<any[]>>;
  setErrorProcedure: React.Dispatch<React.SetStateAction<boolean>>;
}

const MODAL_DURATION = 5;

const translate = createTranslator("WorkOrders");

export const useWorkOrderApi = ({
  id,
  setProcedures,
  setErrorProcedure,
}: IUseWorkOrderApi) => {
  const { toPrevious } = useNavigate();
  const api = useStyledNotification();

  const { data: workOrderData, isLoading: isLoadingWorkOrder } = useQuery(
    `workOrders${id}`,
    `WorkOrders/Retrieve?id=${id}`,
  );

  const { data: proceduresData, isLoading: isLoadingProcedures } = useQuery(
    `Procedure${id}`,
    `WorkOrders/ListWorkOrderProcedures?id=${id}`,
  );

  const updateApprovers = usePost({
    name: `workOrders${id}`,
    uri: `WorkOrders/UpdateApprovers`,
    invalidateOnSuccess: true,
  });

  useEffect(() => {
    if (!isLoadingProcedures && proceduresData) {
      setProcedures(proceduresData.results);
    }
  }, [isLoadingProcedures, proceduresData, setProcedures]);

  useEffect(() => {
    !isLoadingProcedures &&
      setErrorProcedure(proceduresData.results.length === 0);
  }, [proceduresData, isLoadingProcedures, setErrorProcedure]);

  const updateWorkOrder = usePut({
    name: "workOrders",
    uri: "WorkOrders/UpdateBaseInfo",
  });

  const updateAsset = usePut({
    name: "workOrders",
    uri: "WorkOrders/UpdateAsset",
  });

  const updateProcedures = usePut({
    name: "workOrders",
    uri: "WorkOrders/UpdateWorkOrderProceduresList",
    onSuccess: () => {
      toPrevious();
      api.success({
        message: translate("Changes saved"),
        duration: MODAL_DURATION,
      });
    },
  });

  const updateDocuments = usePost({
    name: "UpdateDocuments",
    uri: "WorkOrders/UpdateDocuments",
  });

  return {
    workOrderData,
    isLoadingWorkOrder,
    proceduresData,
    isLoadingProcedures,
    updateWorkOrder,
    updateAsset,
    updateProcedures,
    updateDocuments,
    updateApprovers,
  };
};

Можно ли в playwright настроить и выключить отслеживание на веб-сайтах Преотвращать перекрестное отслеживание для safari?

Михаил Р., Нет, подскажите как это можно сделать?

Как добавить в CI/CD сриншотные тесты, сделанные через playwright?

А как можно усложняя?
Есть какой то вариант, что бы избежать запуска localhost:3000 на сервере гитлаба?

Где можно разместить свое портфолио сайтов (front-end) в формате, картинки - текст?

Lynn «Кофеман», Ну так то да)
Спасибо большое)

Где можно разместить свое портфолио сайтов (front-end) в формате, картинки - текст?

Lynn «Кофеман», Ну у меня НДА на проекты. Надо что бы они видели описание проекта, картинки которые я вставлю в README, а к самому коду доступа не было

Где можно разместить свое портфолио сайтов (front-end) в формате, картинки - текст?

А в гите разве можно не показывая код, разместить фото и описание проекта, при этом что бы не было видно код?

Почему при сборке библиотеки и подключения ее, выдает ошибку?

Алексей Ярков, Проблема точно не в этом, У меня почти все папки на англ. А эту давно назвал и как то привык к ней, не переименовываю поэтому)

Почему vite сборщик при сборке не подключает css файл, хотя создает его в папке?

Aetae, Алексей Ярков, Да, теперь понял суть, спасибо

Почему vite сборщик при сборке не подключает css файл, хотя создает его в папке?

WbICHA, Так в этом и вопрос был, как сделать так ,что бы он подключал. Реализовал через плагин vite

Как получить status code из запроса fetch в блоке catch?

А что то можно в catch в переменной error получить что то кроме error.message и error.name?

Как получить status code из запроса fetch в блоке catch?

Lynn «Кофеман», Вообще ошибка вот такая вот


но вот то что ниже, он выводит из e.message

А вот как получить этот ERR_CONNECTION_TIMED_OUT. Потому что
Failed to fetch выскакивает и в других случиях тоже

Почему vite сборщик при сборке не подключает css файл, хотя создает его в папке?

Dosya, Получилось,vite-plugin-css-injected-by-js
И тогда он при сборке css файл не создает, а встраивает его в js файл сразу

Почему vite сборщик при сборке не подключает css файл, хотя создает его в папке?

Я библиотеку собираю, посмотри по конфигу vite. При сборке библиотеки нет html файл. Он должен подключится в js файле, с помощью import

Как исправить ошибку nextjs Warning: Expected server HTML to contain a matching in?

szQocks, Я понял в чем проблема была, в том, что SideBar на стороне клиента по факту, а все что делается на стороне клиента, должно быть занесено в useEffect. Вообщем, я сделал вот так вот, и мне помогло

Вот

import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";
import { MenuList } from "@features/sidebar";
import { MakeOrderButton, PersonalAccount } from "@entities/sidebar";
import { LogotypeIcon } from "@shared/images";
import { useScreenResolution } from "@shared/libs/global";
import { BurgerIcon, HorizontalLine } from "@shared/ui";
import classes from "./Sidebar.module.scss";

const initialSidebarAnimate = {
  x: -100,
  opacity: 0,
};

const animateSidebarAnimate = {
  x: 0,
  opacity: 1,
};

const exitSidebarAnimate = {
  x: -100,
  opacity: 0,
};

const transitionSidebarAnimate = {
  x: -100,
  opacity: 0,
};

export const Sidebar = () => {
  const [active, setActive] = useState<boolean>(false);
  const [isMobile, setIsMobile] = useState(false);

  const mobile = useScreenResolution();
  const handlerBurgerMenu = () => setActive((state) => !state);

  useEffect(() => {
    setIsMobile(mobile);
  }, [mobile]);

  return (
    <>
      <BurgerIcon onClick={handlerBurgerMenu} active={active} />
      <AnimatePresence>
        {(!isMobile || (isMobile && active)) && (
          <motion.header
            transition={transitionSidebarAnimate}
            initial={initialSidebarAnimate}
            animate={animateSidebarAnimate}
            exit={exitSidebarAnimate}
            className={classes.headerSidebar}
          >
            <LogotypeIcon className={classes.logotypeSidebar} />
            <MakeOrderButton className={classes.orderButton} />
            <HorizontalLine />
            <MenuList className={classes.menuList} />
            <HorizontalLine />
            <PersonalAccount className={classes.personalAccount} />
          </motion.header>
        )}
      </AnimatePresence>
    </>
  );
};

Кст советую посмотреть про framer-motion, мощный инструмент для анимаций)

Как исправить ошибку nextjs Warning: Expected server HTML to contain a matching in?

szQocks, Смотри, я использую framer-motion, а есть вероятность, что проблема в нем?

Код SideBar.tsx

import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
import { MenuList } from "@features/sidebar";
import { MakeOrderButton, PersonalAccount } from "@entities/sidebar";
import { LogotypeIcon } from "@shared/images";
import { useScreenResolution } from "@shared/libs/global";
import { BurgerIcon, HorizontalLine } from "@shared/ui";
import classes from "./Sidebar.module.scss";

const initialSidebarAnimate = {
  x: -100,
  opacity: 0,
};

const animateSidebarAnimate = {
  x: 0,
  opacity: 1,
};

const exitSidebarAnimate = {
  x: -100,
  opacity: 0,
};

const transitionSidebarAnimate = {
  x: -100,
  opacity: 0,
};

export const Sidebar = () => {
  const [active, setActive] = useState<boolean>(false);
  const handlerBurgerMenu = () => setActive((state) => !state);
  const mobile = useScreenResolution();

  return (
    <>
      <BurgerIcon onClick={handlerBurgerMenu} active={active} />
      <AnimatePresence>
        {(!mobile || (mobile && active)) && (
          <motion.header
            transition={transitionSidebarAnimate}
            initial={initialSidebarAnimate}
            animate={animateSidebarAnimate}
            exit={exitSidebarAnimate}
            className={classes.headerSidebar}
          >
            <LogotypeIcon className={classes.logotypeSidebar} />
            <MakeOrderButton className={classes.orderButton} />
            <HorizontalLine />
            <MenuList className={classes.menuList} />
            <HorizontalLine />
            <PersonalAccount className={classes.personalAccount} />
          </motion.header>
        )}
      </AnimatePresence>
    </>
  );
};

Как исправить ошибку nextjs Warning: Expected server HTML to contain a matching in?

szQocks, Я использую его в pages/index.tsx

import { AxiosResponse } from "axios";
import { GetServerSideProps, GetServerSidePropsContext, NextPage } from "next";
import { TracksList } from "@widgets/clips";
import { Title } from "@widgets/clips";
import { Pagination } from "@widgets/custom-pagination";
import { SidebarContainer } from "@widgets/sidebar";
import type { IFilterProps } from "@features/filter";
import { LIMIT } from "@/shared/libs/global";
import { AxiosInstance } from "@shared/api";
import { IResponseTracks } from "@shared/types";

interface IStaticProps extends IFilterProps {
  tracks: IResponseTracks[];
  totalTracks: number;
}

const Main: NextPage<IStaticProps> = ({
  tracks,
  totalTracks,
  filter_type,
  filter_category,
}) => (
  <SidebarContainer>
    <Title filter_category={filter_category} filter_type={filter_type} />
    <TracksList tracks={tracks} />
    <Pagination total={totalTracks} />
  </SidebarContainer>
);

export default Main;

export const getServerSideProps: GetServerSideProps<IStaticProps> = async ({
  query,
}: GetServerSidePropsContext) => {
  try {
    const { page, category, type } = query;

    const type_filter = typeof type === "string" && `&type.name=${type}`;
    const category_filter = typeof category === "string" && `&q=${category}`;

    const response: AxiosResponse<IResponseTracks[]> = await AxiosInstance.get(
      `tracks?_page=${page || 1}&_limit=${
        LIMIT + (type_filter || "" + (category_filter || ""))
      }`,
    );

    const totalTracks: number = parseInt(response.headers["x-total-count"]);

    return {
      props: {
        tracks: response.data,
        ...(typeof type === "string" ? { filter_type: type } : {}),
        ...(typeof category === "string" ? { filter_category: category } : {}),
        totalTracks,
      },
    };
  } catch (e) {
    return {
      notFound: true,
    };
  }
};

Фишка в том, что ошибка есть на мобилке, а на ПК нет

Как исправить ошибку nextjs Warning: Expected server HTML to contain a matching in?

szQocks, Нет, это просто обертка, SidebarContainer, куда передается children. Я использую FSD и вот он хранится в widgets

Как исправить ошибку при работе с кастомным select и библеотекой react-hook-form?

szQocks, я к тому, что бы я ответ мог выбрать правильный. Я уже написал, все работает

Как исправить ошибку при работе с кастомным select и библеотекой react-hook-form?

напишите ответ пожалуйста, сделаю его правильным

Как исправить ошибку при работе с кастомным select и библеотекой react-hook-form?

WbICHA, Сработало, спасибо большое!