前端工程化-代码格式统一

一、所需依赖包

• lint-staged[>=10] 链接

• husky [ ^7.0.4 ] 链接
• commitlint [ "@commitlint/cli": "^16.0.1","@commitlint/config-conventional": "^16.0.0", ] 链接

• eslint [ ^8.6.0 ] 链接
• prettier [ 2.5.1 ] 链接

1. lint-staged

仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具，不做任何代码或格式修改。

2. husky

Git的钩子，在Git的不同阶段执行特定的时间（commit、push、receive）。

3. commitlint

commitlint 检查您的提交消息是否符合传统的提交格式。

4. eslint

ESLint 是一种用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是使代码更加一致并避免错误。

5. prettier

进行代码格式化。

Prettier使用的三种方式：

• 方式1：安装编辑器配套的插件，在编辑器内配置一下即可使用:详情
• 方式2：安装官方的CLI工具，使用cli工具提供的命令

• 方式3：编程的形式使用：通过调用npm 包prettier暴露的一些模块或方法（需要说明的是，prettier也支持在浏览器端格式化代码

方式1： 配合VScode编辑器使用

VScode中修改代码格式，有两种方式：

• 直接修改VSCode的settings.json文件。修改方式：快捷键进入，command + p 然后输入 > 进入命令搜索模式，再输入: Settings(JSON)，直接修改。
• Prettier + 自定义settings.json。修改方式：第一步VSCode安装Prettier插件，第二步项目根目录创建.vscode/settings.json，进行覆盖修改。

VSCode的settings.json文件，可以调整项目代码的格式化（官方配置文件链接）。

示例：配置文件.vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

二、项目操练

1. eslint安装

安装 ESLint

yarn add eslint --dev

设置一个eslint的配置文件.eslintrc.js

yarn run eslint --init

执行上边命令后，生成的.eslintrc.js配置文件如下：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "single"]
    }
};

检测eslint校验是否生效

打开项目src/index.js文件，添加一个单引号的打印，有报红提醒。 eslint生效。

2. prettier安装

格式化代码

安装prettier

yarn add prettier -D

设置.prettierrc配置文件

echo {}> .prettierrc

执行上边命令后，生成的一个空的.prettierrc配置文件。参考文档进行规则添加，如下：

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

添加.prettierignore配置文件

# Ignore artifacts:
dist
node_modules
yarn.lock

# Ignore all HTML files:
*.html

注意：可以通过npx prettier --write . 进行验证是否生效。观察src/index.js文件变化。

3. husky安装

引入git钩子功能

安装husky

yarn add husky -D

编辑 package.json > 准备脚本并运行一次：

npm set-script prepare "husky install"
npm run prepare

生成.husky下文件，以及在package.json中插入"prepare": "husky install"

4. commitlint安装

校验git commit信息

---

安装commitlint

yarn add @commitlint/{config-conventional,cli} -D

添加commitlint.config.js配置文件，参考文档进行规则添加，如下：

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

配置如下：完整的参考配置链接

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
		'type-enum': [
			2,
			'always',
			[
				'build',
				'chore',
				'ci',
				'docs',
				'feat',
				'fix',
				'perf',
				'refactor',
				'revert',
				'style',
				'test',
			],
		],
	}
};

将勾子加入husky中

yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

5. lint-staged安装

开始使用 lint-staged 的最快方法是在终端中运行以下命令：

npx mrm@2 lint-staged