代码规范

代码规范

作为前端工程化的第一步，就是要统一代码规范。而前端的代码规范，用三个插件就能保证(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 操作前对代码进行lint检查以及代码格式化。

lint-staged 配合husky使用的，当中途集成规范后如果进行lint，那往往出现成百上千个错误，为了避免这种情况，该插件的作用就是只对特定(比如 git add)的代码进行检测。

代码示例

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

可以参考这篇文章

二 prettier 插件

prettier是统一代码风格的一个插件。为啥我们有了eslint后，还需要prettier呢，那当然是因为eslint有限制，要统一还是得用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做代码规范
    "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"
}