vue-cli開發中利用eslint規范前端團隊開發代碼，並自動格式化部分不匹配eslint的代碼

1.在項目主目錄下的.eslintrc.js中 沒有該文件需要新建一個該文件 代碼如下，團隊可自行定義如下eslint的規則 

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: ['plugin:vue/essential', 'plugin:prettier/recommended', 'eslint:recommended'],
  env: {
    node: true,
    es6: true,
    browser: true
  },
  rules: {
    'no-console': 0,
    'no-debugger': 0,
    'no-unused-vars': 0,
    'no-useless-escape': 0,
    'no-multiple-empty-lines': [
      2,
      {
        max: 3
      }
    ],
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        trailingComma: 'none',
        bracketSpacing: true,
        jsxBracketSameLine: false,
        insertPragma: true,
        requirePragma: false
      }
    ]
  }
}

2.檢查package.json中 是否包含了 eslint的相關插件 需要的插件如下

    "eslint": "^5.2.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",

如沒有這些依賴 需要執行npm install eslint...安裝下載相關依賴

3.檢查主目錄下的 build文件夾下的webpack.base.conf.js文件 中 createLintingRule 這個方法 中 是否如下設置 ，如不是請修改設置如下：

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay,
    fix:true
  }
})

4.重啟項目 這個時候就會發現 一些不規范的的代碼會自動格式化為 eslint的設置規則了