自定义eslint 配置包
时间:2022-07-28
本文章向大家介绍自定义eslint 配置包,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简介
对于经常使用的eslint配置,我们可以通过自定义 eslint 配置包,实现配置的复用。
目录结构
- pks
- vue-program 项目目录
- eslint-config-vue 公共eslint配置包
- index.js 配置文件
- package.json
编写包
index.js 配置文件
module.exports = {
rules: { // 自定义规则
'indent':['error', 2]
}
}
package.json
{
"name": "eslint-config-vue", // 包名称必须以 eslint-config- 开头
"version": "0.0.1",
"description": "eslint config",
"main": "index.js", // 入口文件
"files": [
"index.js",
"package.json"
],
"keywords": [],
"author": "copy-left",
"license": "ISC"
}
安装配置包
方法一
- 引入配置
// .eslintrc
{
"extends": [
"eslint-config-vue"
]
...
}
- 安装
npx install-peerdeps -D eslint-config-vue
方法二
- 引入配置
// .eslintrc
{
"extends":[
"./node_modules/eslint-config-vue/index.js" // 本地配置包文件地址
or
"plugin:eslint-config-vue" // plugin:[包名称]
]
}
- 安装
npm i -D ../eslint-config-vue
因为我是用的是本地离线包。所以必须使用npm安装包, 包才能指向正确的包地址。
如果使用cnpm,将把包作为在线包安装。
带命名空间的配置包
有时可能我们的报名重复或希望将包统一放在一个目录下管理。可以使用包命名空间
// 带命名空间的包
// package.json
{
"name": "@micro/eslint-config-vue" // 包名格式: @[空间名]/[包名]
}
当我们使用带有命名空间的包时,配置eslint方式有所不同
// .eslintrc
{
extends: {
"@micro/eslint-config-vue" // eslint-config- 前缀不可省略
“plugin:@micro/eslint-config-vue” // 不能使用 plugin 模式, 将无法定位包地址
}bunen
}
eslint包查找方式
- plugin 通过包名根据npm规则查找对应包地址: 本地node_modules -> 全局 node_modules
// 当前配置包名 eslint-config-vue
// 生成的 node_modules 目录结构
- node_modules/
- eslint-config-vue
- index.js
- package.json
- @命名空间 通过命名空间根据npm规则查找对应包地址
// 当前配置包名 @micro/eslint-config-vue
// 生成的 node_modules 目录结构
- node_modules/
- @micro/
- eslint-config-vue/
- index.js
- package.json
- 文件地址 直接通过地址查询
plugin 与 @命名空间 查询模式类似,但查询的层级或识别方式不同. 所以如果 plugin 无法查询到 @命名空间的配置包 plugin 包定位到包地址后,可设置具体加载的配置文件。 例如: 'plugin:vue/vue3-essential'
其他
- 也可以将配置包直接,发布到npm。 其他地方使用时相对简单方便
- npm 与 cnpm 安装本地离线包的package.json的区别
// npm i -D ../eslint-config-vue
{
"devDependencies": {
"eslint-config-vue": "file:../eslint-config-vue", // 包的值为包地址
}
}
// cnpm i -D ../eslint-config-vue
```javascript
{
"devDependencies": {
"eslint-config-vue": "^0.0.1", // 包的值为包版本号
}
}
- 二次安装可能出现安装失败情况,可以删除 package-lock.json, yarn.lock
文档
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C盘爆满,如何移除软件~
- Microsoft PowerToys
- MagicEXIF(元数据编辑器)
- 9个 SSH常用命令选项
- DietPi折腾记
- DietPi配置问题(1)
- DietPi配置问题(2)
- 什么是死锁?如何解决死锁?
- Mac终端配置oh-my-zsh
- 聊聊dubbo-go的leastActiveLoadBalance
- ThreadLocal与InheritableThreadLocal
- 每天学点JavaScript基础(1)—— null 和 undefined
- 每天学点JavaScript基础(2)——JavaScript里的分号,你加还是不加?
- Flutter中async与await异步编程原理分析
- 在树莓派上使用360WIFI