[React Native] ESLint + Prettier + lint-staged + husky + commitlint

4 天前

內容目錄 隱藏

安裝以下版本的 ESLint + Prettier + lint-staged + husky + commitlint

"devDependencies": {
  // ...
  "@commitlint/cli": "^19.5.0",
  "@commitlint/config-conventional": "^19.5.0",
  "@typescript-eslint/parser": "^8.14.0",
  "eslint": "^8.57.0",
  "eslint-config-expo": "^7.1.2",
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-prettier": "^5.2.1",
  "husky": "^9.1.6",
  "lint-staged": "^15.2.10",
  "prettier": "^3.3.3",
},

ESLint

.eslintrc.cjs

// https://docs.expo.dev/guides/using-eslint/
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      parserOpts: {
        plugins: ['jsx'],
      },
    },
  },
  extends: ['expo', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
    'react/react-in-jsx-scope': 'off',
    'react-native/no-inline-styles': 'off',
  },
};

.eslintignore

node_modules/
/.expo
babel.config.js
.prettierrc.cjs
.eslintrc.cjs

Prettier

.prettierrc.cjs

// https://prettier.io/docs/en/index.html
// js=> cjs
/** @type {import("prettier").Options} */
const config = {
  printWidth: 80,

  tabWidth: 2,
  useTabs: false,

  singleQuote: true,
  quoteProps: 'consistent',

  semi: false,
  trailingComma: 'all',

  bracketSpacing: true,
  arrowParens: 'always',

  rangeStart: 0,
  rangeEnd: Number.POSITIVE_INFINITY,

  endOfLine: 'lf',
};

module.exports = config;

.prettierignore

node_modules/
.prettierrc.cjs
.eslintrc.cjs
expo-env.d.ts

husky

.husky/_ 裡只保留 husky.sh 和 .gitignore

yarn husky init

commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn commitlint --edit \$1

pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged

pre-push

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint
yarn test

lint-staged

package.json

"scripts": {
  "start": "expo start",
  "reset-project": "node ./scripts/reset-project.js",
  "android": "expo start --android",
  "ios": "expo start --ios",
  "web": "expo start --web",
  "test": "jest --watchAll",
  "lint": "eslint --ext .js,.ts,.tsx .",
  "format": "prettier --write \"**/*.{js,ts,tsx,json,md}\""
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
},

commitlint

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