跳至主要內容

前端代码规范

Happier2024/10/6大约 5 分钟开发ESLintPrettierStylelintlint-stagedHuskycommitlintVSCode

前端代码规范

ESLint

ESLint 是一个用于 JavaScript 代码的静态代码分析工具，它可以帮助开发人员发现和修复代码中的问题，确保代码的质量和一致性。

目前，ESLint 存在版本更新后部分库还未适配好的问题，待适配好以后再补充这部分内容。

Prettier

Prettier 关注于代码风格校验。

配置 VSCode

在 VSCode 中安装 Prettier - Code formatter 扩展。

在项目根目录下创建 .vscode 文件夹，在文件夹下创建 settings.json 文件，添加以下配置。

{
  // 默认格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 设置 vue 文件保存时使用的格式化工具，一般不需要，因为已经设置了默认格式化工具
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Prettier 配置文件

在项目根目录下创建 .prettierrc.yml 文件 (使用 yaml 格式是为了可以添加注释)，并添加配置内容。

# 指定代码换行的长度
printWidth: 80
# tab缩进的空格数
tabWidth: 4
# 不使用 tab 缩进而是空格
useTabs: false
# 末尾是否添加分号
semi: false
# 使用单引号
singleQuote: true
# 在对象属性添加引号
quoteProps: 'as-needed'
# 在 jsx 中使用单引号而不是双引号
jsxSingleQuote: true
# 尾随逗号
trailingComma: 'none'
# 对象花括号和文本之间加空格
bracketSpacing: true
# 将多行标签元素的 > 放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）
bracketSameLine: true
# 在箭头函数参数周围加上括号
arrowParens: 'always'
# 指定 HTML文件的全局空白敏感性
htmlWhitespaceSensitivity: 'ignore'

Prettier 忽略文件

在项目根目录下创建 .prettierignore 文件，并添加需要忽略的文件路径，它遵循 .gitignore 的规则。

默认情况下，prettier 会忽略版本控制系统目录 (.git、.sl、.svn 和 .hg) 和 node_modules 中的文件。

# 忽略构建目录
build

# 忽略所有 HTML 文件
**/*.html

# 忽略特定文件
config.yml

Stylelint

Stylelint 是一个用于检查样式代码的工具，它可以帮助开发人员发现和修复样式代码中的问题，确保样式代码的质量和一致性。

在项目中引入 Stylelint

npm init stylelint

引入后会在项目根目录下生成 .stylelintrc.json 配置文件，可以根据需要进行配置。

配置 VSCode

在 VSCode 中安装 Stylelint 扩展。

在项目根目录下创建 .vscode 文件夹，在文件夹下创建 settings.json 文件，添加以下配置。

{
  // 开启 Stylelint 检查
  "stylelint.validate":[
    "css",
    "scss",
    "vue",
    "html"
  ],
  // 保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

Stylelint 配置文件

默认生成的配置文件内容如下：

{
    "extends": ["stylelint-config-standard"] 
}

extends 属性可以从已有的 StyleLint 配置中继承规则，这里使用了 stylelint-config-standard。

校验 SCSS 文件

若想校验 SCSS 文件，需要安装 stylelint-config-standard-scss，并在配置文件的 extends 属性中添加。

npm install stylelint-config-standard-scss --save-dev
{
    "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"]
}

校验 Vue 文件

若想校验 Vue 文件，需要安装 stylelint-config-recommended-vue，并在配置文件的 extends 属性中添加。

npm install stylelint-config-recommended-vue --save-dev
{
    "extends": ["stylelint-config-recommended-vue"]
}

校验 Vue 文件中的 SCSS

若想校验 Vue 文件中的 SCSS，需要安装 stylelint-config-standard-scss 和 stylelint-config-recommended-vue，并在配置文件的 extends 属性中添加。

npm install stylelint-config-standard-scss stylelint-config-recommended-vue --save-dev
{
    "extends": ["stylelint-config-standard-scss", "stylelint-config-recommended-vue/scss"]
}

校验 HTML 或 Vue 模板中的 CSS

{
    "extends": ["stylelint-config-standard"],
    "customSyntax": "postcss-html"
}

Stylelint 忽略文件

ignoreFiles 配置项可以设置要忽略的文件路径，Stylelint 默认会忽略 node_modules 中的文件，配置 ignoreFiles 后将覆盖默认配置。

{
  "ignoreFiles": ["dist/**/*.css", "src/assets/**/*.css"]
}

lint-staged 与 Husky

lint-staged 可以针对暂存的代码 (git add 的文件) 进行代码检查，从而提高代码质量。

Husky 可以在 git hooks 中执行命令，从而在代码提交或推送时自动化检查提交信息、检查代码和运行测试。

在项目中引入 lint-staged 与 Husky

npm install --save-dev lint-staged husky

初始化 husky。

npx husky init

此时会在项目根目录下生成 .husky 文件夹，并在 package.json 中添加 husky 相关配置。

配置 lint-staged 和 Husky

在 package.json 中添加 lint-staged 相关配置。

{
  "lint-staged": {
    "*.{js,ts,vue}":[
      "eslint --fix",
    ],
    "*.{css,scss,vue,html}":[
      "stylelint --fix",
    ],
    "*.{json,md}":[
      "prettier --write"
    ]
  }
}

修改 .husky/pre-commit 脚本中的内容。

npx lint-staged

Husky 与 Node 版本管理工具配合使用报错的问题

详见：官网。

与 FNM 配合使用，详见：Node 版本管理工具 FNM。

commitlint

commitlint 可以检查提交信息是否符合规范，从而保证提交信息的可读性和可维护性。

在项目中引入 commitlint

npm install --save-dev @commitlint/config-conventional @commitlint/cli

配置 commitlint

执行以下命令，生成 commitlint 配置文件。

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

该操作会在项目根目录下生成 commitlint.config.js 文件，并在文件中添加以下内容，默认使用 @commitlint/config-conventional 规范。

export default { extends: ['@commitlint/config-conventional'] };

配置 Husky

在 .husky 文件夹下，新增一个 commit-msg 文件，并添加以下内容。

npx --no-install commitlint --edit $1

建议的 commit 信息格式

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
  • type：用于说明 commit 的类型 (必填)，有如下几种类型
    • feat：新增功能 (feature)
    • fix：修复 bug
    • docs：文档更新
    • style：代码格式 (不影响代码运行的变动)
    • refactor：重构 (即不是新增功能，也不是修改 bug 的代码变动)
    • test：添加或修改测试
    • chore：构建过程或辅助工具的变动
  • scope：用于说明 commit 影响的范围
  • subject：用于说明 commit 的简短描述 (必填)
  • body：用于说明 commit 的详细描述
  • footer：用于说明 commit 的补充信息，如修复的 bug 等

例如：

feat(cart): 添加商品数量验证

新增了商品数量验证，确保加入购物车的商品数量不会超过库存。
这可以防止用户将超过库存的商品加入购物车。

Close #108
Copyright © 2023-present Happier