Part2.前端实战漫话：前端规范化标准解读(6/6)

主流代码 Lint 工具：ESLint 与 Stylelint

代码 Lint 工具用于检查和修复代码中的潜在问题，确保代码符合预设的编码规范。以下是两种常见的 Lint 工具：ESLint 和 Stylelint。

1. ESLint

概述

ESLint 是一个用于检查 JavaScript 代码质量的工具，能够发现语法、风格和潜在的逻辑错误。它支持自定义配置并且拥有丰富的插件生态，能够针对不同的项目需求进行扩展。

特点

• 可自定义：用户可以根据项目需求自定义规则，使用 JSON 或 JavaScript 文件配置。
• 支持插件：可以通过插件扩展 ESLint 的功能，支持 React、Vue 等框架的特定规则。
• 自动修复：ESLint 支持通过命令行选项 --fix 自动修复某些问题。
• 社区支持：有大量的社区插件和共享配置，可以快速上手并应用于项目中。
• 支持 TypeScript：可以结合使用 TypeScript 进行代码检查。

安装

使用 npm 安装 ESLint：

npm install eslint --save-dev

配置

使用 CLI 快速生成配置文件：

npx eslint --init

生成的 eslint.json 配置示例：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

使用

运行 ESLint 检查指定文件：

npx eslint yourfile.js

2. Stylelint

概述

Stylelint 是一个强大的高效的 CSS Lint 工具，用于检查和修复 CSS 及预处理器语言（如 Sass、Less）的代码风格和质量。

特点

• 灵活配置：用户可以根据项目需求自定义规则，支持多种规则定义方式。
• 插件生态：支持多种插件，可以扩展功能，涵盖各种 CSS 方法和工具。
• 自动修复：通过命令行选项 --fix 自动修改一些可修复的问题。
• 团队规则共享：支持在团队之间共享配置，确保统一的代码风格。

安装

使用 npm 安装 Stylelint：

npm install stylelint --save-dev

配置

创建一个 .stylelintrc.json 配置文件：

{
  "rules": {
    "color-no-invalid-hex": true,
    "declaration-colon-space-before": "never",
    "block-no-empty": true,
    "selector-list-comma-space-before": "never"
  }
}

使用

运行 Stylelint 检查 CSS 文件：

npx stylelint "**/*.css"

总结

特性 ESLint Stylelint

适用范围	JavaScript 和 JSX	CSS 和预处理器（Sass、Less）
可扩展性	支持插件和规则自定义	支持插件和规则自定义
自动修复	支持自动修复	支持自动修复
社区支持	有大量相关插件和规则	有丰富的社区自定义规则
安装和使用	安装简单，命令行接口易用	类似于 ESLint，易于配置和使用

总之，ESLint 和 Stylelint 是前端开发中不可或缺的工具，能够帮助开发者保持代码整洁、高效并减少潜在的错误。建议在项目中根据需要灵活使用这两个工具，提升代码质量和一致性。

定制项目 / 团队专属 Lint 规则与风格

创建项目或团队专属的 Lint 规则和风格指南是确保团队开发一致性和代码质量的重要步骤。以下是如何制定和实现这些规则的步骤，以及一些具体的配置示例。

步骤

1. 确定代码风格标准

选择一个共同的编码风格标准，这可以是一些流行的标准，例如：

• JavaScript: Airbnb JavaScript Style Guide、Google JavaScript Style Guide
• CSS: CSS规范，BEM（块、元素、修饰符）命名方法
• HTML: W3C HTML规范

2. 讨论和制定规则

团队成员可以召开讨论会，商讨需要遵循的规则。这些规则可以涵盖：

• 命名规范（例如变量、函数、文件名）
• 代码格式（例如缩进、空格、行长限制）
• 注释规范（例如函数、类和复杂逻辑的注释）
• 使用和配置 ESLint 和 Stylelint 规则

3. 创建配置文件

根据所讨论的标准，创建 ESLint 和 Stylelint 配置文件。这些文件通常包括项目根目录下的 .eslintrc.json 和 .stylelintrc.json。

示例 1: ESLint 配置 (.eslintrc.json)

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "indent": ["error", 2],  // 使用2个空格缩进
        "quotes": ["error", "single"],  // 使用单引号
        "semi": ["error", "always"],  // 强制每条语句后使用分号
        "react/prop-types": "off",  // 关闭 React 的 proptypes 检查
        "no-unused-vars": ["warn"],  // 未使用变量发出警告
        "jsx-quotes": ["error", "prefer-single"]  // JSX 中使用单引号
    }
}

示例 2: Stylelint 配置 (.stylelintrc.json)

{
    "extends": "stylelint-config-standard",
    "rules": {
        "at-rule-no-unknown": [
            true,
            {
                "ignoreAtRules": ["extends", "mixins"]
            }
        ],
        "color-no-invalid-hex": true,  // 禁止无效的十六进制颜色
        "declaration-colon-space-before": "never",  // 冒号前不允许空格
        "selector-list-comma-space-before": "never",  // 逗号前不允许空格
        "block-no-empty": true,  // 禁止空块
        "indentation": 2  // 使用2个空格进行缩进
    }
}

4. 使用 Shareable Config

如果团队愿意，可以将这些配置创建成共享配置，供多个项目使用。这可以通过在 GitHub 上创建共享配置文件并在各个项目中引入，或使用 npm 包的形式发布。

5. 集成到开发流程

确保在项目开发流程中集成 Lint 工具，例如：

• 在开发环境中设置为 Git 提交钩子（使用 Husky 等工具）。
• 在 CI/CD 流程中运行 Lint 检查，确保代码在合并或部署前通过 Lint 检查。

示例：使用 Husky 进行 Git 提交钩子

1. 安装 Husky：

   npm install husky --save-dev
   

2. 在 package.json 中添加钩子：

   {
       "husky": {
           "hooks": {
               "pre-commit": "npm run lint"
           }
       }
   }
   

6. 定期更新和维护

代码风格和标准可能随着项目和团队的增长而改变，因此定期审查和更新 Lint 规则是非常重要的。可以设置周期性团队会议以讨论代码风格，并在项目文档中记录更新。

总结

通过以上步骤，您可以为项目或团队创建一套专属的 Lint 规则和代码风格，确保团队成员在编写代码时遵循共同的标准，从而提高代码的可维护性和一致性。同时，借助工具进行自动化检测，可以减少人为错误和时间成本。

Prettier：通用代码格式化工具

Prettier 是一款广受欢迎的代码格式化工具，能够自动化地帮助开发者保持代码的一致性和可读性。它支持多种编程语言和文件类型，广泛应用于 JavaScript、TypeScript、HTML、CSS、JSON、Markdown 等前端和后端开发中。

Prettier 的特点

• 一定风格：Prettier 强迫使用一致的代码风格，避免因为个人偏好产生的差异。
• 支持多种语言：支持多种语言和文件格式，使其适用于不同类型的项目。
• 集成方便：可以与多种编辑器集成（如 VS Code、Atom、Sublime Text），或通过命令行工具使用。
• 可配置性：虽然 Prettier 提供了一些默认规则，但仍然可以通过配置文件自定义某些选项。
• 与 ESLint 兼容：可以与 ESLint 协同工作，避免冲突。

安装 Prettier

使用 npm 安装 Prettier：

npm install --save-dev prettier

如果使用 Yarn：

yarn add --dev prettier

创建配置文件

Prettier 支持通过配置文件来设置选项。可以创建一个配置文件，例如 .prettierrc。常用的配置文件格式包括 JSON、YAML 和 JavaScript。

示例 .prettierrc 配置

{
  "semi": true,  // 在语句末尾添加分号
  "singleQuote": true,  // 使用单引号代替双引号
  "tabWidth": 2,  // 默认制表符宽度为2个空格
  "trailingComma": "es5",  // 仅在 ES5 中有效的对象和数组的最后一项后加逗号
  "printWidth": 80  // 每行代码的最大长度设为 80 个字符
}

使用 Prettier 格式化代码

1. 命令行工具

可以通过命令行运行 Prettier 来格式化单个文件或整个项目：

npx prettier --write yourfile.js

2. 格式化整个项目

格式化项目中的所有文件：

npx prettier --write "**/*.js"

3. 配合 git 提交钩子

使用 Husky，可以在提交代码前进行格式化，保持代码的统一风格。

1. 安装 Husky：

   npm install husky --save-dev
   

2. 在 package.json 中添加提交钩子：

   {
       "husky": {
           "hooks": {
               "pre-commit": "npx prettier --write ."
           }
       }
   }
   

集成编辑器

1. Visual Studio Code

安装 Prettier - Code formatter 扩展后，可以在 VS Code 中自动格式化代码（可以设置为在保存时自动格式化）。

在设置中添加：

"editor.formatOnSave": true

2. WebStorm

在 WebStorm 中，Prettier 一般通过内置的方式进行管理。可以在设置中找到 Prettier，并配置其路径。

结合 ESLint 使用

在使用 Prettier 的同时，也可以配置 ESLint 和 Prettier 的联合使用，以避免两者之间的冲突。

1. 安装相关依赖：

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

2. 更新你的 ESLint 配置 .eslintrc.json：

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"  // 启用 eslint-plugin-prettier 和 eslint-config-prettier
  ],
  "rules": {
    "prettier/prettier": "error"  // 将 Prettier 的规则视为 ESLint 错误
  }
}

总结

Prettier