css

• center using grid

.parent--wrapper {
  display: grid;
  place-items: center;
}

• float inside grid

float: right === justify-self: end;
float: left === justify-self: start;

• generate css 7-1 pattern

mkdir abstract pages layout base components 
cd abstract
touch _function.less _mixins.less _variables.less
cd .. 
cd base 
touch _animations.less _typography.less _utilities.less _base.less

# CSS 7 - 1 pattern
# Use below imports in your main index.less file
# @import "./abstract/variables";
# @import "./layout/header";
# @import "./base/animations";
# @import "./base/typography";
# @import "./components/button";


# Please ensure your css naming follow BEM methodology.
# BEM 使用分隔符将类名区隔成三个部分：
# [block]__[element]--[modifier]

# Block(块) ：组件的最外层父元素，这个类包含最通用和可重用的功能。
# Element(元素) ：组件内可包含一个或多个元素，元素为块添加了新功能。无需重置任何属性。
# Modifier(修饰类) ：块或元素都可以通过修饰词来表示为变体。

# Example
# .notification {
# }
# .notification__btn {
# }
# .notification__btn--round {
# }
# .notification__btn--square {
# }

axios tips

// sending api checking
{
        test_id: 1
        ...(queryValue?.test=== 'no' && {
          area: queryValue?.test.replaceAll(' ', '').split(','),
        }),
      },

const updateValue = (i, c) => {
    // setValueText(c);
    list.map((item, index) => {
      if (index === i) {
        item.fieldValue = c;
      }
    });
    setList(list);
  };

  const addListItem = () => {
    // setNameText('');
    // setValueText('');
    setList([...list, { fieldName: '', fieldValue: '' }]);
    // setEmptyError(false);
  };

Commitlint setup

Install commitlint cli and conventional config

npm install --save-dev @commitlint/config-conventional @commitlint/cli

Configure commitlint to use conventional config

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

Install Husky v6

npm install husky --save-dev

Activate hooks

npx husky install

Add hook for lint-staged and commitlint

npx husky add .husky/commit-msg 'npx lint-staged && npx --no -- commitlint --edit ${1}'

How to reset

Project directory check hooksPath
cat .git/config
Reset the hooksPath every file inside ".git/hooks/" is either a git-hook or ignored by git. By removing everything inside, you'll get rid of all hooks, and restore the default behavior.
npm uninstall husky && git config --unset core.hooksPath

Interval

  useEffect(() => {
    const interval = setInterval(() => {
      getList(
        {
          limit: pageState?.pageSize, // 分页获取数量
          page: pageState?.pageNum,
        },
      );
    }, 60000);

    return () => {
      clearInterval(interval);
    };
  }, [pageState]);