资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/eslint webpack2 vue-loader配置

eslint webpack2 vue-loader配置

Null / 1383人阅读

摘要：使用或去定义配置的结构。在里创建一个属性，在那里定义你的配置。如果同一个目录下有多个配置文件，只会使用一个。

eslint是一个代码检测工具
官网如下
http://eslint.cn/

</>复制代码 
  1. 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 
</>复制代码 
  1. //初始化配置
  2. 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

.eslintrc.yaml

.eslintrc.yml

.eslintrc.json

.eslintrc

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 (当被触发的时候，程序会退出)

</>复制代码 
  1.  module.exports = {
  2.     "parser": "babel-eslint",
  3.     "extends": "eslint:recommended",
  4.     "plugins": [
  5.         "html"
  6.     ],
  7.     "env": {
  8.         "browser": true,
  9.         "node": true,
  10.         "es6":true,
  11.         "jquery":true
  12.     },
  13.     "globals": {
  14.         "Vue": true,
  15.         "AMap": true, 
  16.         "tdist": true,
  17.         "EXIF": true,
  18.         "j_body": true,
  19.         "native": true,
  20.         "VueRouter": true,
  21.         "pocketPost": true,
  22.         "aliCnCityList": true,
  23.     },
  24.     "rules": {
  25.         "no-unused-vars": ["off", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
  26.         "no-debugger": ["off"],
  27.         "no-unreachable": ["off"],
  28.         "no-console": ["off"],
  29.         "no-extra-semi": ["off"],
  30.     }
  31. };
eslint在webpack2配置如下 
</>复制代码 
  1.  module: {
  2.         rules: [
  3.             {
  4.                 test: /.(js|vue)$/,
  5.                 loader: "eslint-loader",
  6.                // enforce: "pre",//是否在loader前监测，vue中我设为否
  7.                 include: [path.join(__dirname, "src")],
  8.                 options: {
  9.                     formatter: require("eslint-friendly-formatter")//错误输出格式
  10.                 }
  11.             }
  12.             ]
  13.         }
相关参考文档

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
GPU云服务器 云服务器 ESLint webpack2 vue-loader spring配置数据源配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84580.html

相关文章

  • eslint webpack2 vue-loader配置

    摘要：使用或去定义配置的结构。在里创建一个属性，在那里定义你的配置。如果同一个目录下有多个配置文件，只会使用一个。 eslint是一个代码检测工具 官网如下http://eslint.cn/ npm install eslint --save-dev 需要这几个npm包: eslint eslint-loader eslint-plugin-html (用以lint一些在html文件里面通...

    junnplus 评论0 收藏0

  • 简单vue项目脚手架

    摘要：简单项目脚手架地址使用技术栈需要学习的知识内容相当多，尤其是教程，官方脚手架虽然相当完整齐全，但是修改起来还是挺花时间，于是自己参照网上的资料和之前做过的项目用到的构建工具地去写了一个简单项目脚手架。 简单vue项目脚手架 github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1...

    opengps 评论0 收藏0

  • webpack使用记录

    容易混淆概念解析 读这篇文章理清下面概念 webpack 中那些最易混淆的 5 个知识点 1.module，chunk 和 bundle 的区别是什么？2.filename 和 chunkFilename 的区别 版本区别 webpack 2x entry output loaders file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 url-lo...

    Sike 评论0 收藏0

  • WebPack2配置我的Vue开发环境

    摘要：包中导出的默认是运行时构建。当然，我们期待的是只修改代码，不用重新运行命令，甚至不需要刷新浏览器即看到代码的改动效果，这时候需要新的插件来配置实现的热重载。 首先已经全局安装了node/vue/webpack; 新建文件夹demo4并初始化 cd demo4 npm init -y 这是页面会生成一个package.json文件。 安装webpack及相关插件 npm install ...

    Sike 评论0 收藏0

发表评论

登陆后可评论

0条评论

Null

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<