eslint 、 husky 、lint-stage

徐小丢~

已于 2022-02-24 18:52:15 修改

阅读量1.2k

点赞数 1

文章标签： react.js vue.js javascript

于 2022-02-18 14:37:36 首次发布

本文链接：https://blog.youkuaiyun.com/diudiudiu_/article/details/123003062

版权

vscode配置

需要安装:
Prettier - Code formatter
EditorConfig

npm包

npm install -D 引入如下安装包
1、eslint（eslint检查包）
2、@babel/eslint-parser、@babel/eslint-plugin、 @ecomfe/eslint-config（百度@ecomfe规则集合包）
3、eslint-plugin-vue（eslint针对vue的检查插件）
4、husky（git precommit钩子调用）
5、lint-staged（检查staged区域的文件）
6、如果遇到babel-core版本问题，可以选择性 babel-upgrade 升级一下
7、prettier

配置文件

1、.eslintrc.js

module.exports = {
	extends: [
		// 百度规范集合
		'@ecomfe/eslint-config',
		'@ecomfe/eslint-config/vue',
	],
	rules: {
		// 自定义规则
		// 要求或禁止使用拖尾逗号
		"comma-dangle": ["error", "never"],
		// 标签闭合
		"vue/html-self-closing": 0,
		// 强制return语句出现在computed属性中
		"vue/return-in-computed-property": 0,
		// 不允许在< template >中出现解析错误
		"vue/no-parsing-error": [0, { "x-invalid-end-tag": false }],
		// 强制执行最大行长度
		"max-len": [0, 120, 4, { ignoreUrls: true }],
		"vue/max-len": [0, 120, 4, { ignoreUrls: true }],
		// ===
		"eqeqeq": 0,
		"vue/eqeqeq": 0,
		// 禁止未声明的变量
		'no-undef': 0,
		// 禁止已声明未使用过的变量
		"no-unused-vars": "off",
		"vue/no-unused-vars": "off",
		// 禁止已声明未使用过的子组件
		"vue/no-unused-components": [0, { "ignoreWhenBindingPresent": true }],
		// 不允许在组件定义中使用保留名称
		"vue/no-reserved-component-names": [0, {
		"disallowVueBuiltInComponents": false,
		"disallowVue3BuiltInComponents": false
		}],
		// 不允许重复属性
		"vue/no-duplicate-attributes": [0, {
		"allowCoexistClass": true,
		"allowCoexistStyle": true
		}],
		// 禁止使用无法访问的代码 return后面有东西
		"no-unreachable": 0,
		// 要求必须有基数 parseInt
		"radix": 0,
		// 需要在props中定义类型
		"vue/require-prop-types": "off",
		// 禁止使用 空格 和 tab 混合缩进
		'no-mixed-spaces-and-tabs': 0
	}
};

2、.editorconfig

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
//该文件配合vscode的EditorConfig for VS Code插件，可以自动修复一些常见问题，推荐安装

3、 .prettierrc.js

module.exports = {
tabWidth: 4,
semi: true,
singleQuote: true,
bracketSpacing: false,
arrowParens: 'avoid',
trailingComma: 'none',
printWidth: 120,
// 不缩进Vue文件的script、style tag
vueIndentScriptAndStyle: false
}

// prettier插件的配置文件，eslint可以动态调用prettier插件来格式化代码（eslint本身不具备格式化代码的能力）

4、.babelrc

{
	"presets": [
		"@babel/preset-env"
	],
	"plugins": [
		[
			"@babel/plugin-transform-runtime",
			{
			"corejs": 2
			}
		],
		"transform-vue-jsx"
	],
	"comments": false,
	"env": {
		"development": {
			"plugins": [
				"dynamic-import-node"
			]
		},
		"test": {
			"plugins": [
				"istanbul"
			]
		}
	}
}

5、 staged lint配置

1、husky配置

"husky": {
	"hooks": {
		"pre-commit": "lint-staged"
	}
},

2、lint-staged配置

"lint-staged": {
	"src/**/*.{js,json,vue,less}": [
		"npm run format",
		"npm run lint",
		"git add"
	]
}

执行指令：

"script": {
	"precommit": "lint-staged",
	"lint": "./node_modules/.bin/eslint --ext .js,.vue 文件路径 --fix",
	"format": "prettier --write 文件路径"
}

说明：

lint 校验规范

format 自动格式化规范

要处理某个文件夹下或者某个文件，在文件路径处写上path，没有就不写

配合lint-staged使用时，不加路径，lint-staged本身就是更新文件的作用域

项目配置eslint

git地址：https://github.com/ecomfe/eslint-config
@ecomfe/eslint-config

安装

npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config

使用
在 .eslintrc.js 中使用：

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
    ],
};

也可开启严格模式：

module.exports = {
    extends: [
        '@ecomfe/eslint-config/strict',
    ],
};

扩展
import
如果需要检测与 import 相关的规则，需要安装这个插件：

npm i -D eslint-plugin-import

并在 .eslintrc.js 中引用：

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/import',
        // 或者选择严格模式
        // '@ecomfe/eslint-config/import/strict',
    ],
};

注意这些规则会要求使用 ES6 的 import 来引入依赖，如果使用的是 require 则会出现检查错误，可禁用 import/no-commonjs 和 import/unambiguous 来解决。

React

如果需要检测 React 相关的代码，需要安装相关插件：

npm i -D eslint-plugin-react eslint-plugin-react-hooks

并在 .eslintrc.js 中引用

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/react',
        // 或者选择严格模式
        // '@ecomfe/eslint-config/react/strict',
    ],
};

会自动检测本地 React 的版本，默认情况下无需其它配置。

Vue

如果需要检测 Vue 相关的代码，需要安装相关插件：
注意安装版本@^5.2.3，最新版本会报错！！！

npm i -D eslint-plugin-vue@^5.2.3

并在 .eslintrc.js 中引用：

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/vue', // 注意顺序
        // 或者选择严格模式
        // '@ecomfe/eslint-config/vue/strict',
    ],
};

TypeScript

如果需要检测 TypeScript 代码，需要安装相关插件：

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

除此之外，需要先安装typescript包，并在项目根目录有tsconfig.json文件。

并在.eslintrc.js中引用：

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/typescript',
        // 或者选择严格模式
        // '@ecomfe/eslint-config/typescript/strict',
    ],
};

代码
package.json

  ...
{
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.0",
    "@babel/eslint-plugin": "^7.14.5",
    "@ecomfe/eslint-config": "^7.3.0",
    "eslint": "^8.2.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-vue": "^5.2.3",
    ...
  }
}

.eslintrc.js

/**
 * @file .eslintrc.js
 * @description eslint 规则
 */
module.exports = {
    extends: [
        '@ecomfe/eslint-config/baidu/default.js',
        '@ecomfe/eslint-config/vue'
    ]
};

使用命令自动修复
eslint --fix --ext .js --ext .jsx --ext .vue 代码路径

细节
默认配置 @ecomfe/eslint-config 与 FECS 相同，但临时移除了 fecs-* 的规则。
严格版配置 */strict 开启了更严格的规则。

Commitizen

Commitizen 是一个撰写符合上面 Commit Message 标准的一款工具。

安装

npm install commitizen cz-conventional-changelog -D

配置

"defaultScope": "AIPark-2349",为提交id
{
  ...
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog",
      "maxHeaderWidth": 200,
      "maxLineWidth": 100,
      "defaultType": "",
      "defaultScope": "AIPark-2349",
      "defaultSubject": "",
      "defaultBody": "",
      "defaultIssues": ""
    }
  },
  ...
  "devDependencies": {
    "commitizen": "^4.2.4",
    "conventional-changelog": "^3.1.24",
    "cz-conventional-changelog": "^3.3.0",
  }
}

husky

在做前端工程化时husky可以说是一个必不可少的工具。husky可以让我们向项目中方便添加git hooks。通常情况下我只需要如下两步就可在项目中引入并设置好husky：

安装

npm install -D husky@^4.3.8

配置

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "node scripts/lint-staged.js",
      "post-commit": "node scripts/verify-commit-msg.js && node scripts/icoding.js"
    }
  },
  "devDependencies": {
     
    "husky": "^4.3.8",
     
  }
}

安装：同时配置lint-staged和stylelint

npm install -D lint-staged stylelint command-exists

package.json

{
  ...
  "scripts": {
    ...
    "release:note": "node scripts/gen-release-note.js",
    "commit": "git-cz"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint",
    "*.{css,less,scss,styl}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "node scripts/lint-staged.js",
      "post-commit": "node scripts/verify-commit-msg.js && node scripts/icoding.js"
    }
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog",
      "maxHeaderWidth": 200,
      "maxLineWidth": 100,
      "defaultType": "",
      "defaultScope": "AIPark-2349",
      "defaultSubject": "",
      "defaultBody": "",
      "defaultIssues": ""
    }
  },
  ...
  "devDependencies": {
    ...
    "command-exists": "^1.2.9",
    "commitizen": "^4.2.4",
    "conventional-changelog": "^3.1.24",
    "cz-conventional-changelog": "^3.3.0",
    ...
    "husky": "^4.3.8",
    "lint-staged": "^11.2.6",
    "stylelint": "^14.0.1",
  }
}