资讯专栏INFORMATION COLUMN

推荐几个前端开发插件

张宪坤 / 637人阅读

摘要:提高开发效率简单的集成到了生成的项目上项目地址一集成管理团队的信息步奏安装添加规则根目录添加文件,并添加规则,必须为格式添加到中安装并添加命令在中添加查看详情二集成管理团队编写规范步奏安装

提高开发效率

简单的集成到了vue-cli生成的项目上 项目github地址

A Vue.js project
Build Setup
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

一、集成validate-commit-msg

管理团队的commit信息

步奏
安装validate-commit-msg
npm i --D validate-commit-msg
添加commit规则

1.根目录添加.vcmrc文件,并添加规则,必须为JSON格式

{
  "types": ["feat", "fix", "docs", "style", "refactor", "perf", "test", "build", "ci", "chore", "revert"],
  "scope": {
    "required": false,
    "allowed": ["*"],
    "validate": false,
    "multiple": false
  },
  "warnOnFail": false,
  "maxSubjectLength": 100,
  "subjectPattern": ".+",
  "subjectPatternErrorMsg": "subject does not match subject pattern!",
  "helpMessage": "",
  "autoFix": false
}

2.添加到package.json中

{
  "config": {
    "validate-commit-msg": {
      /* your config here */
    }
  }
}
安装husky,并添加commitmsg命令
npm i --D husky

在package.json中添加"commitmsg": "validate-commit-msg"

{
  "scripts": {
    "commitmsg": "validate-commit-msg"
  }
}

查看validate-commit-msg详情

二、集成stylelint

管理团队css编写规范

步奏
安装stylelint, stylelint-order, stylelint-processor-html, stylelint-scss, stylelint-webpack-plugin
// stylelint-order: 属性顺序插件
// stylelint-processor-htm: 检查html中的