推荐几个前端开发插件

提高开发效率

简单的集成到了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中的<style>便签中的样式
// stylelint-scss: scss语法检测
// stylelint-webpack-plugin: webpack检查插件
npm i stylelint stylelint-order stylelint-processor-html stylelint-scss stylelint-webpack-plugin css-properties-sorting --D

在根目录添加.stylelintrc文件，添加规则和插件

{ 
  "processors": ["stylelint-processor-html"],
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
    ],
  "extends": "css-properties-sorting",
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations"
    ],
    "color-no-invalid-hex": true,
    "unit-no-unknown": true,
    "property-no-unknown": true,
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "at-rule-no-unknown": true,
    "comment-no-empty": true,
    "no-invalid-double-slash-comments": true,
    "number-leading-zero": "always",
    "number-no-trailing-zeros": true,
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never"
  }
}

webpack中添加stylelint-webpack-plugin

const StyleLintPlugin = require('stylelint-webpack-plugin');
plugins: [
  new StyleLintPlugin({
    files: ['**/*.s?(a|c)ss', '**/*.vue'],
    syntax: 'scss'
  }),
]

查看stylelint详情 查看stylelint-webpack-plugin详情

三、Mock

前后端分离

步奏

安装mockjss

npm i --D mockjs

我在项目中创建了个mock，定义了个test

const Mock = require('mockjs')
Mock.mock('/test', 'get',
  {
    'userList|1-10': [
      {
        'id|1-10': 2
      }
    ]
  }
)

在src下的App.vue中引入(通过添加环境变量引入，可以快速切换)

import '../mock'

HelloWord.vue中测试

axios.get('/test')
  .then(res => {
    console.log(res)
  })

查看mockjs详情

四、Sentry

管理生产bug

步奏

在Sentry上创建一个项目获取DNS
在main.js添加

import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
Raven
  .config('https://[e-mail]/1285464')
  .addPlugin(RavenVue, Vue)
  .install()

npm run dev下，Vue会主动捕获所有的错误并将其输出到控制台，Sentry无法捕获到错误
查看Sentry详情