eslint webpack2 vue-loader配置

eslint是一個代碼檢測工具
官網以下
http://eslint.cn/

npm install eslint --save-dev

須要這幾個npm包:

• eslint

• eslint-loader

• eslint-plugin-html (用以lint一些在html文件裏面經過script包裹的js代碼,它默認的匹配規則是不帶type屬性，或者是/^(application|text)/(x-)?(javascript|babel|ecmascript-6)$/i,具體的內容請查閱相關文檔,經過cli啓動lint的時候定義文件後綴名時eslint --ext .html,.js)

• eslint-config-standard (和?2個包都是javascript-style-standard風格指南須要的包)

• eslint-plugin-promise

• eslint-plugin-standard

• eslint-friendly-formatter (生成的報告格式)

eslint --init

//初始化配置
eslint --init

ESLint 支持幾種格式的配置文件：

JavaScript - 使用 .eslintrc.js 而後輸出一個配置對象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
JSON - 使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 文件容許 JavaScript 風格的註釋。
Deprecated - 使用 .eslintrc，能夠使 JSON 也能夠是 YAML。
package.json - 在 package.json 裏建立一個 eslintConfig屬性，在那裏定義你的配置。

若是同一個目錄下有多個配置文件，ESLint 只會使用一個。優先級順序以下：

**1. .eslintrc.js

1. .eslintrc.yaml

2. .eslintrc.yml

3. .eslintrc.json

4. .eslintrc

5. package.json**

配置示例

evn設置環境定義了預約義的全局變量

http://eslint.cn/docs/user-gu...

parser設置解釋器

http://eslint.cn/docs/user-gu...

global設置全局變量

http://eslint.cn/docs/user-gu...

rules自定義規則

http://eslint.cn/docs/user-gu...

• "off" 或 0 - 關閉規則

• "warn" 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會致使程序退出)

• "error" 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

module.exports = {
    "parser": "babel-eslint",
    "extends": "eslint:recommended",
    "plugins": [
        "html"
    ],
    "env": {
        "browser": true,
        "node": true,
        "es6":true,
        "jquery":true
    },
    "globals": {
        "Vue": true,
        "AMap": true, 
        "tdist": true,
        "EXIF": true,
        "j_body": true,
        "native": true,
        "VueRouter": true,
        "pocketPost": true,
        "aliCnCityList": true,
    },
    "rules": {
        "no-unused-vars": ["off", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
        "no-debugger": ["off"],
        "no-unreachable": ["off"],
        "no-console": ["off"],
        "no-extra-semi": ["off"],
    }
};

eslint在webpack2配置以下

module: {
        rules: [
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
               // enforce: 'pre',//是否在loader前監測，vue中我設爲否
                include: [path.join(__dirname, 'src')],
                options: {
                    formatter: require('eslint-friendly-formatter')//錯誤輸出格式
                }
            }
            ]
        }

相關參考文檔

https://segmentfault.com/a/11...
http://eslint.cn/docs/user-gu...
http://eslint.cn/docs/rules/

vue-loader

https://vue-loader.vuejs.org/...

https://vue-loader.vuejs.org/...

小無路博客：https://56way.com