eslint.org/docs/develo…
selint 可共享配置介绍;
我接到这个小需求的时候是懵逼的 ,我是一个前端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"
}
复制代码
根据官网上的流程,我从新创建了一个index.js在目录里。官网上的demo是这样的 globals 全局变量 。 rules 里面是项目规则总结下,就是直接复制了我们先有项目的eslint的配置全部的粘贴过来。 我以为这样就可以了的
在没有经验的情况下,就已经开始走向死胡同了的。开始乱在网上找方法了的,开始上传到我们的git仓库里了,npm publish 发布包 。
首先是npm adduser 依照这个命令去操作了 npm库 在注册了npm后 有username password email 等操作 不知道怎么就发布到我们公司私有的git仓库去了。
一身汗的跟主管说了下 我把eslint的包发到我们私有的git上了。 一顿操作。。。
说了只用在自己本地去跑就好了 然而我还是没有注意到官网上npm link 的使用
也是后来问了主管才知道 在自己创建的插件里执行
npm link
官方说的是,对于安装你自己的东西很方便,这样就可以对其进行处理和迭代测试,而无需不断重建
也就是对于你本地开发的东西会很便捷。
在包文件夹中将全局文件夹 /usr/local/mode_modules/xxxxxxx . 中创建一个符号链接。
该符号(xxxxxxx)接到npm link执行命令的包。它还会将包中的任何…哇哩哇啦后面读不懂了 中文也看不懂的那种;
等于说,你在本地另外一个项目中要去跑这个eslint插件的时候要 npm link ‘xxxxxxxxxx’ 去跟你插件的 npm link做链接;
拿到插件名这样去做链接 这样你项目就跟插件的eslint绑定成功了的;
项目中的.eslintrc.js
中就可以不用配置参数了,
module.exports
返回全局共享的变量或者方法。
const path = require
(“path”) . 这是抛出方法。
我比较白一点,一直看官网上的引用是这个样子的
我也就写成了
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:你过来下,跟我说了说怎么装依赖 要装哪些… 好的没看清楚…
好的呢,代码都直接copy过来了…
又开始懵逼了 到底是 devDependencies 里呢 还是 dependencies 里呢 我懵逼。。。 谷歌翻译下属实水平有限
开发依赖 dev… 依赖 dependencies… 懵逼了啊。
胆怯的问 我们这个是要装 开发依赖呢 还是 依赖呢…忘记怎么说了
反正就是最后我又弄叉劈了而已。。。
无奈的很。。上火啊
而我对于npm的报错 都是懵逼的
哎 就是玩
咱就谷歌翻译下呗 。 看不懂什么跟什么啊
依赖有问题咱就 npm i
我去 。 npm i
不行 咱就 cnpm i
还不行!!! 删了node_modules
我从头再来~
一顿瞎复制啊 。
我要装依赖啊 。
之前是不知道装什么 找了个新创建的vue项目找到package.json
哎呀 似曾相识的样子,长度也是那么的像 就它了。先弄过来再说
完了完了 铁定被说了 。 很对 这是个what??不可思议的东西 。 就跟我解释了下 我要取什么东西 大体围绕着 vue
eslint
还有typescript
这三个
阿西吧~ 成功就在眼前了的 。 加油啊 老铁
npm link eslint-config
跑起来~ run
完了 没效果。。。
取消更改,nice 完美运行。。。 换上我本地插件就完了????? 一百个问号
发现问题。。 在创建的index.js
文件中 保存的时候 双引号 会被自动格式化为单引号…(A发现的)
我尼玛? vscode作怪 settings.json
配置中
当然我没有去改我的settings配置而是创建了
.eslintignore
文件 忽略特定的文件和目录 good!
别格式化我的文件内容
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全部的 。 vue
的typescript
的抽离出来这就是后面要做的事情了。
其实插件上传后就很简单了的 npm i eslint-config-ysy -D
注意必须是大写的 D 小写 我试过了 啥也不是…笑话
这就是装完的。 只要配置下 就ojbk了
不用在项目的eslintrc
中去写那么多的配置了
注意点还是蛮多的 像我是喜欢在vscode中去打开终端去直接操作的。 尴尬的事情就是 我要来回的切换编辑器才能操作终端.
永远的神! 敬上