0.1.2 • Published 2 years ago
@ranwawa/eslint-plugin v0.1.2
@ranwawa/eslint-config-react
前言
使用 eslint 的好处:
- 避免出现低级语法错误,保证代码质量
- 潜移默化改善编码习惯,提升专业技能
1. 项目配置
1.1 安装依赖
会自动安装相关依赖
eslint
- 格式化工具
eslint-config-airbnb
- airbnb 公司维护的 js 规则
eslint-config-airbnb-typescript
- airbnb 公司维护的 ts 规则
eslint-config-prettier
- prettier 维护的格式化规则
eslint-plugin-prettier
- prettier 维护的自动修复插件
husky
- git 钩子工具
lint-staged
- 针对未提交文件的 git 钩子工具
1.1.1 安装 eslint 配置文件
npm install --save-dev @ranwawa/eslint-config-react
1.1.2 初始化 eslint 配置文件
echo "const config=require('@ranwawa/eslint-config-react');module.exports = {...config};" > .eslintrc.js
1.1.3 初始化 typescript 配置文件
echo "{\"include\":[\".eslintrc.js\"]}" > tsconfig.json
1.1.4 验证 eslint 配置是否生效
npx eslint .eslintrc.js
# 输出以下信息,表示配置生效
1:1 error Expected 1 empty line after require statement not followed by another require import/newline-after-import
1:13 error Replace `=require('@ranwawa/eslint-config-react');module.exports·=·{...config` with `·=·require("@ranwawa/eslint-config-react");⏎module.exports·=·{·...config·` prettier/prettier
1.2 自动检测代码
像上面这样手动检测代码,非常麻烦
通过 husky 在每次提交之前,可以自动检测,减少重复的人工操作
1.2.1 在 npm 生命周期中自动激活 husky
npm set-script prepare "husky install"
1.2.2 手动激活 husky
npm run prepare
1.2.3 初始化 lint-staged 配置文件
echo '{"*.{js,jsx,ts,tsx}": "eslint --fix"}' > .lintstagedrc.json
1.2.4 在 husky 生命周期中自动执行 eslint
npx husky add .husky/pre-commit "npx lint-staged --allow-empty"
1.2.5 验证 husky 配置是否生效
git add .eslintrc.js
git commit -m "build: 初始化eslint配置文件"
# 输出以下信息,表示配置生效
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[master dfcfb69] build: 初始化eslint配置文件
1.3 配合编辑器格式化代码
1.3.1 配合 vscode 使用
1.4 在服务端自动验证代码格式
上面的检验只能在客户端完成,可能会因为各种原因失效
所以把检验工作放在服务端的 git 仓库中自动完成,更加可靠
1.4.1 配合 gitlab-ci 使用
验证 master 分支最近一次提交之后的所有变更的文件
stages:
- lint
variables:
MASTER_LATEST_COMMIT_ID: ''
before_script:
- MASTER_LATEST_COMMIT_ID=$(git rev-parse origin/master)
lint-script:
stage: lint
script:
- npx eslint $(git diff --name-only $MASTER_LATEST_COMMIT_ID "*.js" "*.ts" "*.jsx" "*.tsx")