0.0.2 • Published 3 years ago
guanglong-lint v0.0.2
Guanglong-lint 创建及使用流程
1、新建 Guanglong-lint 文件夹，添加.gitignore
2、在 Guanglong-lint 目录下执行：npm init -y
3、在 package.json 中添加以下配置
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"repository": {
"type": "git",
"url": "git@gitee.com:guanglonglove/guanglong-lint.git"
},
"dependencies": {
"@babel/eslint-parser": "^7.14.9",
"@commitlint/cli": "^13.1.0",
"@commitlint/config-conventional": "^13.1.0",
"concurrently": "^6.2.0",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^7.14.0",
"husky": "^4.2.5",
"lint-staged": "^10.5.4",
"lodash": "^4.17.21",
"stylelint": "^13.13.1",
"stylelint-config-recess-order": "^2.4.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.20.1",
"watch": "^1.0.2"
},
"devDependencies": {
"conventional-changelog-cli": "^2.1.1"
}
并修改 name、description、author
4、在 git bash 中执行 npm install，因为配置了husky在powershell中执行会报错：husky > Failed to install
5、新建 templates 文件夹、新建 templates/package.json、templates/.editorconfig（代码编辑器的配置可不要）
注意 templates/package.json 中需要配置 guanglong-lint 相关的lint配置文件
6、新建 guanglong-lint 关联配置文件：.eslintrc.js & .stylelintrc.js & .commitlintrc.js
7、创建自定义命令：
新建bin文件夹，创建cli.js
cli.js文件开头使用 #!/usr/bin/env node 表示让node解释此文件中的脚本程序，下面就可以使用node语法写程序了
如 process.cwd(); 就是node语法
注意 cli.js 中的第8行，因为guanglong-lint打包后放在node_modules/guanglong-lint/ 下，所以写为 ../../../
8、将bin添加到package.json中去：
"bin": {
"guanglonglint": "./bin/cli.js" //告诉package.json,我的bin叫guanglonglint,它可执行的文件路径是bin/cli.js
},
9、添加安装 guanglong-lint 包后自动执行的命令：
package.json 中 scripts 添加 "postinstall": "guanglonglint"
postinstall用来设置npm包安装后的脚本处理
7、修改成可发布的npm包：
package.json中：
* 修改版本号version为 0.0.1
* 删除private:true
* 添加"main":"index.js" 并新建 Guanglong-lint/index.js
最后 npm publish 发布到npm； 注意：nrm use npm 切换到 npm 库
8、测试guanglong-lint
* vue create lint-test 注意创建时：选择 Manually select features
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
* 下一步时，把Linter / Formatter 去掉勾选
* 下一步时，选择 In dedicated config files
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
* 安装完后启动 cd lint-test -> npm run serve 正常启动
* 检查lint-test/package.json 中没有lint 相关内容
{
"name": "lint-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
}
}
* 安装guanglong-lint：npm i -D guanglong-lint 安装成功可看到 +guanglong-lint@0.0.x
此时可以看到 新增了.editorconfig 文件及 lint-test/package.json文件新增了 scripts 中内容、husky、lint-staged 等
{
"name": "lint-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "concurrently \"npm run serve\" \"npm run lintwatch -s\"",
"eslint": "eslint --config node_modules/guanglong-lint/.eslintrc.js --ext .js,.vue --fix",
"stylelint": "stylelint --config-basedir ./ --config node_modules/guanglong-lint/.stylelintrc.js --fix",
"lint": "npm run -s eslint src/ && npm run -s stylelint src/",
"lintwatch": "watch \"npm run lint\" src/"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"guanglong-lint": "0.0.1",
"vue-template-compiler": "^2.6.11"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint --config node_modules/guanglong-lint/.commitlintrc.js -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"npm run -s eslint"
],
"src/**/*.{scss,less,css,vue}": [
"npm run -s stylelint"
]
}
}