eslint 搭配 prettier 格式化 + husky 搭配 lint-staged 实现提交格式化和检测

2024-05-09 18:11:22

eslint 搭配 prettier 格式化 + husky 搭配 lint-staged 实现提交格式化和检测

注:本文基本是写给自己看的, 属于一个记录笔记, 避免每次配置都要查, 写得不清晰, 仅供参考, 如果看了有疑问也可以在评论指出

首先默认项目已经有 eslint 检测，如果没有自行查找相关资料配置，这里重点值如何和 prettier 搭配工作

安装 prettier 包

需要依赖的包有: prettier , eslint-config-prettier, eslint-plugin-prettier

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

配置 prettierrc 和 prettierignore

.prettierrc 文件用于配置规则, .prettierignore 文件用于忽略默写不需要处理的文件或目录

prettier 规则可以查阅官方文档, 一般会配置 printWidth(单行长度), singleQuote(使用单引号), endOfLine(行尾符), indentSize(缩进长度), 以下是我的配置供参考:

.prettierrc

{"singleQuote": true,"printWidth": 120,"trailingComma": "all","arrowParens": "avoid","endOfLine": "auto","indentSize": 2,"semi": true,"alwaysParens": "avoid","htmlWhitespaceSensitivity": "ignore"
}

.prettierignore 文件一般会忽略一些打包文件(/dist/), 构建配置(/build/, /config/), node_modeles/, 测试文件(tests/), lock 文件(package-lock.json, yarn.lock), 还有一些针对 ide 的配置文件, 我的 .prettierignore 如下:

.prettierignore

/build/
/config/
/dist/
node_modules/
/.husky/tests/# 根目录下的文件
/*.js
/*.ts
/*.json# vue ts 配置
src/shims-*.d.tstypes/yarn.lock
package-lock.json# Log files
*.log
*.log.*# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

配置 eslintrc

要将 prettier 与 eslint 结合起来, 就要吧 prettier 添加到 eslint 的配置中去

{..."extends": [..."prettier",],plugins: ["prettier"]rules: ["prettier/prettier": "error",...],...
}

现在 prettier 就会随着 eslint 一起工作了, 如果需要保存是自动格式化, 需要配置编辑器的插件配置, 网上有很多教程

lint-staged

安装 lint-staged

yarn add -D lint-staged

配置 package.json

{..."script": {..."lint-staged": "lint-staged",...},..."lint-staged": {"src/**/*.{ts,js,vue,tsx,jsx}": ["eslint --fix","prettier --write","git add"]}
}

husky

yarn add husky -D
npm set-script prepare "husky install"
npm run prepare
npx husky add .husky/pre-commit npm run lint-staged

eslint 搭配 prettier 格式化 + husky 搭配 lint-staged 实现提交格式化和检测相关推荐

vue项目接入eslint、prettier、husky+lint-staged
引言在vue-cli官方的脚手架创建项目时,会自动让选择Eslint+Prettier,如果是老项目想接入,那么按照下面步骤接入即可 eslint安装 npm i -D eslint eslint- ...
eslint 保存自动格式化_代码规范之理解ESLint、Prettier、EditorConfig
授权转载自:nowThen https://juejin.cn/post/6895889063111294990 前言团队多人协同开发项目中困恼团队管理一个很大的问题是:无可避免地会出现每个开发者编 ...
更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题
更新版,之前的版本可以看这里:梳理前端开发使用eslint和prettier来检查和格式化代码问题一.问题痛点在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发.因此编写符合团队编 ...
【总结】1265- 理解 ESLint、Prettier、EditorConfig 代码规范
前言团队多人协同开发项目中困恼团队管理一个很大的问题是:无可避免地会出现每个开发者编码习惯不同.代码风格迥异,为了代码高可用.可维护性, 如何从项目管理上尽量统一和规范代码呢? [x] 文档约定 - ...
vscode的格式化工具：eslint 、 prettier、editorconfig 和 vetur
文章目录 eslint--代码检查工具 eslint的作用 eslint的配置第一步配置IDE的eslint环境第二步:配置项目中的eslint 下载对应的包 vite集成eslint Eslin ...
ESLint 和 Prettier 配合使用
CSDN 中文章不一定能及时更新,欢迎点击前往我的博客查看最新版本:许盛的博客 ESLint 是一款 Lint 工具,包含了代码质量检查等等. 而 Prettier 仅仅只是一个代码风格的约束工具,对 ...
在vscode里配置ESLint和Prettier
在vscode里配置ESLint和Prettier 文章目录在vscode里配置ESLint和Prettier vscode插件和npm包区别解决ESLint和Prettier冲突 vscode环 ...
husky配置 =＞ git 日志提交规范限制, eslint检查
1. husky 是什么 husky 是一个 Git Hook 工具.本文主要实现提交前 eslint 校验和 commit 信息的规范校验简单说就是,当我们运行 git commmit -m 'x ...
前端代码规范工具ESLint和Prettier
前端代码规范工具ESLint和Prettier 1. ESLint是什么? ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建 ...

最新文章

热门文章