[Vue CLI 3] @vue/cli-plugin-eslint 源码分析
熟悉
eslint-loader的同学一般如下配置:
设置一下几项:
- test : A condition that must be met(一般是处理对应文件的正则)
- exclude : A condition that must not be met(手动添加不需要处理的,一般比如 node_modules)
- loader : An array of paths or files where the imported files will be transformed by the loader(对应 loader 的名字)
- options(可选参数对象)
module.exports = { // ... module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader", options: { // eslint options (if necessary) } }, ], }, // ... }
当然还可以加上
enforce: "pre"
To be safe, you can use enforce: "pre" section tocheck source files,not modified by other loaders(like babel-loader)
module.exports = { // ... module: { rules: [ { enforce: "pre", test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader" }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, ], }, // ... }
我们看一下
@vue/cli-plugin-eslint的实现,先用
vue inspect --rule eslint看一下最终生成的配置:
/* config.module.rule('eslint') */ { enforce: 'pre', test: /\.(vue|(j|t)sx?)$/, exclude: [ /node_modules/, '/Users/***/node_modules/@vue/cli-service/lib' ], use: [ /* config.module.rule('eslint').use('eslint-loader') */ { loader: 'eslint-loader', options: { extensions: [ '.js', '.jsx', '.vue' ], cache: true, cacheIdentifier: '65e8f1b4', emitWarning: true, emitError: false, formatter: function () { /* omitted long function */ } } } ] }
我们看一下
cli-plugin-eslint/index.js
module.exports = (api, options) => {}
我们看一下
vue.config.js的配置:
lintOnSave
是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。
我们看一下 @vue/cli-service/lib/options.js 的配置:
1、默认是:
lintOnSave: true
2、支持下面几个备选值:
lintOnSave: joi.any().valid([true, false, 'error'])
不然会报错:
ERROR Invalid options in vue.config.js: child "lintOnSave" fails because ["lintOnSave" must be one of [true, false, error]]
接下来就是通过 api.chainWebpack 来设置 webpackConfig
api.chainWebpack(webpackConfig => { })
所以开始的设置 rule 为 eslint,然后设置:
pre、
exclude
webpackConfig.module .rule('eslint') .pre() .exclude.add(/node_modules/) .add(require('path').dirname(require.resolve('@vue/cli-service'))).end()
这里
add了
2个:
.add(/node_modules/) .add(require('path').dirname(require.resolve('@vue/cli-service')))
然后设置 test
.test(/\.(vue|(j|t)sx?)$/)
再设置
use和
loader
.use('eslint-loader') .loader('eslint-loader') .options({ })
这里的 options 分为如下几个:
1、extensions
An array of filename extensions that should be checked for code. The default is an array containing just ".js".
2、cache
Operate only on changed files (default: false).
3、cacheIdentifier
4、emitWarning
默认 false,Loader will always return warnings if option is set to true.
5、emitError
默认 false,Loader will always return errors if this option is set to true.
6、formatter
Loader accepts a function that will have one argument: an array of eslint messages (object). The function must return the output as a string. You can use official eslint formatters.
之前用的比较多的是:
require("eslint-friendly-formatter")阅读更多
- [android源码分析]bluez启动过程中的各种plugin的初始化(一)--__bluetooth_builtin数组所耍的花样
- vue-cli的webpack模板项目配置文件分析
- vue源码入口文件分析(推荐)
- 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么
- 插件开发之360 DroidPlugin源码分析(三)Binder代理
- vue-cli的webpack模板项目配置文件分析
- Vue学习之源码分析--Vue.js响应式原理(一)
- vue-cli下ESlint 配置说明
- vue-cli的webpack模板项目配置文件分析
- 插件开发之360 DroidPlugin源码分析(一)初识
- vue2源码浏览分析01
- 思科VPP源码分析(CLI支持分析)
- 插件开发之360 DroidPlugin源码分析(五)Service预注册占坑
- hive CliDriver 源码分析
- vue-cli#2.0 webpack 配置分析
- vue-cli的webpack模板项目配置文件分析
- JFinal源码分析------plugin的故事
- vue-cli的webpack模板项目配置文件分析
- 插件开发之360 DroidPlugin源码分析(三)Binder代理
- 前端Vue 源码分析-逻辑层