項目中使用eslint+prettier規範前端代碼規範

前言

常規前端項目中，需要規範團隊的代碼規範，除了手動的修改代碼之外，可以藉助插件來實現保存修改。這裏選用eslint和prettier來實現代碼風格統一。

關於prettier

prettier是一個代碼美化工具，關於prettier配合使用的插件，包括eslint-plugin-prettier,還有其他的插件和腳本，具體可以參考https://github.com/prettier。

官方給的例子：

原代碼：

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

格式化後:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

使用：

結合編輯器使用（以vscode爲例）

書寫完代碼後，點擊保存就能按照定義好的風格進行格式化，減輕大量的開發時間。
查找插件如下並安裝：

開始時使用：
1、編輯代碼時，保存文件，自動格式化並保存
2、格式化某個文件時，在打開文件的當前頁按shift + alt + f
3、格式化某段代碼時，先選中這段代碼，再按 shift + alt + f

腳本類直接使用：

安裝（以npm爲例）：

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

使用，直接使用prettier的命令

prettier --write <文件路勁+文件名>

添加自定義配置：
支持多種格式：

• .prettierrc 文件，支持yaml和json格式；或者加上擴展名也可以，可選的擴展名有 .yaml/.yml/.json
• .prettierrc.toml 文件
• prettier.config.js or .prettierrc.js 返回一個對象
• 或者在package.json文件中加上prettier對象

json配置文件寫法:

{
  printWidth: 120, //換行的行長度
  tabWidth: 2, //指定每個縮進級別的空格數
  trailingComma: 'none', //多行使用拖尾逗號（默認none）
  eslintIntegration: true, //開啓 Eslint 檢測支持
  semi: false, //結尾不加分號
  singleQuote: true, //使用單引號
  jsxBracketSameLine: true //將>多行JSX元素放在最後一行的末尾
}

js的寫法:

module.exports = {
  printWidth: 120, //換行的行長度
  tabWidth: 2, //指定每個縮進級別的空格數
  trailingComma: 'none', //多行使用拖尾逗號（默認none）
  eslintIntegration: true, //開啓 Eslint 檢測支持
  semi: false, //結尾不加分號
  singleQuote: true, //使用單引號
  jsxBracketSameLine: true //將>多行JSX元素放在最後一行的末尾
}

toml 文件寫法

#  .prettierrc.toml
semi = false
singleQuote = true

yaml文件寫法

# .prettierrc
semi: false
singleQuote: true

package.json文件中加上prettier對象

"prettier": {
    "printWidth": 120,
    "semi": false,
    "singleQuote": true,
    "eslintIntegration": true,
    "jsxBracketSameLine": true
  }

插件形式

另一種方式，如vue等項目中，以插件的形式使用（以eslint爲例，配合eslint使用）：

npm install --save-dev prettier eslint-plugin-prettier

在.eslintrc.js中配置：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

在eslint-loader配置中，添加fix:true 就可以自動格式化了。

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.join(__dirname, 'src')],
        options: {
          fix: true
        }
      }
    ]
}

也可以用eslint的命令來實現，在啓動項目時加上–fix，如eslint --fix

使用eslint-config-prettier 關閉 prettier 跟 eslint 衝突的rules
eslintrc.js中extends的配置設置爲：

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

項目git commit時校驗代碼

安裝lint-staged 和 yorkie

npm install yorkie lint-staged --save-dev

配置

在package.json中設置

 "scripts": {
	...
    "lint": "eslint --ext .js,.mpx src/"
  },
  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node verify-commit-msg.js"
  },
  "lint-staged": {
    "src/**/*.{js,mpx}": [
      "npm run lint",
      "git add"
    ]
  },

關於commit-msg 的配置verify-commit-msg.js，遵循git 提交規範

const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()

const commitRE = /^(revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
    chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
    `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
    `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
    chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.\n`) +
    chalk.red(`  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
  )
  process.exit(1)
}