webpack5之代码规范（eslint 、eslint + prettier、eslint + prettier + husky）

1：webpack5之代码规范 eslint

package.json

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.36.1",
    "@typescript-eslint/parser": "^5.36.1",
    "eslint": "^8.23.0",
    "eslint-plugin-vue": "^9.4.0",
    "eslint-webpack-plugin": "^3.2.0"
  },
  "dependencies": {
  },
1
2
3
4
5
6
7
8
9

npx eslint --init ( 初始化 eslint )

1：检查语法，并且会帮你找到对应的错误

2：支持esModules

3：框架

4：TS

5：代码运行在哪里 - 浏览器

6：生成的配置文件是什么格式的 - js

7：安依赖

.eslintrc.js 配置文件

module.exports = {
  'env': {
    'browser': true,
    'es2021': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'
  ],
  'overrides': [],
  // "parser": "@typescript-eslint/parser",
  // "parserOptions": {
  //     "ecmaVersion": "latest",
  //     "sourceType": "module"
  // },
  'parser': 'vue-eslint-parser',
  'parserOptions': {
    'parser': '@typescript-eslint/parser'
  },
  'plugins': [
    'vue',
    '@typescript-eslint'
  ],
  'rules': {
    /**
         * "off" 或 0 - 关闭规则
         * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
         * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
         */

    // 关闭对所有未定义变量的警告提示
    'no-undef': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 对于requires引入 关闭
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-explicit-any': ['off'],
    'no-console': 'off', // console.log()语法报错 关闭
    'indent': [2, 2], // 缩进2个空格
    'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI,即禁用行尾使用分号
    'quotes': [2, 'single'], // 使用单引号
    'no-mixed-spaces-and-tabs': [2], // 禁止空格和 tab 的混合缩进
    'no-extra-semi': [2], // 禁止不必要的分号
    'comma-dangle': [2, 'never'], // 禁止末尾逗号
    'no-dupe-args': 2, //方法的参数中不允许有重复值。
    'no-dupe-keys': 2, //定义对象时不允许有重复的键
    'no-duplicate-case': 2, //switch语句中不允许使用相同的case值
    'no-empty': 2, //不允许空的块语句
    'no-func-assign': 2 //不允许为一个函数赋值。
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

.eslintignore

public
node_modules
.history
.husky
dist
*.d.ts
1
2
3
4
5
6

webpack.dev.js

• ESLintPlugin 插件使用 （ 开发环境时候 使用 ）

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base')
const ESLintPlugin = require('eslint-webpack-plugin')
const devConfig = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map', //开发环境配置 定位错误根源
  plugins:[
    new ESLintPlugin({ extensions: ['js', 'ts', 'vue'] })
  ]
}
module.exports = merge(baseConfig, devConfig)
1
2
3
4
5
6
7
8
9
10
11

2：webpack5之代码规范 eslint + prettier

package.json

• 安装依赖 与 配置 eslint 自动修复
• 执行 npm run lint || npm run lint --fix 可自动修复eslint报错

  "scripts": {
    "lint": "eslint --fix --ext .js,.vue src",
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.7.1",
  }
1
2
3
4
5
6
7
8

.eslintrc.js

• 添加 prettier/prettier 等规则

module.exports = {
	'env': {
		'browser': true,
		'es2021': true
	},
	'extends': [
		'eslint:recommended',
		'plugin:vue/vue3-essential',
		'plugin:@typescript-eslint/recommended',
		"plugin:prettier/recommended"
	],
	'overrides': [],
	'parser': 'vue-eslint-parser',
	'parserOptions': {
		'parser': '@typescript-eslint/parser'
	},
	// 添加
	'plugins': [
		'vue',
		'@typescript-eslint',
		'prettier'
	],
	'rules': {
		/**
		 * "off" 或 0 - 关闭规则
		 * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
		 * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
		 */

		// 关闭对所有未定义变量的警告提示
		'no-undef': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
		// 对于requires引入 关闭
		'@typescript-eslint/no-var-requires': 'off',
		'@typescript-eslint/no-explicit-any': ['off'],
		'no-console': 'off', // console.log()语法报错 关闭
		"indent": 'off',
		'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI,即禁用行尾使用分号
		'quotes': [2, 'single'], // 使用单引号
		'no-mixed-spaces-and-tabs': [2], // 禁止空格和 tab 的混合缩进
		'no-extra-semi': [2], // 禁止不必要的分号
		'comma-dangle': [2, 'never'], // 禁止末尾逗号
		'no-dupe-args': 2, //方法的参数中不允许有重复值。
		'no-dupe-keys': 2, //定义对象时不允许有重复的键
		'no-duplicate-case': 2, //switch语句中不允许使用相同的case值
		'no-empty': 2, //不允许空的块语句
		'no-func-assign': 2, //不允许为一个函数赋值。
		"prettier/prettier": ["error", {
			"endOfLine": "auto" //不让prettier检测文件每行结束的格式
		}],
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

.prettierignore

dist/
node_modules
1
2

.prettierrc

{
	"printWidth": 120,
	"semi": false,
	"singleQuote": true,
	"trailingComma": "none",
	"useTabs": false
}
1
2
3
4
5
6
7

.editorconfig

• VScode编辑器的配置

# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true

# 匹配全部文件
[*]

# 设置字符集
charset = utf-8

# 缩进风格，可选"space"、"tab"
indent_style = tab

# 缩进的空格数
indent_size = 2

# 结尾换行符，可选"lf"、"cr"、"crlf"
end_of_line = lf

# 在文件结尾插入新行
insert_final_newline = true

# 删除一行中的前后空格
trim_trailing_whitespace = true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

若是报错 Replace ·· with ↹

可执行 npm run lint || npm run lint --fix 修复eslint错误

3：webpack5之代码规范 eslint + prettier + husky ( git 钩子校验 )

git init 初始化 git

.gitignore

node_modules
1

package.json

• 修改 eslint 脚本 + prepare脚本

{
  "name": "webpack-1",
  "version": "1.0.0",
  "description": "",
  "main": "mian.js",
  "scripts": {
	"lint": "eslint --ext .js,.jsx,.vue,.ts,.tsx src --fix",
	"prepare": "husky install"
  },
  "devDependencies": {
    "husky": "^8.0.1"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

运行脚本 npm run prepare

• 会产生 .husky 文件目录等文件
  

husky / pre-commit ( pre-commit文件作用：就是再git commit之前会执行这个文件 )

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

# echo "pre-commit被执行了" -> pre-commit文件作用：就是再git commit之前会执行这个文件

#推送之前运行eslint检查
npm  run lint
##推送之前运行单元测试检查
#npm run test:unit
1
2
3
4
5
6
7
8
9

husky / commit-msg

#!/bin/sh
#. "$(dirname "$0")/_/husky.sh"
#在项目中我们会使用commit-msg这个git hook来校验我们commit时添加的备注信息是否符合规范。在以前的我们通常是这样配置：
#--no-install 参数表示强制npx使用项目中node_modules目录中的commitlint包(如果需要开启，注意：需要安装npx)
#npx --no-install commitlint --edit $1
1
2
3
4
5

配置以上之后，再执行 git commit -m “XXX” 会先执行一下 eslint校验代码是否符合，符合可以提交，不符合不给提交

• 假设 eslint之中的规则 注释掉 使用git commit的时候，会报错之
  // 关闭对所有未定义变量的警告提示 'no-undef': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  

注意点：

git add ./ 时候报错
warning: LF will be replaced by CRLF in .gitignore.

• 因为是Windows 对空格解析问题
  git config --global core.autocrlf false