代碼規(guī)范

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

安裝

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

分析

一 husky與 lint-staged 插件

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

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

代碼示例

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

可以參考這篇文章

二 prettier 插件

prettier是統(tǒng)一代碼風格的一個插件。為啥我們有了eslint后唯鸭，還需要prettier呢须蜗，那當然是因為eslint有限制，要統(tǒng)一還是得用prettier目溉。就看看各大大廠明肮，github上的網紅項目都用它，也值得我們使用缭付。

安裝命令分析

prettier的安裝配置較為復雜柿估，需要與eslint共同使用。

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

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

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

eslint-config-prettier 當eslint 與 prettier沖突時陷猫，可以通過該插件避免秫舌，配置代碼如下:

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

兩個插件結合用:

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

可以參考這篇文章

三個插件合一

綜合三個插件，先格式化绣檬，再eslint修復足陨。

  "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"
}