新公司的Vue專案沒有配置eslint，雖然平時coding的時候都會按照eslint的標準去寫，但是沒有統一的配置後期專案程式碼review的時候總還是不太方便。

    Vue的專案配置eslint還是很簡單的。它屬於依賴外掛中的一種，可以像安裝其他外掛一樣在命令列用npm install eslint -g安裝，也可以修改package.json檔案去更新專案的依賴包，重新跑一遍npm install就可以了。

    eslint常用的依賴有很多，我貼出我用的一些。在package.jsonde 的dependencies或者devDependencies中新增下列屬性即可：

"babel-eslint": "^7.1.1",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
 

    然後重跑一遍npm install。不用擔心，因為只添加了這幾個依賴，速度會比較快，不會耽誤太多開發的時間。

    安裝完依賴包之後不會生成 eslintrc.js這個配置檔案，需要別的專案拷或者自己查閱官網配置。。。。我是菜雞...拷的。

可以原封不動拷進去！   

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

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}
 

新建js檔案並命名為.eslintrc.js然後把上面的程式碼複製貼上進去。

    專案中配置好eslint後，還需要到編輯器的設定裡邊去開啟eslint的開關。這裡以webstorm為例。

    然後apply-->OK就好了。

(----------------------------------割-------------------------------------)

    有些小夥伴擔心專案以前沒有按照eslint的規範寫，配置好以後滿篇的錯誤怎麼辦。不用擔心，你的ide會幫你做很多事情。

    還是以強大的webstorm為例，對單個檔案點選右鍵-->Fix ESLint Problems

    當然，你可以對整個專案點選右鍵，那就是依照eslint的程式碼標準格式化專案程式碼。

    好的程式碼規範會讓你的程式碼無論何時開啟，都不至於亂到不想多看。其實寫的久了，不用eslint，一樣可以寫出整潔漂亮的程式碼。因為，習慣是最有效的約束。