eslint+prettier+husky+lint stage

为避免生产故障,提升代码质量,文章提出使用ESLint结合airbnb的配置规则来实现代码规范自动化检查和格式化。通过安装并配置ESLint插件,可以确保团队遵循统一的编码风格,并减少冗余代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:
工欲善其事必先利其器,你是否跟我一样 写了很久的代码 却没有任何代码约束 导致一些细枝末节没注意到,酿成了一场场生产故障?又或是看到别人的代码写的很高级 ,很优雅 没有拖泥带水,没有任何的冗余代码?你有注意到了问题 你注意到了自身存在的问题 可你是否着手解决了呢?

终极目标:

团队中的所有开发人员用一套代码规范规则,并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具,帮我们检测代码是否规范,如果不规范,则自动能够帮我们按照既定规范格式化。
为了解决以上问题,我们就需借鉴别人优秀的工具为我所用
参考连接:https://zhuanlan.zhihu.com/p/549710463
步骤:
若是老项目则在项目中新建以下几个文件

![在这里插入图片描述](https://img-blog.csdnimg.cn/d9a313978b444565a72deeaa9af17833.png

比较好的eslint规则配置参考
在这里插入图片描述
npm install eslint-plugin-jsx-a11y --save-dev
npm install eslint-plugin-import --save-dev
npm install eslint-config-airbnb --save-dev
配置文件.eslintrc.js中添加

extends: ‘airbnb’,

{ "name": "ktg-mes-ui", "version": "3.8.2", "description": "苦糖果MES", "author": "YinJinLu", "license": "MIT", "scripts": { "dev": "vue-cli-service serve", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode staging", "preview": "node build/index.js --preview", "lint": "eslint --ext .js,.vue src" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ] }, "keywords": [ "vue", "admin", "dashboard", "element-ui", "boilerplate", "admin-template", "management-system" ], "repository": { "type": "git", "url": "https://gitee.com/kutangguo/ktg-mes-ui.git" }, "dependencies": { "@dhtmlx/gantt-vue": "^1.0.0", "@riophae/vue-treeselect": "0.4.0", "axios": "0.24.0", "clipboard": "2.0.8", "core-js": "^3.21.1", "dhtmlx-gantt": "^7.1.11", "echarts": "4.9.0", "element-ui": "2.15.6", "file-saver": "2.0.5", "fuse.js": "6.4.3", "highlight.js": "9.18.5", "html2canvas": "^1.4.1", "js-beautify": "1.13.0", "js-cookie": "3.0.1", "jsencrypt": "3.0.0-rc.1", "nprogress": "0.2.0", "quill": "1.3.7", "screenfull": "5.0.2", "sortablejs": "1.10.2", "vue": "2.6.12", "vue-count-to": "1.0.13", "vue-cropper": "0.5.5", "vue-meta": "2.4.0", "vue-plugin-hiprint": "0.0.60", "vue-router": "3.4.9", "vuedraggable": "2.24.3", "vuex": "3.6.0" }, "devDependencies": { "@vue/cli-plugin-babel": "4.4.6", "@vue/cli-plugin-eslint": "4.4.6", "@vue/cli-service": "4.4.6", "babel-eslint": "10.1.0", "babel-plugin-dynamic-import-node": "2.3.3", "chalk": "4.1.0", "compression-webpack-plugin": "5.0.2", "connect": "3.6.6", "eslint": "7.15.0", "eslint-plugin-vue": "7.2.0", "html-webpack-plugin": "^5.5.0", "less": "^4.2.0", "less-loader": "^11.1.3", "lint-staged": "10.5.3", "runjs": "4.4.2", "sass": "1.32.13", "sass-loader": "10.1.1", "svg-sprite-loader": "5.1.1", "vue-loader": "^16.0.0", "vue-template-compiler": "2.6.12" }, "engines": { "node": ">=8.9", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions" ] }
07-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值