怎樣在vue項(xiàng)目下添加ESLint的方法

更新時(shí)間：2019年05月16日 09:19:18 作者：雯子

這篇文章主要介紹了怎樣在vue項(xiàng)目下添加ESLint的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

簡易搭建

ESLint官網(wǎng)網(wǎng)址

ESLint中文官網(wǎng)

如果你是想在自己的項(xiàng)目里搭建ESLint，就可以按照官網(wǎng)的指示，

以全局安裝舉例，

npm install -g eslint

然后初始化

eslint --init

它會(huì)問你一些問題，你可以按照你的喜好進(jìn)行配置，我選的是popular下面的standard，生成的文件是js格式，那么就會(huì)創(chuàng)建出eslintrc.js文件：

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

然后就可以簡單的lint某個(gè)文件了：

$ eslint yourfile.js

在vue的項(xiàng)目里新添加ESLint

有的時(shí)候，早期的時(shí)候，我們建立vue項(xiàng)目的時(shí)候，可能圖簡便，并沒有初始化ESLint、單元測試等等模塊，那么就需要后添加進(jìn)去。

如果是現(xiàn)在新建一個(gè)項(xiàng)目，通過vue-cli的問答就可以輕松初始化ESLint的配置。

這里說一下怎樣在老項(xiàng)目里新添加ESLint。

首先，我先用vue-cli創(chuàng)建了一個(gè)新項(xiàng)目，在初始化的時(shí)候，選擇安裝eslint，

選擇standard規(guī)則，然后就生成了eslintrc.js，把生成的這個(gè)文件拷貝到要加ESlint的老項(xiàng)目里。

// https://eslint.org/docs/user-guide/configuring
module.exports = {
 //默認(rèn)情況下，ESLint 會(huì)在所有父級(jí)目錄里尋找配置文件，一直到根目錄。如果你想要你所有項(xiàng)目都遵循一個(gè)特定的約定時(shí)，這將會(huì)很有用，但有時(shí)候會(huì)導(dǎo)致意想不到的結(jié)果。為了將 ESLint 限制到一個(gè)特定的項(xiàng)目，在你項(xiàng)目根目錄下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下設(shè)置 "root": true。ESLint 一旦發(fā)現(xiàn)配置文件中有 "root": true，它就會(huì)停止在父級(jí)目錄中尋找。
 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 要求箭頭函數(shù)的參數(shù)使用圓括號(hào)
  'arrow-parens': 0,
  // allow async-await 強(qiáng)制 generator 函數(shù)中 * 號(hào)周圍使用一致的空格
  'generator-star-spacing': 0,
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }
}

然后找到package.json，把ESLint相關(guān)的依賴加進(jìn)去（也可以一個(gè)一個(gè)進(jìn)行安裝，或者有更好的辦法。。）

 "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一下，應(yīng)該就可以了。

這里的編輯器推薦用vscode，可以非常智能的顯示出哪里出錯(cuò)，方便修改。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: