前端工程化之代码规范

🤔为什么需要代码规范

  • 提升代码可读性、可维护性
  • 促进团队协作效率,减少沟通成本
  • 避免常见错误(如全局变量污染、样式冲突)

ESLint

用于识别和报告 ECMAScript/JavaScript 代码中发现的模式的工具,目的是使代码更加一致并避免错误。

安装

npm init @eslint/config@latest初始化ESLint时会生成基础的配置。

配置

配置文件为eslint.config.jseslint.config.mjs,版本9.0.0之前配置为.eslintrc.8

javascript 复制代码
// eslint.config.js
import js from "@eslint/js";

export default [
    js.configs.recommended, // ESLint推荐的规则
    {
        // https://eslint.org/docs/latest/use/configure/configuration-files
        files: ["**/*.{js,mjs,cjs,ts}"] // 指定文件,忽略优先
    },
    {
        // https://eslint.org/docs/latest/use/configure/ignore
        ignores: [".config/*"] // 忽略文件(老版本创建.eslintignore文件)
    },
    {
        // https://eslint.org/docs/latest/use/configure/language-options
        languageOptions: {
            ecmaVersion: 5, // ECMAScript 版本
            sourceType: "module" // JavaScript 文件的模式
        },
    },
    {
        // https://eslint.org/docs/latest/rules/
        rules: {
            'no-unused-vars': 'off', // 禁止未使用变量
            'eqeqeq': 'warn', // 要求使用===和!==
            'no-var': 'error' // 禁止使用var
        }
    }
];
  • "off"0 - 关闭规则。
  • "warn"1 - 将规则作为警告打开(不影响退出代码)。
  • "error"2 - 将规则作为错误打开(触发时退出代码为 1)。

命令行界面参考

sh 复制代码
npx eslint [filename] #单个文件
npx eslint . #所有文件
npx eslint --fix . #尝试尽可能多的问题。

--fix并不能修复所有问题,只能修复部分问题,具体在规则中可见。

更多命令

IDE配置

Webstorm: 右键ESLint配置文件,选择apply eslint rules

Prettier

格式化程序,让代码保持一致的风格。

安装

npm install --save-dev --save-exact prettier

配置

需自行创建配置文件.prettierrc

json 复制代码
{
    "printWidth": 100,              // 每行代码字符数,超出换行
    "semi": false,                  // 每个语句末尾添加分号 
    "singleQuote": false,           // 使用单引号代替双引号
    "tabWidth": 2,                  // 每行缩进的空格数
    "bracketSpacing": true,         // 对象中文本和括号之间是否要空格
    "arrowParens": "always"         // 箭头函数只有一个参数时是否加()
    ... // https://prettier.io/docs/options
}

插件

prettier-plugin-tailwindcss

tailwindcss类名进行排序。

json 复制代码
{
    ...
    "plugins": ["prettier-plugin-tailwindcss"],
    "tailwindAttributes": ["myClassList"],
    "tailwindFunctions": ["clsx"]  //对clsx函数实参的字符串排序,变量不行
}

命令行界面参考

sh 复制代码
prettier [filename] --write #识别单个文件
prettier . --write #识别所有文件
prettier . --check #只检查文件是否已格式化,不自动格式化

更多命令

Git Hooks

本地

  • pre-commit:在创建提交之前运行,常用于运行测试或代码检查工具(如 ESLint)。
  • commit-msg:在提交消息被创建后运行,常用于验证提交消息的格式或内容。
  • pre-push:在执行推送操作之前运行,通常用于确保推送的代码不破坏远程仓库的代码。
  • pre-rebase:在执行 rebase 操作之前运行,可以用于基于某些条件来阻止某些操作。
  • post-commit:在提交完成后运行,常用于发送通知或记录日志。

远程

  • `pre-receive:在远程仓库接收推送之前执行,允许你拒绝或修改推送的更改。
  • update:在每个分支更新时执行,用于针对特定分支应用检查或策略。
  • post-receive:在远程仓库接收到推送之后执行,常用于触发部署或发送通知。

存放位置

存放在 .git/hooks/ 目录下。你会看到一些带有 .sample 后缀的示例脚本文件,可以根据需要进行自定义。要启用某个 hook,只需要删除 .sample 后缀并编写你的脚本。

core.hooksPath记录hooks存放的路径。默认为空,指向.git/hooks/

sh 复制代码
git config core.hooksPath                  #查看
git config --unset core.hooksPath          #重置
git config core.hooksPath [path]           #设置

Husky

Git 钩子管理工具,用于在 Git 操作(如提交、推送)前后自动执行脚本, 如提交代码前运行 ESLint 和 Prettier 保证代码风格一致性。

安装

sh 复制代码
npm install --save-dev husky
npx husky init

init操作后会创建.husky目录。目录下_为Git Hooks存放位置,并将core.hooksPath指向了该目录。pre-commit文件会在Git提交前执行。还会在package.json->scripts->prepare中添加husky命令,prepare会在npm installnpm publish时执行,相当于init操作。

lint-staged

只对暂存区的文件进行操作。

安装

npm install --save-dev lint-staged

配置

package.json .lintstagedrc.* lint-staged.config.js .lintstagedrc.js

package.json 复制代码
{
    ...
    "lint-staged": {
        "*": ["prettier --write"],
        "*.{js,jsx,ts,tsx,vue}": "eslint --fix"
    }
}

.husky/per-commit中添加npx lint-staged

总结

使用 Huskylint-staged 来对暂存区文件在提交前运行 ESLintPrettier 来优化代码质量。

相关推荐
慧一居士几秒前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead2 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app