让前端代码美观规范：ESLint + Prettier + Git Husky指南
2023-11-01 21:10:47
前端项目代码规范的搭建-eslint+prettier+git husky
前言
无规则，不成方圆，套在前端来说也适用。在一个前端工程里，每个人的编码习惯，风格，ide等不同，如果不对代码进行有效的规范，那提交的代码就会非常别具特色。
因此，我们需要在自动化层面就定义好规范，这个规范包括：代码风格、代码规范等。
ESLint
ESLint是一个静态代码分析工具，可以帮助你发现并修复JavaScript代码中的错误。它可以检查代码的语法、风格和一些常见的问题，比如未定义的变量、未使用的变量、拼写错误等。
ESLint的安装非常简单，可以使用npm或yarn安装：
npm install eslint --save-dev
安装完成后，需要创建一个.eslintrc文件来配置ESLint。这个文件可以放在项目根目录或src目录下。
{
"extends": ["eslint:recommended"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"],
"no-console": "error"
}
}
在这个文件中，你可以配置ESLint的规则。比如，上面的配置表示代码中必须使用分号、必须使用双引号、禁止使用console.log()。
配置完成后，就可以使用ESLint来检查代码了。可以使用命令行工具或IDE插件来检查代码。
Prettier
Prettier是一个代码格式化工具，可以帮助你自动格式化JavaScript代码。它可以将代码格式化为一致的风格，这样看起来更美观，也更容易阅读。
Prettier的安装也非常简单，可以使用npm或yarn安装：
npm install prettier --save-dev
安装完成后，需要创建一个.prettierrc文件来配置Prettier。这个文件可以放在项目根目录或src目录下。
{
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 80
}
在这个文件中，你可以配置Prettier的规则。比如，上面的配置表示代码中必须使用单引号、必须在对象和数组的最后一个元素后面添加逗号、代码的宽度不能超过80个字符。
配置完成后，就可以使用Prettier来格式化代码了。可以使用命令行工具或IDE插件来格式化代码。
Git Husky
Git Husky是一个Git钩子工具，可以让你在提交代码之前执行一些任务。比如，你可以使用Git Husky来检查代码的质量，修复代码中的错误，或者格式化代码。
Git Husky的安装也非常简单，可以使用npm或yarn安装：
npm install husky --save-dev
安装完成后，需要创建一个.huskyrc文件来配置Git Husky。这个文件可以放在项目根目录下。
{
"hooks": {
"pre-commit": "npm run lint && npm run prettier"
}
}
在这个文件中，你可以配置Git Husky的钩子。比如，上面的配置表示在提交代码之前，会先执行npm run lint和npm run prettier命令。
配置完成后，就可以使用Git Husky来检查代码的质量，修复代码中的错误，或者格式化代码了。
最佳实践
在使用ESLint、Prettier和Git Husky时，有一些最佳实践可以遵循：
- 将ESLint、Prettier和Git Husky集成到你的开发工作流中，以便在每次提交代码之前自动检查代码的质量、修复代码中的错误和格式化代码。
- 使用ESLint和Prettier的推荐配置，这样可以确保代码的风格和质量符合业界标准。
- 定期更新ESLint和Prettier的规则，以便使用最新的规则来检查代码。
- 与团队成员分享ESLint、Prettier和Git Husky的配置，以便团队成员都能使用相同的规则来检查和格式化代码。
结语
ESLint、Prettier和Git Husky是前端开发者必备的工具。通过遵循这些工具的最佳实践，前端开发者可以提高代码质量，提高开发效率，并与团队成员保持一致的编码风格。
