15分鍾快速配置eslint,prettier,lint-staged,husky,commitizen實現前端項目代碼規范化

前言

當前，前端項目支持代碼規范校驗、代碼格式化已經必不可少，同時需要支持代碼提交前對代碼格式校驗預檢查，這里提供一份最簡單的配置供大家參考。

每個包代表了什么

在配置之前，先了解用實現代碼規范化、git 提交信息校驗用到的包。

1.代碼格式規范相關

• eslint：代碼格式校驗
• prettier：prettier 主要是為了格式化代碼，而在沒有 prettier 之前，是用 eslint —fix和 編輯器自帶代碼格式來進行代碼格式化的。

• stylelint：css樣式格式校驗

2.代碼提交規范相關

• lint-staged：一個在git暫存文件上運行linters的工具，檢查本次修改更新的代碼，並自動修復並且可以添加到暫存區
• husky: 是一個Git Hook 工具。將其安裝到所在倉庫的過程中它會自動在 .git/ 目錄下增加相應的鈎子實現對應的功能，這里我們通過使用husky來監測commit-msg鈎子，完成提交信息校驗，監測 pre-commit 鈎子，完成代碼校驗。

• pre-commit：git hooks的鈎子，在代碼提交前檢查代碼是否符合規范，不符合規范將不可被提交
• commit-msg：git hooks的鈎子，在代碼提交前檢查commit信息是否符合規范

• commitizen：git的規范化提交工具，幫助你填寫commit信息，符合約定式提交要求
• commitlint：用於檢測提交的信息。

 

代碼格式規范配置

安裝用到的所有包

npm install -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-html prettier stylelint stylelint-config-prettier stylelint-config-standard husky lint-staged commitizen commitlint-config-cz @commitlint/cli @commitlint/config-conventional

最終package.json文件如下：

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {      
        "dev": "npx cross-env NODE_ENV=development webpack serve --config webpack.dev.js",
        "eslint:fix": "npx eslint --fix --ext \".js,.html\"",
        "lint": "npx lint-staged",
        "commit": "npx git-cz",
        "lint:commit": "npm run lint && npm run commit",
        "prepare": "husky install"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.13.14",
        "@babel/core": "^7.13.15",
        "@babel/eslint-parser": "^7.17.0",
        "@babel/plugin-syntax-class-properties": "^7.12.13",
        "@babel/preset-env": "^7.13.15",
        "@commitlint/cli": "^16.2.1",
        "@commitlint/config-conventional": "^16.2.1",
        "autoprefixer": "^9.8.6",
        "babel-cli": "^6.26.0",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.2.2",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-stage-0": "^6.24.1",
        "clean-webpack-plugin": "^0.1.19",
        "commitizen": "^4.2.4",
        "commitlint-config-cz": "^0.13.3",
        "compression-webpack-plugin": "^8.0.1",
        "cross-env": "^7.0.3",
        "css-loader": "^5.2.1",
        "eslint": "^8.9.0",
        "eslint-config-alloy": "^4.4.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-html": "^6.2.0",
        "eslint-plugin-prettier": "^4.0.0",
        "express": "^4.17.1",
        "file-loader": "^6.2.0",
        "glob": "^7.1.6",
        "html-loader": "^0.5.5",
        "html-webpack-inline-source-plugin": "0.0.10",
        "html-webpack-plugin": "^5.3.1",
        "husky": "^7.0.4",
        "image-webpack-loader": "^4.6.0",
        "jest": "^27.4.7",
        "js-conditional-compile-loader": "^1.0.14",
        "less": "^3.13.1",
        "less-loader": "^8.1.0",
        "lint-staged": "^12.3.4",
        "mini-css-extract-plugin": "^1.4.1",
        "minimist": "^1.2.5",
        "optimize-css-assets-webpack-plugin": "^5.0.4",
        "postcss-loader": "^3.0.0",
        "prettier": "^2.5.1",
        "shelljs": "^0.8.4",
        "style-loader": "^0.23.1",
        "stylelint": "^14.5.0",
        "stylelint-config-prettier": "^9.0.3",
        "stylelint-config-standard": "^25.0.0",
        "terser-webpack-plugin": "^5.3.0",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "url-loader": "^4.1.1",
        "webpack": "^5.32.0",
        "webpack-bundle-analyzer": "^4.4.2",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2",
        "webpack-merge": "^4.2.2",
        "webpack-serve": "^4.0.0"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ],
    "dependencies": {
        "core-js": "^3.10.1"
    },
    "lint-staged": {
        "*.{js,html}": [
            "prettier --write",
            "eslint --fix"
        ],
        "*.css": "stylelint --fix"
    },
    "config": {
        "commitizen": {
            "path": "./node_modules/cz-conventional-changelog"
        }
    }
}

配置eslint、prettier、stylelint

eslint 是主要還是負責代碼規則校驗，prettier 只調整代碼風格，代碼樣式，eslint 才是真正檢查代碼是否符合規范的工具。兩者分工不同，所以需要配合使用。

.eslintrc.js

官方文檔：https://eslint.org/

module.exports = {
    env: {
        es6: true,
        node: true,
        browser: true
    },
    extends: [
        'eslint:recommended',
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        ecmaVersion: 2018,
        parser: require.resolve('babel-eslint'),
        sourceType: 'module'
    },
    plugins: [],
    ignorePatterns: ['.prettierrc.js', '.stylelintrc.js'],
    rules: {}
};

.prettierrc.js

這里根據需要配置具體的規則

官方文檔：https://prettier.io/

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 個空格縮進
    tabWidth: 4,
    // 不使用縮進符，而使用空格
    useTabs: false,
    // 行尾需要有分號
    semi: true,
    // 使用單引號
    singleQuote: true,
    // 對象的 key 僅在必要時用引號
    quoteProps: 'as-needed',
    // jsx 不使用單引號，而使用雙引號
    jsxSingleQuote: false,
    // 末尾不需要逗號
    trailingComma: 'none',
    // 大括號內的首尾需要空格
    bracketSpacing: true,
    // jsx 標簽的反尖括號需要換行
    jsxBracketSameLine: false,
    // 箭頭函數，只有一個參數的時候，也需要括號
    arrowParens: 'always',
    // 每個文件格式化的范圍是文件的全部內容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要寫文件開頭的 @prettier
    requirePragma: false,
    // 不需要自動在文件開頭插入 @prettier
    insertPragma: false,
    // 使用默認的折行標准
    proseWrap: 'preserve',
    // 根據顯示樣式決定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 換行符使用 lf
    endOfLine: 'lf'
};

 

.stylelintrc.js

這里根據需要配置具體的規則

官方文檔：https://stylelint.io/

module.exports = {
    extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
    plugins: [],
    rules: {
        'string-quotes': 'double'
    }
};

注意

1.同時要配置以上三個文件的.ignore文件，並修改 .gitignore 文件，如果不加，會報警告：

warning File ignored by default. Use a negated ignore pattern (like "--ignore-pattern '!<relative/path/to/filename>'") to override

.gitignore中增加：

!.prettierrc.js
!.stylelintrc.js
!.eslintrc.js

參考：https://github.com/eslint/eslint/blob/d31f3370396ec4868722bdc044aa697b135ac183/.eslintignore#L13

這里只在對應的ignore文件中加入了!，事實證明還是會報同樣的警告，必須得加到.gitignore中，方可生效。

 

2.關於 eslint-plugin-prettier 和 eslint-config-prettier 的配置

eslint-plugin-prettier

作用：一個形式上跟standard類似的一個代碼規則，用來在基礎規則上擴展的規則，eslint的rules規則優先級大於prettier的規則。

提示：eslint-plugin-prettier不會為您安裝Prettier或ESLint，你必須自己安裝。

使用prettier的擴展規則有兩種方式：

注意：不需要寫extends:"prettier"，光下面的配置即可

方式一：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
    // "prettier/prettier": ["error", {"singleQuote": true, "parser": "flow"}] 這里的配置會覆蓋.prettierrc.js的配置
    // "prettier/prettier": ["error", {}, {
  	//		"usePrettierrc": true
		//	}] // 開啟這個配置，可以指定使用.prettierrc.js配置，不會和其他配置沖突
  }
}

方式二：

extends: [
    'plugin:prettier/recommended',
],

兩種區別：

方式一：兩種規則會有沖突

方式二：兩種規則沒有沖突，會自動去掉eslint沖突的規則，配置簡單。

重點：

如果使用方式二，需同時安裝 eslint-config-prettier

作用：禁用與lint相關的所有格式化規則。

注意：

由於編輯器等自動格式化配置設置了走.prettierrc.js文件，建議寫覆蓋的配置，寫在這里，不要寫在.eslintrc.js配置中，否則可能得不到想要的結果。

 

代碼提交規范

配置husky

運行已經在package.json中增加的 prepare命令，執行 husky install

這時會在根目錄生成 .husky 文件夾，如圖：

我們自己增加 commit-msg 、pre-commit 文件，分別為提交前進行eslint校驗，和對git commit-msg的格式校驗

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

commit-msg ：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

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

pre-commit:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

注意：在有些教程上，我們會看到在package.json中配置如下：

"husky": {
    "hooks": {
      "commit-msg": "npx --no -- commitlint --edit $1",
      "pre-commit": "npx lint-staged"
    }
  },

而實際如此配置卻無法生效，原因為，husky 4版本及以下需要是在package.json中如此配置即可，4版本以上，不需要在此配置，需要執行 husky install ，來生成對應的 husky 配置文件。

 

參考自這里：https://www.cnblogs.com/ly0612/p/15545803.html

見官方文檔：https://typicode.github.io/husky/#/?id=install

 

代碼提交預檢查配置

配置commitizen

package.json中增加

 "config": {
        "commitizen": {
            "path": "./node_modules/cz-conventional-changelog"
        }
}

配置commitlint

commitlint.config.js

module.exports = {
    // 采用 cz 自定義的提交規范, > .cz-config.js
    extends: ['@commitlint/config-conventional'],
    rules: {
        // 自定義規則
    }
};

package.json的scripts中增加

"commit": "npx git-cz",

則可以通過執行 git-cz 命令來進行 commit-msg 格式化選擇和提交

備注

如果一些特殊情況，需要跳過以上兩步校驗，可使用命令：

git commit --no-verify -m "xxx"

IDE 配置

讓編輯器支持代碼自動格式化，可以減少我們提交前代碼校驗的步驟，以上 git-cz 格式化 commit-msg 提交需要依賴 git 命令輸入，如果使用IDE自帶的可視化 git 工具提交，都需要ID進行一些配置。

VS code

支持eslint

1. 安裝 "ESLint" 以及 "Prettier - Code formatter" 插件，打開 VSCode 點擊「擴展」按鈕，搜索 ESLint、prettier，然后安裝即可
2. 點擊左下角的"齒輪圖標"，點擊Setting后上端選擇Workspace選項卡,（也可以在項目根目錄下創建一個配置文件 .vscode/settings.json），添加以下配置：

{
    // VSCode 中的 ESLint 插件默認是不會檢查 `.vue`、`.ts` 或 `.tsx` 后綴的
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "typescript",
        "typescriptreact"
    ],
    // 開啟保存時自動修復  
    "editor.codeActionsOnSave": {
        // eslint開啟
        "source.fixAll.eslint": true,
         // stylelint開啟
        "source.fixAll.stylelint": true
    },
       
    // prettier:保存時自動格式化所有支持文件：javascript/javascriptreact/typescript/typescriptreact/json/graphql
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
       
    // 或者僅指定js文件保存自動格式化
    // Set the default
    //"editor.formatOnSave": false,
    // Enable per-language
    //"[javascript]": {
       // "editor.defaultFormatter": "esbenp.prettier-vscode",
       // "editor.formatOnSave": true
    // }
       
    // 指定VSCode用於IntelliSense（智能感知）的ts版本，將內置版本更換為工作區版本
    "typescript.tsdk": "node_modules/typescript/lib"
}

IDE git commit 支持格式化

在插件庫搜索 Visual Studio Code Commitizen Support 安裝，使用快捷鍵 command+shift+P 即可按規范提交。

webstorm

支持eslint

webstorm安裝prettier、eslint、stylelint插件

設置里搜File watchs，增加prettier,打鈎開啟自動格式化，則會在保存時自動格式化。

IDE git commit 支持格式化

插件搜索安裝 convertional commit，在 VCS 下 git commit 時，可以點擊提交信息輸入框右上角的按鈕，選擇本次修改類型，如圖：

 

參考文章

https://www.mdnice.com/writing/45c1f9d5fca04b04b443b3275bb5c986

https://blog.csdn.net/qq_33539213/article/details/106215608