阅读前可以先学习eslint命令：ESLint 命令行使用
一、eslint配置（旧版-要指定版本，否则异常）
1、package.json配置eslint 然后npm i进行安装
eslint使用项目内安装，不要用全局安装
"devDependencies": {
"babel-eslint": "^8.2.6",
"eslint": "^4.19.1",
"eslint-config-alloy": "^1.4.2"
}
2、配置lint命令，使用npm run lint检测代码
安装后node_modules会引入eslint包 设置对应路径
"scripts": {
"lint": "./node_modules/.bin/eslint --fix pages"
},
image.png
3、新建.eslintrc文件 并配置
{
"extends": "eslint-config-alloy",
"globals": {
"wx": true,
"App": true,
"getApp": true,
"Page": true,
"Component": true,
"getCurrentPages": true,
"Behavior": true
},
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"modules": true,
"spread": true,
"restParams": true
}
},
"rules": {
"new-cap": [
2,
{
"capIsNewExceptions": [
"Page",
"App",
"Component",
"Behavior",
"VApp",
"VPage",
"VComponent",
"VBehavior"
]
}
],
"max-len": "off",
"guard-for-in": "off",
"comma-dangle": "off",
"valid-jsdoc": "warn",
"spaced-comment": "warn",
"eqeqeq": "warn",
"camelcase": "warn",
"no-invalid-this": "warn",
"no-undefined": "warn",
"no-fallthrough": "warn",
"no-new": "off",
"no-cond-assign": "off",
"complexity": "warn",
"max-depth": "warn",
"no-case-declarations": "warn",
"no-param-reassign": "warn",
"prefer-promise-reject-errors": "warn",
"max-nested-callbacks": [
"error",
4
]
}
}
4、新建.eslintignore文件 - 过滤不需要eslint检查的路径
image.png
5、webStorm配置eslint提示
image.png
6、设置完成后，遇到错误就会有提示
image.png
7、运行npm run lint 或者js页面鼠标右键选择【Fix Eslint Problems】
image.png
运行结果：会提示错误信息，并自动修复部分错误信息
参考
1、Eslint 超简单入门教程
2、ESLint配置（一）：eslint默认及自定义规则介绍
3、eslint-config-alloy是腾讯 AlloyTeam 创立的一套 ESLint 规则
4、ESLint 命令行使用
二、提交代码进行【eslint检查】和【提交规范】
1、安装ghooks和 validate-commit-msg
ghooks：为nodejs打造实现本地的git hooks，配置简单，只需在package.json简单配置，npm有的命令都可以使用
validate-commit-msg是针对Angular代码提交的规范做的一款检查插件
执行命令
npm install --save-dev ghooks
npm install --save-dev validate-commit-msg
或者添加配置后npm i
"devDependencies": {
"ghooks": "^2.0.4",
"validate-commit-msg": "^2.14.0"
},
2、package.json添加ghooks配置和eslint的配置
"scripts": {
"lint": "./node_modules/.bin/eslint --fix pages",
"lint:change": "bash ./scripts/eslintChange",
"lint:core": "./node_modules/.bin/eslint --ext js"
},
"config": {
"ghooks": {
"commit-msg": "validate-commit-msg",
"pre-commit": "npm run lint:change"
}
}
package.json完整配置:
{
"name": "minTest",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"lint": "./node_modules/.bin/eslint --fix pages",
"lint:change": "bash ./scripts/eslintChange",
"lint:core": "./node_modules/.bin/eslint --ext js"
},
"repository": {
"type": "git",
"url": "https://gitee.com/little_zhu/minTest.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vant-weapp": "^0.5.29"
},
"devDependencies": {
"babel-eslint": "^8.2.6",
"eslint": "^4.19.1",
"eslint-config-alloy": "^1.4.2",
"ghooks": "^2.0.4",
"validate-commit-msg": "^2.14.0"
},
"config": {
"ghooks": {
"commit-msg": "validate-commit-msg",
"pre-commit": "npm run lint:change"
}
}
}
3、新建scripts/eslintChange文件-遍历文件做提示
其中的调用了 npm run lint:core -- ${result[@]} 进行路径过滤，所以package.json的scripts需要配置npm run lint:core
#!/bin/bash
# commit修改过得文件
changeListStr=$(git status -s | awk '{printf "%s ", $2}')
# echo ${changeListStr}
# eslint的 ext参数 对指定文件没有作用，需要自己过滤掉非js的文件
changeList=(${changeListStr})
result=()
for filePath in "${changeList[@]}";
do
file=$(basename ${filePath})
suffix=${file##*.}
if [ "${suffix}" == "js" ];then
# 是相关的js文件，加入队列
result=("${result[@]}" "$filePath")
fi
done
# echo ${result[@]}
# 对修改过js文件进行eslint检测
if [ ${#result[@]} -gt 0 ];then
echo ${result[@]}
# 有符合要求的文件，进行eslint检测
npm run lint:core -- ${result[@]}
# 返回eslint的结果
exit $?
fi
# 没有修改javascript文件,正常退出
exit 0
lint: 系统自带修复功能-pages 指定修复文件路径
lint:change：调用eslintChange文件自定义方法做过滤提示，不做修复
lint:core：给eslintChange里面方法调用，过滤js文件路径用的
"pre-commit": "npm run lint:change" 提交代码就会调用lint:change检查eslint规范，异常会提示
image.png
"commit-msg": "validate-commit-msg" 控件commit 规范检测，例如(feat: xxxx fix: xxxx 等格式)
image.png
提交格式规范参考：如何规范git commit提交
网友评论