vuecli結合eslint靜態檢查

sumer7310發表於2017-11-06
VueEsLint

vuecli結合eslint靜態檢查

搭建vue專案開發可能選擇vue-cli專案腳手架快速建立vue專案。(https://github.com/vuejs/vue-cli)

安裝vue-cli

npm install -g vue-cli

這種方式安裝比較慢，可以用國內淘寶映象安裝,cnpm,安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

繼續安裝

cnpm install -g vue-cli

vue-cli腳手架自帶webpack打包工具，建立一個基於webpack模板的新專案

vue init webpack my-project

這裡需要進行一些配置，預設回車即可

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

配置esLint

eslint配置方式主要有兩種：

  1. 註釋配置：使用js註釋來直接嵌入ESlint配置資訊到一個檔案裡
  2. 配置檔案：使用一個js，JSON或者YAML檔案來給整個目錄和它的子目錄指定配置資訊。這些配置可以寫成一個檔名.eslintrc.*的檔案或者package.json檔案裡的eslintConfig項裡
    這兩種方式ESlint都會自動尋找然後讀取，也可以直接在命令列內指定一個配置檔案。

一般需要我們去配置項包括：

  1. 環境：你的指令碼會在哪種環境下執行。每個環境帶來了一組特定的預定義的全域性變數。
  2. 全域性變數：指令碼執行期間會訪問額外的全域性變數。
  3. 規則：使用那些規則，並且規則的等級是多少。

vue-cli腳手架安裝完成後，主要有幾個地方配置了eslint。

1，專案建立後專案中就會出現.eslintignore 和.eslintrc.js兩個檔案

.eslintignore類似Git的.gitignore用來配置不需要Eslint檢查的檔案
.eslintrc.js主要用來配置具體規則

.eslintignore檔案

新增不啟動靜態檢查的檔案

build/*.js // 忽略build資料夾下所有的指令碼檔案
config/*.js

.eslintrc.js檔案

// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parser: 'babel-eslint', // 解析器為babel-eslint,可在package.json檔案中配置
  parserOptions: {
    sourceType: 'module'
  },
  env: { //環境配置為瀏覽器
    browser: true,
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: 'standard', //檔案配置繼承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
  }
}

說明： 在rules中每個配置項後面的第一個值為eslint規則的錯誤等級

  • "off" 或 0 （關閉這條規則）
  • "warn" 或 1 （違反規則會警告，不影響專案執行）
  • "error" 或 2 （違反規則會報錯，終止專案執行）

2 在package.json檔案中配置檔案

"script" : {
    "lint": "eslint --ext .js, .vue src"
}
"devDenpendencies" : {
    "babel-eslint": "^7.1.1",
    // 更多eslint檔案
    ...
}

3 在webpack配置檔案中

webpack.base.conf.js

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

有時候程式碼裡有些特殊情況需要我們在某一行或者某幾行關閉ESLint檢測，可以使用註釋：

1，註釋關閉所有規則

/* eslint-disable */
alert('foo');
/* eslint-enable */

2，關閉某一行的所有規則

alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');

3，在某一行關閉指定的規則

alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');

常用規則：
規則的細節請到ESLint官方網站檢視 http://eslint.org/docs/rules/

相關文章