eslint和 stylelint基于vscode编辑器进行配置
一、eslint
vscode安装插件:eslint插件 prettier-code-formatter插件
全局安装eslint插件:sudo npm install eslint -g
初始化.eslintrc.js:eslint —init 根据提示指定
配置.eslintrc.js文件 ,定制化规则 rules: 参看 List of available rules - ESLint中文
1.
2.
3.
4.
5.
6.
7.
8.
9.等等按照个人喜好开始搭建..
5.测试配置是否生效 :比如说你rules里面配置的有:'no-var' : 2, // 不允许使用var ,写个var声明变量看好不好使,好使就成功了
二、stylelint样式规范
项目本地安装 npm install --save-dev stylelint stylelint-config-standard
手动添加 .stylelintrc.json(或者)文件
配置.stylelinttrc.json文件:
{
"extends": "stylelint-config-standard",
"rules": {
"unit-no-unknown":null,
"indentation": "tab",
"color-hex-case": "lower",
"color-hex-length":"long",
"max-empty-lines": 2,
"declaration-property-unit-whitelist":{
"unprefixed-property-name": ["em", "rem", "%", "s", "px", "upx","rpx"]
},
"unit-whitelist": ["em", "rem", "%", "s", "px", "upx","rpx"],
"number-leading-zero": "never",
"font-family-name-quotes":"always-where-required",
"declaration-colon-space-after":"always",
"declaration-block-no-duplicate-properties":true,
"selector-class-pattern":"^([a-z][a-z0-9]*)(_[a-z0-9]+)*$"
}
}
根据需要定制化rules
-参看- [stylelint官网](https://stylelint.io/user-guide/rules/)
- [GitHub styleline](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md)
测试配置是否生效:比如设置了类名规范 "selector-class-pattern":"^([a-z][a-z0-9]*)(_[a-z0-9]+)*$"//类名规范 snake_case下划线链接,类名必须是下划线链接
三、git提交规范检测
#相关插件 上面装过的不需要重复装了
eslint
stylint
husky
premitter
lint-staged
@commitlint/cli
@commitlint/config-conventional
commitizen
cz-conventional-changelog
conventional-changelog-cli
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"npx eslint -c .eslintrc.js --fix",
"git add"
],
"src/**/*.{css,less}": [
"npx stylelint --config stylelint.config.js --fix",
"git add"
]
}
上面的 commit-msg 需要在package.json里面配置 这代表提交的时候 git commit -m 后面的描述规范 需要写成 git commit -m 'feat: 我做了什么',注意:冒号:后面有空格,如果不按照这个格式提交也是不成功的
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog",
"types": {
"feat": {
"description": "我开发了一个功能"
},
"fix": {
"description": "我修复了代码逻辑的异常"
},
"test": {
"description": "我更新了单元测试相关的代码"
},
"chore": {
"description": "我修改了除src和test目录以外的文件"
},
"lint": {
"description": "我修复了代码检测出来的异常"
}
}
}
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
],
"rules": {
"type-enum": [
2,
"always",
[
"feat",
"fix",
"test",
"chore",
"lint"
]
]
}
},
注意 husky给git添加hooks必须在有个.git文件夹以后,可以查看.git文件里面是否安装成功,是否多了不git钩子,非.sample结尾的文件,有的话就挂成功了 注意查看husky版本号
配置package.json文件 如果安装了stylelint,以less文件为例,可以配置”*.less“相关
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,vue}": [
"eslint --fix",
"prettier --write",
"git add"
],
"*.less": [
"stylelint --syntax=less"
]
}
在git commit -m ’XXXX‘的时候会进行规则检验,和编辑器里面报错一样的那就成功啦
版本控制工具
依赖包:
semver 版本更新工具
minimist node命令后面参数获取工具
execa 脚本执行工具
inquirer 终端问询写入工具
vscode为开发工具 安装插件为Prettier - Code formatter,并且在目录下面新增.vscode文件里面settings.json文件用于配置该项目自己的vscode配置 主要是配合该插件进行校验相关的
{
"editor.formatOnPaste": false,
"editor.formatOnSave": false,
"javascript.validate.enable": false,
"typescript.validate.enable": false,
"typescript.tsdk": "node_modules/typescript/lib",
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"html.validate.scripts": false,
"html.validate.styles": false,
"editor.tabSize": 2,
"eslint.options": {
"configFile": ".eslintrc.js",
"ignorePath": ".eslintignore"
},
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html" ],
"stylelint.enable": true,
"stylelint.autoFixOnSave": true,
"stylelint.allowEmptyInput": true,
"stylelint.configFile": "stylelint.config.js",
"stylelint.ignorePath": ".stylelintignore",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"files.associations": {
"*.css": "postcss"
}
}
完整的package.json
{
"name": "test-ci",
"version": "1.0.1-0",
"description": "test for CI in gitLab",
"main": "src/index.js",
"scripts": {
"dev": "webpack-dev-server --open --mode development --port 9000",
"test": "node ./src/index.js",
"build": "webpack --mode production",
"release": "node scripts/release.js",
"lint-staged": "lint-staged"
},
"repository": {
"type": "git",
"url": "git+ssh://git@gitlab.com//test-ci.git"
},
"keywords": [
"CI"
],
"author": "myh",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/XXX/test-ci/issues"
},
"homepage": "https://gitlab.com/XXX/test-ci#readme",
"devDependencies": {
"@babel/core": "^7.13.16",
"@babel/eslint-parser": "^7.13.14",
"@babel/plugin-transform-runtime": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"@babel/runtime-corejs3": "^7.13.17",
"@commitlint/cli": "^12.1.1",
"@commitlint/config-conventional": "^12.1.1",
"@webpack-cli/init": "^1.1.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"commitizen": "^4.2.3",
"conventional-changelog-cli": "^2.1.1",
"core-js": "^3.11.1",
"css-loader": "^5.2.4",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^7.25.0",
"eslint-config-standard": "^16.0.2",
"eslint-config-standard-jsx": "^10.0.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"execa": "^5.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^3.2.0",
"husky": "^2.4.0",
"inquirer": "^8.0.0",
"lint-staged": "^7.3.0",
"minimist": "^1.2.5",
"semver": "^7.3.5",
"style-loader": "^2.0.0",
"stylelint": "^13.13.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-csstree-validator": "^1.9.0",
"stylelint-scss": "^3.19.0",
"stylint": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.7.3"
},
"browserslist": [
"Chrome >= 35",
"ChromeAndroid >= 35",
"iOS >= 8",
"Safari >= 8",
"Android >= 4.1",
"QQAndroid >= 4.1",
"UCAndroid >= 4.1"
],
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog",
"types": {
"feat": {
"description": "我开发了一个功能"
},
"fix": {
"description": "我修复了代码逻辑的异常"
},
"test": {
"description": "我更新了单元测试相关的代码"
},
"chore": {
"description": "我修改了除src和test目录以外的文件"
},
"lint": {
"description": "我修复了代码检测出来的异常"
}
}
}
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
],
"rules": {
"type-enum": [
2,
"always",
[
"feat",
"fix",
"test",
"chore",
"lint"
]
]
}
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"npx eslint -c .eslintrc.js --fix",
"git add"
],
"src/**/*.{css,less}": [
"npx stylelint --config stylelint.config.js --fix",
"git add"
]
}
}
————————————————
版权声明:本文为CSDN博主「fighting_sunnyGirl」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/fighting_sunnyGirl/article/details/109404006