配置eslint+prettier+husky+lint-staged(pnpm版)，打造代码整洁的世界
2022-12-29 22:10:06
代码格式化利器：使用 ESLint 和 Prettier 提升代码质量和开发效率
在纷繁复杂的编程世界中，我们每天都要与代码打交道。为了让代码井井有条，提高开发效率和代码质量，我们需要一些得心应手的工具。其中，ESLint 和 Prettier 便脱颖而出，成为前端开发者的必备利器。
ESLint：代码质量的卫士
ESLint 是一款强大的静态代码分析工具，就像代码的监察者，时刻检视你的代码，寻找语法错误、风格问题和最佳实践违规。它会细心捕捉代码中的蛛丝马迹，比如缺少分号、括号不匹配、变量未定义等，并及时向你发出警报。通过 ESLint 的帮助，我们可以有效发现并纠正代码中的问题，提升代码的可靠性和可维护性。
Prettier：代码风格的魔法师
Prettier 则是一位代码格式化的魔术师，能够自动将代码格式化为一致的风格，让你的代码赏心悦目。它支持多种编程语言，包括 JavaScript、TypeScript、Vue 等，为你提供了一套优雅而统一的代码规范。无论你是在团队协作还是独自开发，Prettier 都能确保代码整齐划一，清晰易读，从而提高代码的可读性和协作效率。
携手并进：代码规范的黄金组合
ESLint 和 Prettier 联袂出场，形成代码规范的黄金组合，为你的开发保驾护航。ESLint 负责揪出代码中的瑕疵，而 Prettier 则负责让代码焕发光彩。通过这两个工具的配合，你可以轻松打造高质量、规范统一的代码，让你的开发工作事半功倍。
配置步骤：为你的项目注入魔法
1. 安装依赖
pnpm install --save-dev eslint prettier husky lint-staged
2. 创建 .eslintrc.js 文件
{
"extends": ["eslint:recommended", "plugin:vue/essential"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"],
"no-trailing-spaces": ["error"],
"vue/html-self-closing": ["error", "always"],
"vue/max-attributes-per-line": ["error", { "singleline": 3, "multiline": { "max": 1 } }]
}
}
3. 创建 .prettierrc.js 文件
{
"semi": true,
"singleQuote": false,
"trailingComma": "es5"
}
4. 创建 .huskyrc.js 文件
module.exports = {
hooks: {
"pre-commit": "lint-staged"
}
};
5. 创建 .lintstagedrc.js 文件
module.exports = {
"*.js": ["eslint --fix", "prettier --write"],
"*.vue": ["eslint --fix", "prettier --write"]
};
使用方法：让代码焕然一新
在项目根目录下运行以下命令，即可让 ESLint 和 Prettier 大显身手：
pnpm run lint
如果代码中存在问题，ESLint 会输出详细的错误信息，指导你修改代码。而 Prettier 则会默默无闻地将代码格式化为符合规范的样式。
优点：代码规范的福音
使用 ESLint 和 Prettier，你的代码将迎来脱胎换骨的变化，享受如下好处：
- 提高代码质量： ESLint 严防死守，帮你揪出代码中的隐患，提高代码的可靠性和可维护性。
- 提高开发效率： Prettier 自动格式化代码，让你专注于逻辑和功能，解放双手，提升开发效率。
- 统一代码风格： ESLint 和 Prettier 联手打造统一的代码规范，让团队协作更顺畅，代码的可读性和维护性更强。
- 减少代码冲突： 统一的代码风格有助于减少代码冲突，让团队协作更加高效和谐。
结语：代码规范的航海图
ESLint 和 Prettier 是代码规范的航海图，为你指引前进的方向，让你的代码之路波澜不惊，顺利抵达代码质量和开发效率的彼岸。强烈推荐各位开发者在自己的项目中使用这两个利器，让你的代码焕发光彩，成为代码规范的典范。
常见问题解答
1. ESLint 和 Prettier 有什么区别？
ESLint 是一款静态代码分析工具，专注于代码质量，而 Prettier 是一款代码格式化工具，专注于代码风格。
2. 为什么需要同时使用 ESLint 和 Prettier？
ESLint 负责发现代码中的问题，而 Prettier 负责格式化代码的样式。两者结合使用，可以全面提升代码质量和可读性。
3. 如何配置 ESLint 和 Prettier？
通过创建 .eslintrc.js、.prettierrc.js、.huskyrc.js 和 .lintstagedrc.js 文件，可以配置 ESLint 和 Prettier 的规则和选项。
4. 如何使用 ESLint 和 Prettier？
在项目根目录下运行 "pnpm run lint" 命令，即可触发 ESLint 和 Prettier 的检查和格式化。
5. 使用 ESLint 和 Prettier 有什么好处？
提高代码质量、提高开发效率、统一代码风格、减少代码冲突。
