代碼規(guī)范

作為前端工程化的第一步，就是要統(tǒng)一代碼規(guī)范。而前端的代碼規(guī)范，用三個(gè)插件就能保證(husky lint-staged prettier)。

安裝

命令行如下:
npm i -D husky lint-staged prettier eslint-plugin-prettier eslint-config-prettier

分析

一 husky與 lint-staged 插件

husky是對(duì)git操作的周期進(jìn)行hook的插件，常用的情景是在git commit 操作前對(duì)代碼進(jìn)行l(wèi)int檢查以及代碼格式化。

lint-staged 配合husky使用的，當(dāng)中途集成規(guī)范后如果進(jìn)行l(wèi)int，那往往出現(xiàn)成百上千個(gè)錯(cuò)誤，為了避免這種情況，該插件的作用就是只對(duì)特定(比如 git add)的代碼進(jìn)行檢測(cè)。

代碼示例

//package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
}

可以參考這篇文章

二 prettier 插件

prettier是統(tǒng)一代碼風(fēng)格的一個(gè)插件。為啥我們有了eslint后，還需要prettier呢，那當(dāng)然是因?yàn)閑slint有限制，要統(tǒng)一還是得用prettier。就看看各大大廠，github上的網(wǎng)紅項(xiàng)目都用它，也值得我們使用。

安裝命令分析

prettier的安裝配置較為復(fù)雜，需要與eslint共同使用。

安裝命令: npm i -D prettier eslint-plugin-prettier eslint-config-prettier

eslint-plugin-prettier 是讓eslint用prettier風(fēng)格就行代碼檢查,配置代碼如下

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

eslint-config-prettier 當(dāng)eslint 與 prettier沖突時(shí)，可以通過(guò)該插件避免，配置代碼如下:

//.eslintrc.js
{
  extends: [
    'standard', //使用standard做代碼規(guī)范
    "prettier",
  ],
}

兩個(gè)插件結(jié)合用:

//.eslintrc.js
{
  "extends": ["plugin:prettier/recommended"]
}

可以參考這篇文章

三個(gè)插件合一

綜合三個(gè)插件，先格式化，再eslint修復(fù)。

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },

最后代碼如下

//package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },
}

//.eslintrc.js 以vue為模板
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    "plugin:prettier/recommended",
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  rules: {
    "prettier/prettier": "error",
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "no-param-reassign": [2, { props: false }],
    "import/no-unresolved": "off",
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

//.prettierrc.js
module.exports = {
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all"
}