本篇是在写个人 react-native 项目中运用的，其他项目配置略有差异，酌情使用

perttier官方文档

https://www.prettier.cn/docs/install.html

步骤

安装 prettier 并check 项目代码

  1. # 安装依赖
  2. yarn add --dev --exact prettier
  4. # 添加prettier的配置文件
  5. echo module.exports = {}> prettier.config.js
  7. # 执行检查
  8. npx prettier --check .

配合使用 Git hooks （husky）

husky: https://www.npmjs.com/package/husky

说明：

下图中的 以 .sample 结尾的钩子文件并不会在进行git操作的时候触发，只有这样的文件【pre-commit】的文件才会执行。如果只是单纯的手动修改文件名，确实可以在自己本地运行，但是，并不能同步到远程代码仓库，所以在协同开发下手动修改文件名还是会引发一些别的问题。然后 husky 就是用来解决这个问题的插件。

  • 老版本的husky（之前用过4.2.5版本）是通过修改 .git/hooks 里面的钩子函数文件（去掉 .sample 扩展名），来达到拦截处理功能的
  • 新版本的husky（我用的最新的 8.0.1）支持在项目根目录下创建 .husky 目录，在里面编写需要用到的git hooks（如下图）。通过在 npm scripts 中增加脚本命令 “prepare”:”husky install”的方式，来使得协同开发人员拉取仓库代码并安装node_modules的时候，执行 husky install 命令【npm原理】 ，开启husky。

image.pngimage.pngimage.png

  1. # 安装依赖
  2. yarn add --dev husky lint-staged
  4. # 启用 husky, 执行命令后可在项目目录查看效果 .git/config [core] hooksPath = .husky
  5. # 混入 项目根目录下的 .husky 文件夹，以达到使用 git hooks 的目的
  6. npx husky install
  8. # 在package.json 中写入 脚本
  9. # 如果执行失败或者没有成功写入脚本，可选择升级npm版本的方式处理 npm install -g npm 继续执行命令
  10. # 或者使用 该命令： npm pkg set scripts.prepare "husky install"
  11. npm set-script prepare "husky install"
  13. # 创建 hook, 在根目录生成 .husky/pre-commit 文件
  14. npx husky add .husky/pre-commit "npx lint-staged"

image.png
image.png
image.png

  1. "prettier": "2.7.0",
  2. "husky": "^8.0.1",
  3. "lint-staged": "^13.0.1",

配置 prettier.config.js

https://blog.csdn.net/qq_38734862/article/details/106769973

  1. module.exports = {
  2.   "arrowParens": "always",
  3.   "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  4.   "endOfLine": "auto", // 结尾是 \n \r \n\r auto
  5.   "htmlWhitespaceSensitivity": "css",
  6.   "insertPragma": false,
  7.   "requirePragma": false,
  8.   "bracketSameLine": false,
  9.   "printWidth": 120, // 超过最大值换行
  10.   "singleQuote": true, // 使用单引号代替双引号
  11.   "useTabs": false, // 缩进不使用tab，使用空格
  12.   "semi": true, // 句尾添加分号
  13.   "tabWidth": 2, // 缩进字节数
  14.   "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  15.   "jsxSingleQuote": false,
  16.   "quoteProps": "as-needed",
  17.   "proseWrap": "preserve" // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  18. }

配合使用ESLint

步骤

官网文档： http://eslint.cn/docs/user-guide/configuring

  1. 项目中安装包
  2. yarn add eslint
  4. 配置 ESlint
  5. npx eslint --init

image.png

配置 .eslintrc.js

  • “off” or 0 - 关闭规则
  • “warn” or 1 - 将规则视为一个警告（不会影响退出码）
  • “error” or 2 - 将规则视为一个错误 (退出码为1) ```javascript module.exports = { // 解析器 “parser”: ‘babel-eslint’, “env”: { “browser”: true, “es6”: true, “node”: true }, “extends”: [ “eslint:recommended”, “plugin:react/recommended” ], “settings”: { “react”: {
    1. // Warning: React version not specified in eslint-plugin-react settings.
    2. "version": 'detect'
    } }, “parserOptions”: { “ecmaFeatures”: {
    1. "jsx": true,
    2. // 支持装饰器 否则报 '@' 错误
    3. "legacyDecorators": true,
    }, “ecmaVersion”: 12, “sourceType”: “module” }, “plugins”: [ “react”, “react-native” ], “rules”: { “eqeqeq”: 2, // 必须使用 === 和 !== “no-empty-function”: 2, // 禁止空函数 “no-multi-spaces”: 2, // 禁止使用多个空格 “no-trailing-spaces”: 2, // 禁止禁用行尾空格 “space-infix-ops”: 2, // 要求操作符周围有空格 “space-in-parens”: 2, // 强制在圆括号内使用一致的空格 “no-var”: 2, // 要求使用 let 或 const 而不是 var, “no-unused-vars”: 2, // 禁止出现未使用过的变量 “react/prop-types”: 0 // 防止在react组件定义中缺少props验证 } };
  1. <a name="Vzywj"></a>
  2. ## husk 使用
  3. 文档：[https://typicode.github.io/husky/#/?id=install](https://typicode.github.io/husky/#/?id=install)
  4. <a name="pxaNG"></a>
  5. ### package.json中添加配置
  6. ```json
  7. "husky": {
  8.     "hooks": {
  9.       "pre-commit": "npm run format && npm run lint:fix",
  10.       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  11.     }
  12.   },

完整的package.json

  1. {
  2.   "name": "myrnapp",
  3.   "version": "0.0.1",
  4.   "private": true,
  5.   "scripts": {
  6.     "android": "react-native run-android",
  7.     "ios": "react-native run-ios",
  8.     "start": "react-native start",
  9.     "test": "jest",
  10.     "lint": "npx eslint --ext .js,.jsx,.ts,.tsx ./src",
  11.     "lint:fix": "npx eslint --fix .",
  12.     "lint-staged": "lint-staged",
  13.     "format": "prettier --write 'src/**/*.js'",
  14.     "prettier": "npx prettier --write .",
  15.     "prepare": "husky install"
  16.   },
  17.   "dependencies": {
  18.     "@react-navigation/native": "^6.0.10",
  19.     "@react-navigation/native-stack": "^6.6.2",
  20.     "axios": "^0.27.2",
  21.     "mobx": "^6.6.0",
  22.     "mobx-react": "^7.5.0",
  23.     "prop-types": "^15.8.1",
  24.     "react": "17.0.2",
  25.     "react-native": "0.68.2",
  26.     "react-native-safe-area-context": "^4.3.1",
  27.     "react-native-screens": "^3.13.1",
  28.     "react-native-svg": "^12.3.0",
  29.     "react-navigation": "^4.4.4"
  30.   },
  31.   "devDependencies": {
  32.     "@babel/core": "^7.12.9",
  33.     "@babel/plugin-proposal-decorators": "^7.18.2",
  34.     "@babel/runtime": "^7.12.5",
  35.     "@commitlint/cli": "^17.0.2",
  36.     "@commitlint/config-conventional": "^17.0.2",
  37.     "@react-native-community/eslint-config": "^2.0.0",
  38.     "babel-eslint": "^10.1.0",
  39.     "babel-jest": "^26.6.3",
  40.     "eslint": "^7.32.0",
  41.     "husky": "^8.0.1",
  42.     "jest": "^26.6.3",
  43.     "lint-staged": "^13.0.1",
  44.     "metro-react-native-babel-preset": "^0.67.0",
  45.     "prettier": "2.7.0",
  46.     "react-native-svg-transformer": "^1.0.0",
  47.     "react-test-renderer": "17.0.2"
  48.   },
  49.   "lint-staged": {
  50.     "*.{js,jsx,ts,tsx}": [
  51.       "npx prettier --write",
  52.       "npx eslint --fix"
  53.     ]
  54.   },
  55.   "husky": {
  56.     "hooks": {
  57.       "pre-commit": "npm run format && npm run lint:fix",
  58.       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  59.     }
  60.   },
  61.   "jest": {
  62.     "preset": "react-native"
  63.   }
  64. }

卸载

  1. npm uninstall husky && git config --unset core.hooksPath

整体效果

  1. git add .
  2. git commit -m 'feat: 增加 prettier, eslint 配置'

image.png
image.png