Eleventy终极代码质量工具链：ESLint、Prettier与Git Hooks完整配置指南

Eleventy终极代码质量工具链：ESLint、Prettier与Git Hooks完整配置指南

【免费下载链接】eleventyA simpler site generator. Transforms a directory of templates (of varying types) into HTML.项目地址: https://gitcode.com/gh_mirrors/el/eleventy

Eleventy作为一款简单高效的静态站点生成器，能够将各种模板文件转换为HTML网页。为了确保项目代码的高质量和一致性，配置完善的代码质量工具链至关重要。本文将详细介绍如何为Eleventy项目配置ESLint、Prettier与Git Hooks工具链，帮助开发者轻松实现代码规范检查、自动格式化和提交前验证。

为什么需要代码质量工具链？

在多人协作或大型项目中，代码风格不一致、潜在的语法错误和不规范的提交信息等问题会严重影响开发效率和代码可维护性。通过集成ESLint、Prettier和Git Hooks，我们可以：

• 自动检测代码错误：ESLint能够在开发过程中实时发现并提示语法错误、潜在的逻辑问题和不符合编码规范的代码。
• 统一代码风格：Prettier可以自动格式化代码，确保团队成员使用一致的代码风格，减少因格式问题引起的不必要争论。
• 规范提交信息：Git Hooks可以在代码提交前对提交信息进行验证，确保提交信息清晰、规范，便于后续代码审查和版本回溯。

图：代码质量工具链就像忠诚的守护者，默默守护着项目代码的质量

环境准备

在开始配置之前，请确保你的开发环境中已经安装了Node.js和npm。如果尚未安装，可以从Node.js官方网站下载并安装。

首先，克隆Eleventy项目仓库：

git clone https://gitcode.com/gh_mirrors/el/eleventy cd eleventy

然后，安装项目依赖：

npm install

ESLint配置

ESLint是一款强大的JavaScript代码检查工具，可以帮助我们发现代码中的问题并保持代码风格的一致性。

安装ESLint

在项目根目录下执行以下命令安装ESLint及其相关插件：

npm install eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise --save-dev

创建ESLint配置文件

在项目根目录下创建.eslintrc.js文件，并添加以下内容：

module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', 'plugin:import/recommended', 'plugin:node/recommended', 'plugin:promise/recommended' ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, plugins: [ 'import', 'node', 'promise' ], rules: { 'indent': ['error', 2], 'linebreak-style': ['error', 'unix'], 'quotes': ['error', 'single'], 'semi': ['error', 'always'], 'no-console': 'warn', 'import/no-unresolved': 'error', 'node/exports-style': ['error', 'module.exports'], 'node/file-extension-in-import': ['error', 'always'], 'node/prefer-global/buffer': ['error', 'always'], 'node/prefer-global/console': ['error', 'always'], 'node/prefer-global/process': ['error', 'always'], 'node/prefer-global/url-search-params': ['error', 'always'], 'node/prefer-global/url': ['error', 'always'], 'node/prefer-promises/dns': 'error', 'node/prefer-promises/fs': 'error', 'promise/always-return': 'error', 'promise/no-return-wrap': 'error', 'promise/param-names': 'error', 'promise/catch-or-return': 'error', 'promise/no-native': 'off', 'promise/no-nesting': 'warn', 'promise/no-promise-in-callback': 'warn', 'promise/no-callback-in-promise': 'warn', 'promise/avoid-new': 'warn', 'promise/no-new-statics': 'error', 'promise/no-return-in-finally': 'warn', 'promise/valid-params': 'warn' } };

添加ESLint脚本

在package.json文件中添加以下脚本：

"scripts": { "lint": "eslint .", "lint:fix": "eslint . --fix" }

现在，你可以通过运行npm run lint命令来检查代码中的问题，通过npm run lint:fix命令自动修复一些可修复的问题。

Prettier配置

Prettier是一款专注于代码格式化的工具，它可以自动调整代码的缩进、空格、换行等格式，确保代码风格的一致性。

安装Prettier

执行以下命令安装Prettier及其相关插件：

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

创建Prettier配置文件

在项目根目录下创建.prettierrc.js文件，并添加以下内容：

module.exports = { printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, quoteProps: 'as-needed', jsxSingleQuote: false, trailingComma: 'es5', bracketSpacing: true, jsxBracketSameLine: false, arrowParens: 'always', rangeStart: 0, rangeEnd: Infinity, requirePragma: false, insertPragma: false, proseWrap: 'preserve', htmlWhitespaceSensitivity: 'css', vueIndentScriptAndStyle: false, endOfLine: 'lf', embeddedLanguageFormatting: 'auto', singleAttributePerLine: false };

更新ESLint配置

为了避免ESLint和Prettier之间的规则冲突，需要更新.eslintrc.js文件，添加Prettier相关配置：

module.exports = { // ... 其他配置 extends: [ 'eslint:recommended', 'plugin:import/recommended', 'plugin:node/recommended', 'plugin:promise/recommended', 'plugin:prettier/recommended' // 添加此行 ], // ... 其他配置 };

添加Prettier脚本

在package.json文件中添加以下脚本：

"scripts": { // ... 其他脚本 "format": "prettier --write ." }

现在，你可以通过运行npm run format命令来自动格式化项目中的所有文件。

Git Hooks配置

Git Hooks可以在代码提交、推送等操作前执行自定义脚本，帮助我们在代码提交前进行代码检查和格式化，确保提交的代码符合项目规范。

安装husky和lint-staged

执行以下命令安装husky和lint-staged：

npm install husky lint-staged --save-dev

配置husky

在package.json文件中添加以下配置：

"husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "node scripts/verify-commit-msg.js" } }, "lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write" ], "*.{json,md,yml}": [ "prettier --write" ] }

创建提交信息验证脚本

在项目根目录下创建scripts/verify-commit-msg.js文件，并添加以下内容：

const fs = require('fs'); const path = require('path'); const msgPath = path.resolve('.git/COMMIT_EDITMSG'); const msg = fs.readFileSync(msgPath, 'utf-8').trim(); const commitRE = /^(feat|fix|docs|style|refactor|perf|test|build|ci|chore|revert)(\(.+\))?: .{1,50}/; if (!commitRE.test(msg)) { console.error('\n ERROR: commit message format is invalid!'); console.error(' Please follow the format: <type>(<scope>): <subject>'); console.error(' Type can be: feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert'); process.exit(1); }

集成到开发流程

现在，我们已经完成了ESLint、Prettier和Git Hooks的配置。将这些工具集成到日常开发流程中，可以有效提高代码质量和开发效率。

开发过程中

在开发过程中，你可以使用编辑器的ESLint和Prettier插件，实时获取代码检查和格式化反馈。大多数主流编辑器（如VS Code、WebStorm等）都支持这些插件。

提交代码前

当你准备提交代码时，Git Hooks会自动执行以下操作：

1. pre-commit钩子会运行lint-staged，对暂存区的文件进行ESLint检查和Prettier格式化。
2. commit-msg钩子会验证提交信息是否符合规范。

如果检查或验证失败，提交将会被中止，你需要修复相关问题后重新提交。

持续集成

你还可以将这些工具集成到项目的持续集成流程中，确保每次代码推送都经过代码质量检查。例如，在package.json中添加以下脚本：

"scripts": { // ... 其他脚本 "ci": "npm run lint && npm run test" }

然后在CI配置文件中（如.github/workflows/ci.yml）添加相应的步骤，运行npm run ci命令。

总结

通过本文的介绍，你已经了解了如何为Eleventy项目配置ESLint、Prettier和Git Hooks工具链。这些工具的集成可以帮助你在开发过程中自动检测代码问题、统一代码风格并规范提交信息，从而提高代码质量和开发效率。

希望本文对你有所帮助，如果你有任何问题或建议，欢迎在项目的issue中提出。让我们一起为Eleventy项目贡献高质量的代码！

项目的官方文档可以参考docs/coverage.md，更多关于Eleventy的功能和使用方法可以查阅项目的源代码，例如src/Core.js。

【免费下载链接】eleventyA simpler site generator. Transforms a directory of templates (of varying types) into HTML.项目地址: https://gitcode.com/gh_mirrors/el/eleventy