推薦幾個前端開發插件

提升開發效率

簡單的集成到了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.

1、集成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
}

1. 添加到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詳情

2、集成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 --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詳情

3、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詳情

4、Sentry

管理生產bug

步奏

在Sentry上建立一個項目獲取DNS
在 main.js添加

import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
Raven
  .config('https://4ff044c4c2374c359a94d58b2c3e89d5@sentry.io/1285464')
  .addPlugin(RavenVue, Vue)
  .install()

npm run dev下，Vue會主動捕獲全部的錯誤並將其輸出到控制檯，Sentry沒法捕獲到錯誤
查看Sentry詳情