vuecli結合eslint靜態檢查

vuecli結合eslint靜態檢查

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

安裝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/