前端代碼格式化規範總結

在日常開發過程中,經常會碰到代碼格式化不一致的問題,還要就是 js 代碼語法錯誤等沒有及時發行改正,下面就介紹一下如何使用eslintprettierhuskylint-stagedcommitizen來規範代碼格式和提高代碼質量的方法。

目錄

  • 準備工作
  • 代碼檢測
  • 代碼格式化
  • 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 problems
  To 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.js
  None 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? ...
> JavaScript
  YAML
  JSON
  • 安裝依賴
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? ...
  npm
  yarn
> pnpm

等待安裝完成。

Installing eslint-plugin-vue@latest, eslint@latest
npm WARN idealTree Removing dependencies.eslint in favor of devDependencies.eslint

added 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/bash

echo "代碼檢測工具"
if [ "$1" = "-p" ];then
  if [ "$2" ];then
    if [ -f $2 ];then
      echo "正在檢測中..."
      eslint --config ".eslintrc.js" --fix $2
      echo "代碼檢測完畢!"
    else
      echo "文件不存在!"
    fi

  else
    echo "路徑錯誤!"
  fi
else
  echo "命令錯誤!"
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.jsindex.js腳本進行代碼格式化。

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

衝突解決

eslint 和 prettier 規則會發生衝突,下面是解決衝突的方法。

  • 安裝
npm i eslint-config-prettier eslint-plugin-prettier -D
  • 配置

.eslintrc.js文件的extendsplugins中添加prettier即可。

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

格式化腳本

可以寫一個簡單的 shell 腳本format.sh來檢測。

#!/bin/bash

echo "代碼格式化工具"
if [ "$1" = "-p" ];then
  if [ "$2" ];then
    if [ -f $2 ];then
      echo "正在格式化..."
      prettier --config ".prettierrc.js" --write $2
      echo "格式化完畢!"
    else
      echo "文件不存在!"
    fi

  else
    echo "路徑錯誤!"
  fi
else
  echo "命令錯誤!"
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 feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    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 feature
  perf:     A code change that improves performance
  test:     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...

如果有問題就會報錯,你更改報錯的地方代碼就重新提交即可。

最後

以上就是前端代碼格式化規範總結的主要內容,有不足之處,請多多指正。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章