前端代码格式化规范总结

在日常开发过程中，经常会碰到代码格式化不一致的问题，还要就是 js 代码语法错误等没有及时发行改正，下面就介绍一下如何使用eslint、prettier、husky、lint-staged、commitizen来规范代码格式和提高代码质量的方法。

目录

• 准备工作
• 代码检测
• 代码格式化
• Git 规范

准备工作

新建项目

新建一个测试项目。

mkdir code
cd code
npm init -y
git init

测试文件

<!-- index.html -->
<div><h1>Hello</h1><p>Hello,code!</p>
</div>

/* index.css */
body {width: 10px;
}

// index.js
function add(a, b) {return a + b;
}

代码检测

这里主要是使用eslint来检测代码。

eslint 官网

安装依赖包

npm install eslint

生成配置文件

• 安装配置

npm init @eslint/config

• 选择类型

? How would you like to use ESLint? ...To check syntax only
> To check syntax and find problemsTo check syntax, find problems, and enforce code style

• 选择模块

? What type of modules does your project use? ...
> JavaScript modules (import/export)CommonJS (require/exports)None of these

• 选择框架

? Which framework does your project use? ...React
> Vue.jsNone of these

• 是否使用 ts

? Does your project use TypeScript? » No / Yes

• 运行环境

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

• 文件格式

? What format do you want your config file to be in? ...
> JavaScriptYAMLJSON

• 安装依赖

Local ESLint installation not found.
The config that you've selected requires the following dependencies:eslint-plugin-vue@latest eslint@latest
? Would you like to install them now? » No / Yes

• 选择包管理器

? Which package manager do you want to use? ...npmyarn
> pnpm

等待安装完成。

Installing eslint-plugin-vue@latest, eslint@latest
npm WARN idealTree Removing dependencies.eslint in favor of devDependencies.eslintadded 12 packages in 3s
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in D:\code

下面是生成的配置文件。

module.exports = {env: {browser: true,es2021: true,},extends: ["eslint:recommended", "plugin:vue/vue3-essential"],parserOptions: {ecmaVersion: "latest",sourceType: "module",},plugins: ["vue"],rules: {},
};

忽略文件.eslintignore

# /node_modules/* and /bower_components/* ignored by default
# Ignore built files except build/index.js
.eslintignore
node_modules
dist
.eslintrc.js
.prettierrc.js

shell 脚本

可以写一个简单的 shell 脚本detect.sh来检测。

#!/bin/bashecho "代码检测工具"
if [ "$1" = "-p" ];thenif [ "$2" ];thenif [ -f $2 ];thenecho "正在检测中..."eslint --config ".eslintrc.js" --fix $2echo "代码检测完毕!"elseecho "文件不存在!"fielseecho "路径错误!"fi
elseecho "命令错误!"
fi

使用方法：sh detect.sh -p {文件路径}

例如：sh detect.sh -p index.js

结果是：

代码检测工具
正在检测中...
代码检测完毕!

代码格式化

这里主要是用prettier来进行代码格式化。

prettier 官网

安装 prettier

• 全局安装

npm i prettier -g

• 项目安装

npm i prettier -S

配置文件

配置文件参考

// .prettierrc.js
//配置文档参考：https://prettier.io/docs/en/options
module.exports = {printWidth: 120, // 指定打印机将换行的行长度tabWidth: 2, // 指定每个缩进级别的空格数useTabs: false, // 指定每个缩进级别的空格数semi: true, // 在语句末尾打印分号singleQuote: false, // 使用单引号而不是双引号quoteProps: "as-needed", // 使用单引号而不是双引号/*** "as-needed"- 仅在需要时在对象属性周围添加引号。"consistent"- 如果对象中至少有一个属性需要引号，则引用所有属性。"preserve"- 尊重对象属性中引号的输入使用。*/jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号trailingComma: "all", // 尽可能以多行逗号分隔的语法结构打印尾随逗号bracketSpacing: true, // 在对象文本的方括号之间打印空格bracketSameLine: false, // 在对象文本的方括号之间打印空格arrowParens: "always", // 将多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）requirePragma: false, // 在唯一箭头函数参数两边加上括号// stdinFilepath: "", // 指定用于推断要使用的分析器的文件名// range-start// rangeStart: 0, // 向后到包含所选语句的第一行的开头// rangeEnd: 99999, // 转发到所选语句的末尾requirePragma: false, // Prettier 可以将自身限制为仅格式化文件顶部包含特殊注释（称为杂注）的文件insertPragma: false, // Prettier 可以将自身限制为仅格式化文件顶部包含特殊注释（称为杂注）的文件proseWrap: "preserve", // 默认情况下，Prettier 不会更改 markdown 文本中的换行，因为某些服务使用换行敏感的渲染器htmlWhitespaceSensitivity: "css", // 默认情况下，Prettier 不会更改 markdown 文本中的换行/*** css 遵循 CSS 属性的默认值;* strict 所有标签周围的空格（或缺少空格）被认为是重要的;* ignore 所有标签周围的空格（或缺少空格）被认为是微不足道的*/vueIndentScriptAndStyle: false, // 是否缩进 Vue 文件中的代码和标签endOfLine: "lf", // 正确显示行尾, lf 仅换行;crlf 回车符 + 换行符;cr 仅回车符;auto 维护现有的行尾singleAttributePerLine: false, // 在 HTML、Vue 和 JSX 中每行强制使用单个属性parser: "html", // 指定要使用的分析器
};

忽略文件.prettierignore

# Ignore artifacts:
build
dist# Ignore all HTML files:
*.html

常用命令

下面是根据指定的配置文件.prettierrc.js对index.js脚本进行代码格式化。

prettier --config .prettierrc.js --write index.js

冲突解决

eslint 和 prettier 规则会发生冲突，下面是解决冲突的方法。

• 安装

npm i eslint-config-prettier eslint-plugin-prettier -D

• 配置

在.eslintrc.js文件的extends和plugins中添加prettier即可。

module.exports = {// ...extends: ["eslint:recommended", "plugin:vue/vue3-essential", "prettier"],plugins: ["vue", "prettier"],// ...
};

格式化脚本

可以写一个简单的 shell 脚本format.sh来检测。

#!/bin/bashecho "代码格式化工具"
if [ "$1" = "-p" ];thenif [ "$2" ];thenif [ -f $2 ];thenecho "正在格式化..."prettier --config ".prettierrc.js" --write $2echo "格式化完毕!"elseecho "文件不存在!"fielseecho "路径错误!"fi
elseecho "命令错误!"
fi

使用方法：sh format.sh -p {文件路径}

例如：sh format.sh -p index.js

结果是：

代码格式化工具
正在格式化...
index.js 107ms
格式化完毕!

Git 规范

运行脚本

lint-staged是一个可以在 Git 暂存区中的文件上执行脚本命令。

• 安装

npm i lint-staged -S

• 配置

在package.json中配置。

{//..."lint-staged": {"./src/*.{js,ts}": ["eslint --fix", "prettier --config .prettierrc.js --write"]}//...
}

钩子工具

husky是一个 Git 钩子工具，可以在 Git 事件发生时执行脚本，进行代码格式化、测试等操作。

常见钩子

• pre-commit

在执行 Git commit 命令之前触发，用于在提交代码前进行代码检查、格式化、测试等操作。

• commit-msg

在提交消息（commit message）被创建后，但提交操作尚未完成之前触发，用于校验提交消息的格式和内容。

• pre-push

在执行 Git push 命令之前触发，用于在推送代码前进行额外检查、测试等操作。

husky 安装配置

• 安装

npm i husky -S

• 启用钩子

npm pkg set scripts.prepare="husky install"
# 或者
npx husky install

安装成功后会在package.json文件中生成以下命令。

{//..."scripts": {"prepare": "husky install"}//...
}

• 运行脚本

npm run prepare

安装成功后会在根目录出现一个.husky目录。

• 创建挂钩pre-commit

npx husky add .husky/pre-commit
# 或者
npx husky add .husky/commit-msg

• 配置代码检测

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npx --no-install lint-staged

提交规范

cz-conventional-changelog是一个提交消息规范，规定了提交消息的格式和结构。

• 安装

npm i commitizen cz-conventional-changelog -S

• 配置

在package.json中配置。

{//..."scripts": {// ..."cz": "git-cz"},"config": {"commitizen": {"path": "cz-conventional-changelog"}}//...
}

• 运行

git status
git add .
npm run cz

接下来就根据你的情况选择填写消息内容。

? Select the type of change that you're committing: (Use arrow keys)
> feat:     A new featurefix:      A bug fixdocs:     Documentation only changesstyle:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)refactor: A code change that neither fixes a bug nor adds a featureperf:     A code change that improves performancetest:     Adding missing tests or correcting existing tests

接下来就会自动执行刚刚填写的脚本，执行代码检测和格式化，下面就是其中的一部分执行内容。

[STARTED] Preparing lint-staged...
[COMPLETED] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] package.json — 11 files
[STARTED] ./src/*.{js,ts} — 1 file
[STARTED] eslint --fix
[COMPLETED] eslint --fix
[STARTED] prettier --config .prettierrc.js --write
[COMPLETED] prettier --config .prettierrc.js --write
[COMPLETED] ./src/*.{js,ts} — 1 file
[COMPLETED] package.json — 11 files
[COMPLETED] Running tasks for staged files...
[STARTED] Applying modifications from tasks...
[COMPLETED] Applying modifications from tasks...

如果有问题就会报错，你更改报错的地方代码就重新提交即可。

最后

以上就是前端代码格式化规范总结的主要内容，有不足之处，请多多指正。