怎樣在vue項目下添加ESLint

簡易搭建

ESLint官網網址

ESLint中文官網

若是你是想在本身的項目裏搭建ESLint，就能夠按照官網的指示，

以全局安裝舉例，

npm install -g eslint

而後初始化

eslint --init

它會問你一些問題，你能夠按照你的喜愛進行配置，我選的是popular下面的standard，生成的文件是js格式，那麼就會建立出eslintrc.js文件：

module.exports = {
"extends": "standard"
};

而後就能夠簡單的lint某個文件了：

$ eslint yourfile.js

在vue的項目裏新添加ESLint

有的時候，早期的時候，咱們創建vue項目的時候，可能圖簡便，並無初始化ESLint、單元測試等等模塊，那麼就須要後添加進去。

若是是如今新建一個項目，經過vue-cli的問答就能夠輕鬆初始化ESLint的配置。

這裏說一下怎樣在老項目裏新添加ESLint。

首先，我先用vue-cli建立了一個新項目，在初始化的時候，選擇安裝eslint，

選擇standard規則，而後就生成了eslintrc.js，把生成的這個文件拷貝到要加ESlint的老項目裏。

// https://eslint.org/docs/user-guide/configuring
module.exports = {
  //默認狀況下，ESLint 會在全部父級目錄裏尋找配置文件，一直到根目錄。若是你想要你全部項目都遵循一個特定的約定時，這將會頗有用，但有時候會致使意想不到的結果。爲了將 ESLint 限制到一個特定的項目，在你項目根目錄下的 package.json 文件或者 .eslintrc.* 文件裏的 eslintConfig 字段下設置 "root": true。ESLint 一旦發現配置文件中有 "root": true，它就會中止在父級目錄中尋找。
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  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 函數中 * 號周圍使用一致的空格
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

而後找到package.json，把ESLint相關的依賴加進去（也能夠一個一個進行安裝，或者有更好的辦法。。）

"babel-eslint": "^7.1.1",   "eslint": "^3.19.0",

    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",

而後在webpack.base.conf.js的rules裏添加

{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },

再npm install一下，應該就能夠了。

這裏的編輯器推薦用vscode，能夠很是智能的顯示出哪裏出錯，方便修改。