前端代码规范最佳实践

最新推荐文章于 2024-04-11 09:15:28 发布
最新推荐文章于 2024-04-11 09:15:28 发布
阅读量329 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ppppppppppsd/article/details/128713268
版权

Why

团队开发中，每个人的编码习惯不同，代码格式不同。这就会导致代码难看，难以维护。统一代码风格可以：

  1. 增强代码的可读性，降低维护成本
  2. 有利于代码审查
  3. 养成规范代码的习惯，有利于自身成长

How

推荐使用 eslint + prettier 来进行代码格式化。
通过 git hook 调用来实现代码的自动格式化，git hooks 工具推荐 husky。
既然用到了 git hook，顺便把提交信息规范也做一下，这里推荐 commitlint。

用到的插件

  1. eslint: js/jsx 语法检查插件
    按照已有配置检查 js/jsx 语法，能抛出错误、警告，并且能修复一部分错误
  2. stylelint: css 样式格式化工具
  3. prettier: 代码格式化插件
    按照已有配置进行代码格式化
  4. husky: git hooks 工具
    对 git 执行的一些命令，通过对应的 hooks 触发，执行自定义的脚本程序。
    比如，我们可以定义 pre-commit钩子的脚本为 npm run test。这样在代码提交前就会执行 npm run test
  5. lint-staged: 在 git 暂存区运行 linters 的工具
    只检查暂存区内容，避免每次 lint 执行都针对所有代码
    相当于每次只对修改的内容执行 eslint + prettier 格式化
  6. commitlint: 提交信息检查工具 检查提交信息是否符合规范

eslint 7.x

1. 安装

cnpm install eslint -D

2. 使用

  • 配置 eslint eslint --init添加 eslint 配置文件。然后修改配置，具体配置如下： 
module.exports = {
    // 特定项目下，不再检索上级目录
    root: true,
    env: {
        browser: true,
        es6: true,
        node: true,
        amd: true
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        // eslint-config-prettier的缩写
        'prettier'
    ],
    plugins: ['react'],
    // 解析器选项
    parserOptions: {
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    settings: {
        react: {
            version: 'detect'
        }
    },
    rules: {
        'no-unused-expressions': 'off',
        'no-unused-vars': 'warn',
        'no-debugger': 'error',
        'no-unreachable': 'warn',
        'react/prop-types': 'off'
    }
};

这里，我们用到了几个 eslint 的插件，需要安装：

cnpm install eslint-config-prettier eslint-plugin-react -D

eslint-config-prettier 的作用是使用 Prettier 默认推荐配置，并且关闭 eslint 自身的格式化功能，防止 Prettier 和 ESLint 的自动格式化的冲突

在 package.json 的 scripts 里添加 eslint 脚本命令，如下：

"scripts": {
  // ...
  "eslint": "eslint --ext js,jsx src --fix",
},

值得注意的是，这里我们指定了 src 目录，所以没必要再加.eslintignore文件了。
npm run eslint即可进行 eslint 检查和修复（只能修复部分格式的问题）。

stylelint14.x

1. 安装

cnpm install stylelint -D

2. 配置

创建.stylelintrc.js,增加以下配置：

module.exports = {
  extends: ["stylelint-config-standard-scss", "stylelint-config-prettier"],
  plugins: ["stylelint-order"],
  defaultSeverity: "warning",
  overrides: [],
  rules: {
    "color-no-invalid-hex": true,
    "annotation-no-unknown": true,
    "function-calc-no-unspaced-operator": true,
    "function-no-unknown": true,
    "block-no-empty": true,
    "unit-allowed-list": ["em", "rem", "s", "%", "px", "vw", "vh"],
    "no-duplicate-selectors": true,
    "selector-class-pattern": null,
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "font-weight",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ]
  }
};

这里, 我们用到了几个插件：
stylelint-config-standard-scss: stylelint 默认规则只能格式化 css，这里我们使用该插件的规则来格式化 scss。
stylelint-config-prettier: 避免 stylelint 与 prettier 冲突的插件。
stylelint-order: 给属性排序的插件。属性会按照 rules 里 order/properties-order 所定义的顺序排序。
此外，我们还要安装stylelint-scss，因为 stylelint 默认是没有格式化 scss 的能力的。
安装：

cnpm install stylelint-scss stylelint-config-standard-scss stylelint-config-prettier stylelint-order -D

在 package.json 的 scripts 里添加 stylelint 脚本命令，如下：

"scripts": {
  // ...
  "stylelint": "stylelint src/**/*.{less,scss,css} --fix",
},

使用npm run stylelint即可对 src 下的样式文件进行格式化。

prettier

1. 安装

cnpm install prettier -D

2. 使用

  • 配置 prettier 创建 prettierrc.js 文件： 
echo module.exports = {}>.prettierrc.js

添加配置，这里可以根据自己需要调整风格。比如：

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  jsxSingleQuote: true,
  jsxBracketSameLine: true,
  trailingComma: "none",
  bracketSpacing: true
};

最好再加上.prettierignore文件，避免把不必要的文件也进行格式化。

#ignore
node_modules
.DS_Store
yarn*
*-lock*
dist*
public/

prettier --write即可进行 prettier 格式化。

lint-stated 13.x

1. 安装

cnpm install lint-staged -D

2. 使用

  • 在 package.json 里添加 lint-staged 选项 
"lint-staged": {
  "**/*.{js,jsx,ts,tsx}": [
    "eslint --fix"
  ],
  "**/*.{js,jsx,ts,tsx,cjs,json,less,scss,css,md}": [
    "prettier --write"
  ],
  "**/*.{less,scss,css}": [
    "stylelint --fix"
  ]
},
  • 在 package.json 的 scripts 里添加 lint-staged 脚本命令 
"scripts": {
  // ...
  "lint-staged": "lint-staged"
},

这样，当我们使用npm run lint-staged的时候，就会自动调用 eslint+prettier 格式化。

commitlint

1. 安装

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

2. 使用

  • 初始化 commitlint 配置文件 
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
  • 配置 commitlint
    1. 提交信息结构 通常 commitlint 认为我们提交信息格式如下： 
type(scope?): subject
body?
footer?

其中, scope/body/footer 这三个可有可无。

  1. 校验规则 一般的校验规则格式如下： [规则名称]: [level, when, value] level: 有三个参数。0 代表禁用， 1 代表警告， 2 代表错误 when: 有两个参数。always 代表总是， never 代表从不 value: 参数值 比如： 
"subject-empty": [2, "never"],
"body-empty": [2, "always"],
"type-enum": [2, "always", ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'revert']]

就是强制 body 必须为空，subject 不可为空，type 必须是上面数组里的其中一个。不然就报错。

git commit -m "feat: 增加了新功能"
git commit -m "fea: 增加了新功能" // 报错，type 必须为'feat', 'fix', 'docs', 'style', 'refactor', 'test', 'revert'中的一个

更多规则参考官网 https://commitlint.js.org/#/reference-rules

  1. 自定义校验规则 如果已有的规则满足不了需求，我们还可以自定义校验规则。自定义校验规则写在 plugins 属性中。 
module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-empty": [2, "always"],
    "scope-empty": [2, "always"],
    "subject-empty": [2, "always"],
    "header-max-length": [2, "always", 100],
    "body-empty": [2, "always"],
    "footer-empty": [2, "always"],
    "action-enum": [
      2,
      "always",
      ["Fixed", "Feature",  "Add", "Modify", "Update", "Delete"]
    ],
    "issue-rule": [2, "always", ["TMP", "TTT"]] // 根据自己需要输入即可
  },
  plugins: [
    {
      rules: {
        "action-enum": ({ raw }, when = "always", value = []) => {
          return [
            value.includes(raw.split(" ")[0]),
            `提交信息不合规范! {Action}错误!
    必须以 "{Action}{空格}#{标号}{空格}" 开头。
    {Action}可选：${value.join("|")}
    比如: Fixed #TMP-111 修复接口传参错误的问题
    ${when === "never" ? "另外: action-enum规则第二个参数必须是always, 建议修改" : ""}...`
          ];
        },
        "issue-rule": ({ raw }, when, value = []) => {
          const issueStr = `^([A-Z][a-z]*\\s#(${value.join("|")})\\-[1-9][0-9]*)`;
          const issueReg = new RegExp(issueStr, "g");
          return [
            issueReg.test(raw),
            `提交信息不合规范! {标号}错误!
    必须以 "{Action}{空格}#{标号}{空格}" 开头。
    {标号}可选: ${value.join("|")}
    比如: Fixed #TMP-111 修复接口传参错误的问题
    ${when === "never" ? "另外: action-enum规则第二个参数必须是always, 建议修改" : ""}...`
          ];
        }
      }
    }
  ]
};

这里，我把 type, scope, subject, body, footer 都强制为空，然后自定义了两个规则action-enum和issue-rule。
提交代码的时候，如果不符合'必须以 "{Action}{空格}#{标号}{空格}" 开头'的规则，就会报错，提交失败。例如：

git commit -m "Fixed #TMO-222 修复了传参错误的bug"

由于我们定义的标号前缀里面没有 TMO，因此会报错： alt

husky 8.x

1. 安装

cnpm install husky -D

2. 使用

npm set-script prepare "husky install"
npm run prepare

这里我们在 scripts 加了一个 prepare 命令，这个命令会在执行 npm install 时自动执行。

npx husky add .husky/pre-commit "npm run lint-staged"
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

这里我们添加了两个钩子，pre-commit 与 commit-msg。
pre-commit 会在提交前执行npm run lint-staged命令
commit-msg 会在提交时执行npx --no-install commitlint --edit "$1"

至此，我们的配置完成。代码提交的时候会自动对修改的代码进行格式化，同时会按照 commitlint 里的设置来进行提交信息校验。
如果有问题，则会报错，且代码会提交失败。

vscode 插件

1. eslint 和 prettier 插件

推荐使用 vscode 插件 eslint 和 prettier，可以在 settings.json 中设置：

"editor.formatOnSave": true,
"eslint.run": "onSave"

当我们保存的时候，会自动进行格式化, 会自动把 eslint 的错误语法用波浪线标出来。

2. 把 eslint 和 prettier 插件配置加到项目目录

vscode 的配置分两类，工作区和用户区。工作区的优先级高于用户区。 在项目根目录加上.vscode 文件夹，里面是 settings.json 文件。 那么我们的项目就是一个工作区了。
修改 settings.json 配置如下:

{
  "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "eslint.run": "onSave"
}

这样就完成了 vscode 配置的共享。

「参考资料：」
husky 官方文档
lint-staged 官方文档
commitlint 官方网站
commitlint 从 0 到 1 (git commit 校验工具)
前端架构师神技，三招统一代码风格（一文讲透）

本文由 mdnice 多平台发布

嘴角邪恶的弧线
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端开发规范手册
08-10
此手册主要实现的目标：代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。
web前端开发规范
09-06
web前端开发规范主要实现的目标：代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。 此规范是在开发中积累下来的经验和参考其它规范/指南制定的，它只是起指导作用，除个别条目强制之外，大多数为非强制约束，开发者可根据自己的实际情况自行决定是否要遵守 该指南只是保证大方向一致性和最佳实践的阶段性总结，不是最后结论，它会随着时间而变化
lint-staged简易入门
最新发布
一名全栈开发工程师
04-11 1231
提交前检查lint(如eslint prettierlint stylelint)的主要工具。通过在提交前自动运行linters，它帮助开发者捕捉并修复潜在的代码问题，从而提高代码的整体质量。结合husky使用.
前端进阶：掌握Less与Sass规范的技巧与实践
07-20
想要成为CSS的高手吗？这份详细的Less与Sass规范指南将带您走进前端开发的新境界。 我们的Less与Sass规范指南，为您呈现出一种全新的CSS开发体验，让您的代码更加整洁和易于维护。 深入剖析Less与Sass规范的奥秘，让您的样式表达更灵活、更具表现力。 从基础到进阶，掌握Less与Sass规范的最佳实践，成为前端领域的行家。 让您的CSS开发变得轻松而高效，跟着我们的Less与Sass规范指南，成为CSS的专家。
在git提交规范中使用husky与lint-staged
jimojianghu的专栏
02-01 4891
在前端项目开发中，规范git提交信息，也是经常使用的手段，本文将介绍husky与lint-staged等工具，使用好它们，将有助于我们在项目开发中的git规范和团队协作。
eslint+stylelint+prettier全流程配置
qq_36566924的博客
10-27 1443
stylelintrc.cjs，具体文件内容如下。执行一次npx prettier . --write，格式化一次code，如果是使用的Vscode编辑器，格式化代码的时候选取prettier相关的格式方法。三.vite.config.ts引入。二.创建以下5个文件放在项目顶层。
annotation的配置
zh230076zh的专栏
03-27 442
引入jar包 hibernate-annotations.jar，ejb3-persistence.jar，hibernate-commons-annotations.jar创建类Teacherpackage com.zhaohu.hibernate.model;import javax.persistence.Entity;import javax.persistence.Id;
Lint-staged自动修复格式错误及小结
小洋人最happy的专栏
11-29 3608
husky pre-commit结合lint-staged完成代码格式自动修复及提交
【学不动系列】lint-staged 使用教程
oschina_41559824的博客
03-23 1348
当以JS格式提供配置时，可以将任务定义为一个函数，该函数将接收一个分段文件名/路径数组，并应以字符串形式返回完整的命令。也可以返回一个完整的命令字符串数组，例如当任务只支持单个文件输入时。函数可以是sync或async。示例：将文件名用单引号引起来，并在每个文件中运行一次‘**/*.js?示例：运行tsc对TypeScript文件的更改，但不传递任何文件名参数‘**/*.ts?示例：如果超过10个暂存文件，则在整个存储库上运行eslint‘**/*.js?
代码规范 & 详细解释 husky、prettier、eslint、lint-staged 的作用和使用
热门推荐
cookcyq__的博客
06-25 1万+
详细解释 husky、prettier、eslint、lint-staged 的作用
前端开发规范手册前端开发规范手册
04-02
此手册主要实现的目标：**代码一致性**和**最佳实践**。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。 此手册是在开发中积累下来的...
Unknown rule function-calc-no-invalid.Stylelint(function-calc-no-invalid)
星宇大前端
04-13 3216
项目场景： React 项目 Umi框架 Mac系统 VScode 问题描述 安装StyleLint 检查css，出现问题。 styleint 配置： { "extends": ["stylelint-config-standard", "stylelint-config-rational-order", "stylelint-prettier/recommended"], "overrides": [ { "files": ["src/**/*.less"],
前端代码风格自动化系列（三）之Lint-staged
weixin_33989780的博客
01-07 4161
在我们介绍了Husky、Commitlint之后，来看一个前端文件过滤的工具Lint-staged，代码的格式化肯定会涉及到文件系统，一般工具会首先读取文件，格式化操作之后，重新写入。对于较大型的项目，文件众多，首先遇到的就是性能问题，虽然如Eslint之类的也有文件过滤配置，但毕竟还是对于匹配文件的全量遍历，如全量的.js文件，基本达不...
Android 经典笔记六：Annotation注释使用介绍
杨充
09-19 1219
Annotation注释使用介绍 目录介绍 1.Annotation库的简单介绍 2.@Nullable和@NonNull 3.资源类型注释 4.类型定义注释 5.线程注释 6.RGB颜色纸注释 7.值范围注释 8.权限注释 9.重写函数注释 10.返回值注释 11.@Keep注释 12.@SuppressWarnings注解 13.其他 14.后续1.Annotati
用 husky 和 lint-staged 构建代码检查工作流
萧然自我的博客
02-22 1698
前言一个项目如果涉及到多人协作，由于每个人代码的书写习惯和风格不太一样，如果没有统一的规范，那就会很乱，这对代码的可维护性大大降低。所以现代工程有个一环节就是代码风格检查(Code Lin...
前端代码风格自动化
oTouMingDeXin的博客
09-29 463
前端代码风格自动化 基于代码风格自动化的建设方案存在以下优点： 1、 Husky在代码被提交到Git仓库之前，我们可以在这里做一些预检查或者格式化 2、 Commitlint代码的提交规范和规范的校验，例如feat：新功能（feature）、fix：修补bug、style： 样式修改，方便问题跟踪 3、 Lint-staged过滤出Git代码暂存区文件(被committed的文件)的工具，避免全量遍历和格式其他人代码 4、 结合上面工具利用Stylelint和ESlint检查和帮我们自动修复css和js错误
前端开发中的最佳实践
weixin_43263566的博客
06-04 1388
前端开发中的最佳实践
stylelint报错at-rule-no-unknown
Bunny的博客
11-16 1153
stylelint还将各种 sass @-rules 标记@mixin为@include显示未知错误。
百度前端代码规范pdf
06-24
百度前端代码规范PDF是一份非常有价值的前端开发规范文档，它包含了丰富而详细的代码规范和最佳实践，可以帮助开发者写出更加规范、高效、可读性强的代码。 首先，百度前端代码规范PDF对整个前端开发的流程有着清晰...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值