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
    原文作者:小无路
    原文地址: https://segmentfault.com/a/1190000010463914
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞