從零到一建立前端規(guī)范

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  }

npm install eslint --save-dev
// or
yarn add eslint --de

npm init @eslint/config
// or
yarn create @eslint/confi

  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown", //格式化
    "src/*": "eslint --ext .js,.ts,.tsx"  //進行eslint校驗
  }

npm install --save-dev stylelint stylelint-config-standar

{
  "extends": "stylelint-config-standard"

npm install --save-dev stylelint-config-prettier

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

 "lint-staged": {
    "**/*": "prettier --write --ignore-unknown", //格式化
    "src/**.{js,jsx,ts,tsx}": "eslint --ext .js,.jsx,.ts,.tsx", //對js文件檢測
    "**/*.{less,css}": "stylelint --fix" //對css文件進行檢測
  },

// ?? 自我感覺良好的縮寫:
let rContent = 'willen'; 

// ?? 無需對每個變量都寫注釋，從名字上就看懂
let firstName = 'jackie'; 

// ?? 從命名無法知道返回值類型
function showFriendsList() {....} // // 無法辨別函數意圖,返回的是一個數組，還是一個對象，還是true or false?

// ?? 明確函數意圖，對于返回true or false的函數，最好以should/is/can/has開頭
function shouldShowFriendsList() {...}
function isEmpty() {...}
function canCreateDocuments() {...}
function hasLicense() {...}
function sendEmailToUser(user) {.... } //動詞開頭，函數意圖就很明

/**
 * 導航頁面-右邊區(qū)域
 */
 
const Content=>()=>xxx
 
const MAX_INPUT_LENGTH = 8; //用于限制密碼輸入框

function Component(props) {
  return (
    <>
      {/* 如果用戶沒有訂閱則不展示廣告 */}
      {user.subscribed ? null : <SubscriptionPlans />}
    </>
  )
}

// ?? 對于求值獲取的變量，沒有兜底
const { data } = getApiRequest();
data.map((s) => s.id); //沒有考慮data異常的情況，代碼一跑就爆炸

// ?? 對于求值變量，做好兜底
const { data = [] } = getApiRequest();
data.map((s) => s?.id); //沒有考慮data異常的情況，代碼一跑就爆炸

// ?? 不要讓功能函數的輸出變化無常
function plusAbc(a, b, c) {  // 這個函數的輸出將變化無常，因為api返回的值一旦改變，同樣輸入函數的a，b,c的值，但函數返回的結果卻不一定相同。
  var c = fetch('../api');
  return a+b+c;
}

// ?? 功能函數使用純函數，輸入一致，輸出結果永遠唯一
function plusAbc(a, b, c) {  // 同樣輸入函數的a，b,c的值，但函數返回的結果永遠相同。
  return a+b+c;

// ?? 使用for循環(huán)編程
for(i = 1; i <= 10; i++) {
   a[i] = a[i] +1;
}

// ?? 使用函數式編程
let b = a.map(item => ++item

function Component() {
  return (
    <Layout>
      <ErrorBoundary>
        <CardWidget />
      </ErrorBoundary>

      <ErrorBoundary>
        <FiltersWidget />
      </ErrorBoundary>

      <div>
        <ErrorBoundary>
          <ProductList />
        </ErrorBoundary>
      </div>
    </Layout>
  )

// A.tsx
interface AProps {
  param: string;
}
const A = ({ param }: AProps) => {
  return <B param = {param} />;
};

// ?? 上下文清晰
// B.tsx
const B = ({ param }: { param: AProps['param'] }) => {
  return <div>hello world</div>;
};

// ?? 不夠清晰，要是再嵌套一層兩層呢
isSubscribed ? (
  <ArticleRecommendations />
) : isRegistered ? (
  <SubscribeCallToAction />
) : (
  <RegisterCallToAction />
)

// ?? 將判斷邏輯進行拆分
function CallToActionWidget({ subscribed, registered }) {
  if (subscribed) {
    return <ArticleRecommendations />
  }

  if (registered) {
    return <SubscribeCallToAction />
  }

  return <RegisterCallToAction />
}

function Component() {
  return (
    <CallToActionWidget
      subscribed={subscribed}
      registered={registered}
    />
  )

// ?? 列表渲染和其他邏輯雜糅在一起
function Component({ topic, page, articles, onNextPage }) {
  return (
    <div>
      <h1>{topic}</h1>
      {articles.map(article => (
        <div>
          <h3>{article.title}</h3>
          <p>{article.teaser}</p>
          <img src={article.image} />
        </div>
      ))}
      <div>You are on page {page}</div>
      <button onClick={onNextPage}>Next</button>
    </div>
  )
}

// ?? 將列表組件提取出來，一目了然
function Component({ topic, page, articles, onNextPage }) {
  return (
    <div>
      <h1>{topic}</h1>
      <ArticlesList articles={articles} />
      <div>You are on page {page}</div>
      <button onClick={onNextPage}>Next</button>
    </div>
  )
}

// ?? 不要將其定義在渲染函數組件中
function Component() {
  function renderHeader() {
    return <header>...</header>
  }
  return <div>{renderHeader()}</div>
}

// ?? 將其抽離到獨立的組件中去
import Header from '@modules/common/components/Header'

function Component() {
  return (
    <div>
      <Header />
    </div>
  )
}

// ?? 在文件頭部導入，順序依次為: 第三方庫 > 公共組件/方法 > 非公共部分組件/方法
import React from 'react'
import _ from 'loadsh'
import Header from '@components/header'
import Content from './Content'

// ?? 在底部導出
export { Content, Header }
export default Componen

   - src 開發(fā)目錄
      - pages 視圖
          - module-a 模塊A
            - components 私有組件
              - ComA.tsx
              - ComB.tsx
            - index.module.less
            - index.tsx
            - Content.tsx
          - module-b 模塊B
      - components 公共組件
        - index.ts 導出所有組件
        - header
          - index.tsx
          - index.module.less
          - User.tsx
          - useGetBaseInfo.hooks.ts
      - routers 路由文件
      - store redux中的數據
      - utils 這里是以utils為后綴
        - index.ts
        - a.utils.ts
        - b.utils.ts
      - hooks 這里是以hooks為后綴
        - index.ts
        - a.hooks.ts
        - b.hooks.ts
      - styles 靜態(tài)資源文件
      - service api請求,這里是以api為后綴
        - a.api.ts 按照后端微服務進行劃分
        - b.api.ts
      - constans 常量

  <type>(<scope>): <subject>
  <BLANK LINE>
  <body>
  <BLANK LINE>
  <footer

# 安裝 commitlint cli 和 conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

配置要使用的 commitlint 規(guī)則
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

加入到husky中：
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
or
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1