eslint webpack2 vue-loader配置

  1. 云栖社区>
  2. 博客>
  3. 正文

eslint webpack2 vue-loader配置

小无路 2017-08-30 16:39:43 浏览1884
展开阅读全文

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-guide/configuring#specifying-environments

parser设置解释器

http://eslint.cn/docs/user-guide/configuring#specifying-environments

global设置全局变量

http://eslint.cn/docs/user-guide/configuring#specifying-globals

rules自定义规则

http://eslint.cn/docs/user-guide/configuring#configuring-rules

  • "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/1190000008575829?utm_source=itdadao&utm_medium=referral
http://eslint.cn/docs/user-guide/configuring
http://eslint.cn/docs/rules/

vue-loader

https://vue-loader.vuejs.org/zh-cn/workflow/linting.html

https://vue-loader.vuejs.org/zh-cn/options.html

小无路博客

网友评论

登录后评论
0/500
评论
小无路
+ 关注