开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

前言

最近公司新开始一个项目，后台管理需要重新搭建一个新的项目框架。因为上一个项目是我搭建的，但是说实话只是封装了一些必要的方法及组件，并没有其他规范上的一些优化内容。现在领导要求需要和公司以前的项目保持一致，所以参考了一下之前公司的项目。发现了好多亮点，最让我眼前一亮的是关于代码规范的配置。

现在，我要记录一下我的学习过程。（我的简历又多了一丝色彩！YES!!!）

代码规范

项目里不仅是单人开发，团队中每个人的开发风格不统一。比如开发工具，我更喜欢用webstorm，因为其可视化更直观，操作更方便，也可以在setting中配置eslink的格式风格；但是其他同事，更喜欢使用vscode，他们有一个单独的vscode的一个关于代码规范setting.json文件。

今天主要实验的是利用一些插件，配置到项目里，可以让大家伙保持一种风格，且不用配置其他的文件及操作。

Eslint + Prettier

Eslint：进行代码风格检查
Prettier: 进行格式化工具

操作

安装依赖

安装eslint

yarn add eslint eslint-plugin-vue eslint-define-config --dev

安装prettier

yarn add prettier eslint-plugin-prettier @vue/eslint-config-prettier --dev

安装支持ts的插件

yarn add @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

填充对应的配置文件：.eslintrc.js

.eslintrc.js: 用来配置ESlint规范的一个文件

    因为配置内容是借鉴的其他项目，不能直接粘贴代码了，插个截图看看

延伸

配置ESlint有三种方式

使用eslintrc.js文件配置（支持json,Yaml）
在packagek.json中添加eslintConfig配置块

...
"eslintConfig": {
    "extends": [
        "...",
        "..."
    ]
},
...

直接在文件中使用（开发中少见）

husky

husky 是一个Git Hook(git钩子能在特定的‘动作’发生时触发自定义脚本。有两组这样的钩子：客户端的【提交，操作等】和服务端的【接收被推送的提交的联网的操作】。),Git Hook可以帮助我们对commit前， push前以及commit提交的信息进行验证。

而这次主要的操作练习：禁止git commit这个命令及对提交的信息进行验证

npx husky-init && npm install  # npm
npx husky-init && yarn         # Yarn 1
npx husky-init --yarn2 && yarn # Yarn 2+

问题1：因为是临时创建的vuecli2的模板，没有git

解决git init再执行上面的命令

第一步：

第二步：根目录下出现一个文件夹：.husky点击打开内部的pre-commit文件，修改为

第三步：添加一条命令：lint

"scripts": {
  ....
  "lint": "eslint src --fix --ext .js,.ts,.jsx,.tsx,.vue && prettier --write --ignore-unknown"
},

src：要验证的目标文件夹
--fix: 自动修复命令
--ext: 指定检测文件的后缀

下面进行commit之前对待吗进行的格式化检测

lint-staged

配置好husky后,有一个问题：任意改动一点位置，都会对整个项目进行代码检查。浪费！！！

解决：可以通过lint-staged这个工具实现只对git暂存区中的内容进行检查和格式化。

第一步：安装
- yarn add lint-staged --dev
第二步：配置package.json

 "script": {},
"lint-staged": {
  "*.{vue,js,ts,tsx,jsx}": [
    "eslint --fix",
    "prettier --write --ignore-unknown"
  ]
},
...

第三步：修改.husky/pre/commit

commit message 规范

这个是我最喜欢的一个亮点。

项目可以统一规范统一风格，好处就是可以快速定位每次提交的内容，方便以后对版本进行控制

第一步：安装commitizen

yarn add commitizen --dev

第二步：配置项目提交说明，这里使用cz-conventional-changelog,或者选择cz-customizable

yarn add cz-conventional-changelog --dev // 这个插件没有汉化

yarn add cz-customizable --dev // 这个插件可以自己配置汉化文件。

在根目录下新增一个文件：.cz-config.js

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:     新功能' },
    { value: 'fix', name: 'fix:      修复' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    { value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)' },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     增加测试' },
    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:    打包' },
  ],

  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述,使用 "|" 换行(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)',
  },

  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是100
  subjectLimit: 100,
  breaklineChar: '|',
}

第三步：修改package.json

"config": {
  "commitizen": {
    "path": "./node_modules/cz-customizable"
  }
},

第四步：进行commit,通过cz这个cli工具

yarb cz 或者 npx cz 或者在package.json中配置一下 "scripts": { "commit": "cz" },

禁止使用git commit命令，只能使用我们配置的cz

记一次关于代码规范的操作实践

前言