Eslint:已有vue2项目添加eslint自动格式化，Eslint (standard)+ Husky + Lint-staged+prettier

原创 已于 2023-04-25 00:09:06 修改 · 5.1k 阅读 · 19
标签
#vue.js #javascript #前端
于 2023-04-20 11:53:07 首次发布
文章详细介绍了如何将eslint（使用standard标准）集成到Vue项目中，包括初始化配置、添加gitcommit时的自动检测和修复功能，以及整合prettier进行代码格式化的步骤。通过使用lint-staged和husky，能在git提交时自动触发eslint检测和prettier格式化，提升代码质量与团队协作效率。

步骤一：集成standard标准的eslint进你的项目中

首先准备一个没有加入eslint的vue项目
1.安装eslint的包
npm i eslint -D
2.初始化eslint，并生成eslint配置文件
npx eslint --init
image.png

3.依次按照问题选择自己需要的配置
你想要的怎么使用eslint？
选择第三个：检查，发现问题，并且约束代码风格
image.png
你的项目使用的是什么模块？
选择第一个，js （也就是es6模块）
image.png
你使用的项目框架为？
选择第二个vue
image.png
你的项目使用了ts吗？
选择no，没使用
image.png
你的代码运行在什么环境？
记得一定要把两个都勾上，运行在浏览器和node环境
image.png
你想为你的项目怎么定义eslint风格？
选择第一个：使用一个流行的风格指导
第二个的意思为：通过回答问题来生成你自己的风格
image.png
哪种eslint风格你想要的遵守？
选择standard风格（这里看自己的eslint倾向性了，也可以选airbnb）

最低0.47元/天 解锁文章
eslint-config-standard:标准的ESLint规则集
05-15
eslint-config-standard 标准的ESLint规则集 笔记！ 有拆分规则： 碱基 jsdoc.yml 摩卡 React 测试文件 安装 npm i --save-dev izonder/eslint-config-standard 或者 yarn add izonder/eslint-config-standard --dev 如何 只需添加.eslintrc文件： --- root: true extends: - standard 为了分别使用配置规则： --- root: true extends: - standard/rules/base.yml - standard/rules/jsdoc.yml - standard/rules/mocha.yml - standard/rules/react.yml - standard/rules/te
玩转Flutter拖拽交互——从零构建一个智能家居遥控面板
weixin_30384217的博客
05-10 598
本文详细介绍了如何使用Flutter构建一个智能家居遥控面板，通过拖拽交互实现设备控制的统一入口和布局自由。文章涵盖了Draggable和DragTarget组件的核心用法、数据模型设计、拖拽体验优化技巧以及完整实现流程，帮助开发者快速掌握Flutter拖拽交互技术，提升智能家居应用的用户体验。
【学不动系列】lint-staged 使用教程
oschina_41559824的博客
03-23 5513
当以JS格式提供配置时，可以将任务定义为一个函数，该函数将接收一个分段文件名/路径数组，并应以字符串形式返回完整的命令。也可以返回一个完整的命令字符串数组，例如当任务只支持单个文件输入时。函数可以是sync或async。示例：将文件名用单引号引起来，并在每个文件中运行一次‘**/*.js?示例：运行tsc对TypeScript文件的更改，但不传递任何文件名参数‘**/*.ts?示例：如果超过10个暂存文件，则在整个存储库上运行eslint‘**/*.js?
【源码共读】Vite 项目自动添加 eslint 和 prettier
老司机的后备箱
12-23 1072
库是一个为创建的或项目初始化和的库。该库的目的是为了让开发者在创建项目时，不需要手动配置和，而是通过库来自动配置。源码地址：根据库的，使用该库的只需要执行一行命令即可： 这里就涉及到了一个知识点，，，，这三个命令的作用是一样的，都是用来初始化一个项目的。是一个初始化项目的包名，比如就是一个初始化项目的包名;执行命令后，相当于执行命令；这里不多讲解，参考：npm init打开文件直接看，一开头就看到了下面这段代码： 一看这些名字就知道，这里是用来创建和的配置文件的，这里的就是当前项目的根目录。当然现在这些暂时
Eslint:新建vue2项目使用eslint，vue2项目eslint自动化，Eslint + standard标准+commitLint
weixin_43239880的博客
04-20 4125
新建vue2项目使用eslint，vue2项目eslint自动化，Eslint + standard标准+commitLint
Vue2老项目配置ESLint和Prettier
qq_44741577的博客
04-18 4976
接手一个老项目Vue2，由VueCli构建，需要集成一下ESLint和Prettier，保证代码规范。
Eslint:vue3项目添加eslint(standard规则)
weixin_43239880的博客
04-23 5840
1.可以看到我们自己新建的vite项目来自己添加standard规则会有各种的bug，虽然这种bug在eslint的官网都能解决，但是还是很费神的，关键还是在于eslint和vite融合的不够完美（也怪更新的太快了），不能直接初始化好了就可以用（像vue2一样）。所以总结下来的话，我认为还是在刚建立项目的时候就去添加eslint，然后使用自定义的规则来做,参考我的上一篇文章。2.另外的话，此时用npx eslint --init的方式只能添加standard规则和xo规则，并没有airbnb规则。
vue3+ts+eslint+prettier+husky+lint-staged+commitlint+commitizen+standard-version+vue-test-utils+jest
xuan的博客
09-05 527
git cz 终端操作提示都是英文的，如果想改成中文的或者自定义这些配置选项，我们使用 cz-customizable 适配器。（5）cz-customizable 初始化项目运行如下命令使用 cz-customizable 初始化项目，注意之前已经初始化过一次，这次再初始化，需要加 --force 覆盖。
Eslint+Prettier+husky+lint-staged+standard-version 格式化规范代码，规范 git 检测与提交信息
小超人日常码字
12-16 665
Eslint 使用 安装 # 下载，安装为开发时依赖 npm install eslint --save-dev # 初始化 npx eslint --init init 完毕之后，在项目的根目录会生成一个 eslint 的配置文件.eslintrc.{js,yml,json} 借助 eslint-config-standard的插件，它是标准的ESlint规则， 我们在项目中继承这个标准就可以了 npm install --save-dev eslint-config-standard..
终结代码混乱：GitHub_Trending/mi/mind-map的ESLint配置与规范实践指南
最新发布
gitblog_00196的博客
06-11 404
你是否还在为团队协作中的代码风格不一致而烦恼？是否经常在调试时因格式问题浪费时间？本文将系统解析GitHub_Trending/mi/mind-map项目的ESLint配置方案，带你掌握从环境搭建到规则定制的全流程，让代码质量提升300%。读完本文你将获得： - 项目双目录ESLint配置对比分析 - 实用规则定制案例与修复技巧 - 自动化校验与格式化工作流搭建 - 基于真实场景的问题排查指南
Vue2项目中配置ESLint和Prettier
dreamingbaobei的博客
05-17 1万+
ESLint是js代码的质量检查工具，同时也具备一定的代码风格的格式化能力。 Prettier是一个代码风格的约束工具，Prettier能约束JS、JSX、TypeScript、Vue、CSS、Less、SCSS、HTML、JSON、Markdown等代码风格。 由于ESLint定义了一些js的代码格式化的约束，导致其与Prettier存在一些冲突。 如： ESLint默认语句结尾不加分号，Prettier默认语句结尾加分号； ESLint默认强制使用单引号，Prettier默认使用双引号； ESLint.
全局配置Eslint实现Standard标准，以遍在各个Vue项目通用
viogami的博客
10-09 2973
**本文将介绍全局eslint配置，实现standard标准，使得在之后用Vue-cil创建项目时可以不配置代码检查，减小项目体积**
第四步 Vue2 配置ESLint
mebell的专栏
09-18 2900
ESLint 是一个广泛使用的 JavaScript 代码检查工具，可以帮助开发者在编写代码时发现并修复潜在的问题和错误。在时虽然已经选择了包含 ESLint 预设配置，但还需要做一些调整，让我们使用起来能够更加的丝滑。
关于提交git出现“lint-staged“报错
热门推荐
kana_yonk的博客
11-10 2万+
关于提交推送git出现"lint-staged"报错的解决办法
前端代码规范
gary的博客
08-15 7395
使用两个空格进行缩进。 eslint: indent function hello (name) { console.log('hi', name) } 除需要转义的情况外，字符串统一使用单引号。 eslint: quotes console.log('hello there') $("") 不要定义未使用的变量。 eslint: no-unused-va
vue2旧项目引入husky+lint-staged配置代码提交规范
tan47325的博客
10-21 1429
vue2旧项目引入husky+lint-staged配置代码提交规范
vue2+ eslint + prettier代码风格统一
weixin_51353891的博客
04-10 755
接手一个vue2 老项目发现项目格式化失效，重新配置eslint + prettier 保持代码风格统一。
vue2---自定义指令以及ESLint代码检查工具
厚积薄发.
07-28 1341
vue2学习之自定义指令，私有自定义指令，全局自定义指令，ESLint 代码检查工具的安装以及配置使用
使用 Eslint & standard 规范前端代码
weixin_30314631的博客
09-25 641
前言 JavaScript的动态语言类型，给它带来了独特的魅力，产生了风格多样的开发范式，同时也带来了一些问题，从运行时常见的 undefined 、null 报错，到代码随意的加减分号、换行、空格，引起的视觉混乱，如果是团队开发，则这种情况会更加的严重，必须加以约束，下文介绍基于 vue 的代码严格模式及编程规范。 核心插件：Eslint+standard Eslin...
lint-staged === Git提交前的自动化代码检查工具
每天都要努力学习哦~~
02-07 2617
目录什么是 lint-staged？为什么使用 lint-staged？核心功能1. 只对暂存区文件运行检查2. 与 husky 集成安装和配置1. 安装依赖2. 初始化 husky 配置3. 配置 lint-staged4. 配置 husky 钩子进阶配置1. 多个文件类型2. 运行自定义命令3. 对多个文件同时运行多个命令4. 缓存机制常见问题与解决方案1. 检查命令未生效2. 命令执行失败3. 如何禁用某些文件检查优势小贴士 是一个用于在 Git 暂存区的文件上运行代码检查（linting）工具的工具
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值