配置prettier

安装依赖

pnpm add -D prettier

新建.prettierrc.json

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": false,
  "trailingComma": "all",
  "printWidth": 100,
  "proseWrap": "never",
  "endOfLine": "lf"
}

新建.prettierignore

node_modules
build
dist
.vscode

配置eslint

安装依赖

pnpm add -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

新建.eslintrc.json

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/jsx-runtime",
    "plugin:import/typescript",
    "prettier"
  ],
  "plugins": ["react", "react-hooks", "@typescript-eslint", "import", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
    "no-console": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "prettier/prettier": ["error"],
    "semi": "off",
    "no-param-reassign": "off",
    "import/extensions": "off",
    "import/no-unresolved": "off",
    "import/no-extraneous-dependencies": "off",
    "import/prefer-default-export": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/consistent-type-imports": "error"
  }
}

新建.eslintignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
build
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

配置stylelint

安装依赖

pnpm add -D stylelint stylelint-config-prettier stylelint-config-standard stylelint-declaration-block-no-ignored-properties stylelint-order

新建.stylelintrc.json

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "plugins": [
    "stylelint-order",
    "stylelint-declaration-block-no-ignored-properties"
  ],
  "rules": {
    "plugin/declaration-block-no-ignored-properties": true,
    "order/order": ["custom-properties", "declarations"],
    "order/properties-order": [
      "overflow",
      "overflow-x",
      "overflow-y",
      "clip",
      "clear",
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "float",
      "width",
      "height",
      "max-width",
      "max-height",
      "min-width",
      "min-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "margin-collapse",
      "margin-top-collapse",
      "margin-right-collapse",
      "margin-bottom-collapse",
      "margin-left-collapse",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "background",
      "background-color",
      "border",
      "border-radius",
      "color",
      "font",
      "font-family",
      "font-size",
      "font-smoothing",
      "osx-font-smoothing",
      "font-style",
      "font-weight",
      "line-height",
      "letter-spacing",
      "word-spacing",
      "text-align",
      "text-decoration",
      "text-indent",
      "text-overflow",
      "text-rendering",
      "text-size-adjust",
      "text-shadow",
      "text-transform",
      "word-break",
      "word-wrap",
      "white-space",
      "vertical-align",
      "list-style",
      "list-style-type",
      "list-style-position",
      "list-style-image",
      "content",
      "outline",
      "outline-offset",
      "filter",
      "visibility",
      "size",
      "opacity",
      "transform",
      "cursor",
      "pointer-events"
    ],
    "at-rule-no-unknown": null,
  },
  "ignoreFiles": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.json"]
}

如需要支持sass

pnpm add -D sass stylelint-scss postcss-scss postcss

{
  "plugins": [
    "stylelint-scss",
    "stylelint-order",
    "stylelint-declaration-block-no-ignored-properties"
  ],
  "overrides": [
    {
      "files": ["*.scss", "**/*.scss"],
      "customSyntax": "postcss-scss"
    }
  ],
  "rules": {
    "scss/at-rule-no-unknown": null,
    "selector-class-pattern": null
  }
}

集成husky

yarn add husky lint-staged

激活hooks

npx husky install

在scripts中添加

"prepare": "husky install"

commitlint

yarn add @commitlint/cli @commitlint/config-conventional

新建commitlint.config.js

module.exports = {
  extends: ["@commitlint/config-conventional"],
};

命令式创建

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

注册Hooks

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'