selint的可共享的配置 <前端求生之路/>

eslint.org/docs/develo…
selint 可共享配置介绍;

image.png

我接到这个小需求的时候是懵逼的 ,我是一个前端cv战士,从来没有关心过所谓的项目构建(typescript的格式,eslint的配置等) 之前是网上找了eslint的插件发开方法基础的开发模版是创建下来了的。对于官网上所谓的英文文档,我是抗拒的。 事后来看茅塞顿开的感觉。

废话不多说,正题;创建一个npm包

npm init
一路回车到底 就生成了一个package.json文件 基础文件就是这样的 名字 版本号 等 入口是index.js

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
复制代码

image1.png

根据官网上的流程,我从新创建了一个index.js在目录里。官网上的demo是这样的 globals 全局变量 。 rules 里面是项目规则总结下,就是直接复制了我们先有项目的eslint的配置全部的粘贴过来。 我以为这样就可以了的

image2.png

在没有经验的情况下,就已经开始走向死胡同了的。开始乱在网上找方法了的,开始上传到我们的git仓库里了,npm publish 发布包 。
首先是npm adduser 依照这个命令去操作了 npm库 在注册了npm后 有username password email 等操作 不知道怎么就发布到我们公司私有的git仓库去了。
一身汗的跟主管说了下 我把eslint的包发到我们私有的git上了。 一顿操作。。。
说了只用在自己本地去跑就好了 然而我还是没有注意到官网上npm link 的使用

也是后来问了主管才知道 在自己创建的插件里执行
npm link
官方说的是,对于安装你自己的东西很方便,这样就可以对其进行处理和迭代测试,而无需不断重建
也就是对于你本地开发的东西会很便捷。

image4.png

在包文件夹中将全局文件夹 /usr/local/mode_modules/xxxxxxx . 中创建一个符号链接。
该符号(xxxxxxx)接到npm link执行命令的包。它还会将包中的任何…哇哩哇啦后面读不懂了 中文也看不懂的那种;

等于说,你在本地另外一个项目中要去跑这个eslint插件的时候要 npm link ‘xxxxxxxxxx’ 去跟你插件的 npm link做链接;

image6.png

拿到插件名这样去做链接 这样你项目就跟插件的eslint绑定成功了的;

image7.png

项目中的.eslintrc.js中就可以不用配置参数了,

module.exports 返回全局共享的变量或者方法。

const path = require(“path”) . 这是抛出方法。

我比较白一点,一直看官网上的引用是这个样子的

image8.png

我也就写成了
module.exports = {
“extends”:”eslint-config-yoshu”
}
这是我让我主管看的时候的样子,简直是无语。。。。

module.exports = {
"extends":"eslint-config-demo"
}
复制代码

后来才改成了

extends:[
"eslint-config-demo"
]
复制代码

这样的写法

这样整个eslint终于是要结束了的

npm link eslint-config-demo 走起 。。。。

发现还是没有eslint的校验 人傻了 怎么回事啊 不行啊。 主管不行啊这方法不好使啊

主管说你没有装依赖 你要引入了包的依赖

比如
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint"

是要装依赖的

好了一早上的时间结束了的。。。。。吃饭睡觉刷抖音。。。。。


下午开始 又是一顿问

A:好了么

M:没有 内心在想。。。我特么属实不清楚依赖要装哪里的。

懵逼中…

想啊想 哦 我写的插件是缺少依赖的…那就装吧。

A:你过来下,跟我说了说怎么装依赖 要装哪些… 好的没看清楚…

image10.png

好的呢,代码都直接copy过来了…

又开始懵逼了 到底是 devDependencies 里呢 还是 dependencies 里呢 我懵逼。。。 谷歌翻译下属实水平有限

开发依赖 dev… 依赖 dependencies… 懵逼了啊。

胆怯的问 我们这个是要装 开发依赖呢 还是 依赖呢…忘记怎么说了

反正就是最后我又弄叉劈了而已。。。

无奈的很。。上火啊

而我对于npm的报错 都是懵逼的

哎 就是玩

咱就谷歌翻译下呗 。 看不懂什么跟什么啊

依赖有问题咱就 npm i 我去 。 npm i 不行 咱就 cnpm i 还不行!!! 删了node_modules 我从头再来~

一顿瞎复制啊 。

我要装依赖啊 。

之前是不知道装什么 找了个新创建的vue项目找到package.json 哎呀 似曾相识的样子,长度也是那么的像 就它了。先弄过来再说

image11.png

完了完了 铁定被说了 。 很对 这是个what??不可思议的东西 。 就跟我解释了下 我要取什么东西 大体围绕着 vue eslint 还有typescript 这三个

阿西吧~ 成功就在眼前了的 。 加油啊 老铁

npm link eslint-config
跑起来~ run

完了 没效果。。。

image12.png

取消更改,nice 完美运行。。。 换上我本地插件就完了????? 一百个问号

发现问题。。 在创建的index.js文件中 保存的时候 双引号 会被自动格式化为单引号…(A发现的)

我尼玛? vscode作怪 settings.json 配置中

image14.png

当然我没有去改我的settings配置而是创建了

.eslintignore 文件 忽略特定的文件和目录 good!

image15.png

别格式化我的文件内容

woc感觉要好了要好了

npm link eslint-config
……….

不行 哒咩啊

开始找原因。。A上场了 。 执行了 rm -r node_modules 删除依赖
rm -r package-lock.json 删除配置
npm cache chean -f 。。。。不清楚 。 肯定是清除什么东西的
查了下清除缓存命令 删除依赖的时候,可能还会存在缓存问题 。 要执行 npm cache chean -f //npm cache clean --force
像我平时都是手动删除的,看到这么高端的删除 啧啧 受教受教了

一顿装。。。我去 没解决

A:等我下 传个插件包 试试

M:好的 。 等待⌛️

。。。。。

。。。

。。

好了 试下

npm link eslint-config-test

完美爆红~「去掉分号报红,contorl+s修复」 good

我本地怎么回事呢???

检查检查。。。。

发现了 插件name 被改为了 eslint-config 好像好像 不能用啊 大哥!!

官网上说了格式为 eslint- config-xxxx 这样的 才对 所以就修改了下 好了 终于是好了

中间其实心态就有点崩了的。。。。。完完全全是懵逼状态 还要在index.js中在去细分 all全部的 。 vuetypescript的抽离出来这就是后面要做的事情了。

其实插件上传后就很简单了的 npm i eslint-config-ysy -D 注意必须是大写的 D 小写 我试过了 啥也不是…笑话

image17.png

这就是装完的。 只要配置下 就ojbk了

不用在项目的eslintrc中去写那么多的配置了

注意点还是蛮多的 像我是喜欢在vscode中去打开终端去直接操作的。 尴尬的事情就是 我要来回的切换编辑器才能操作终端.

image19.png

永远的神! 敬上

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享