前端项目必备的代码规范

无规矩不成方圆，对于我们做项目也是一样。需要遵守一定的规则，方能更高效的开发及扩展等。在此就把该规则整理如下，大家参考一下，也希望能得到宝贵的意见。

ESlint 的用法

eslint.bootcss.com/docs/user-g…

Vue

eslint.vuejs.org/

1、安装eslint、eslint-plugin-vue

npm install eslint eslint-plugin-vue --save-dev

2、配置.eslintrc.js

vue2

npm install @babel/eslint-parser --save-dev

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@babel/eslint-parser',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/strongly-recommended'
  ],
  plugins: [
    'vue'
  ],
  rules: {}
}

vue3 + ts

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended'
  ],
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {}
}

React

1、安装eslint、eslint-plugin-react、@babel/eslint-parser

npm install eslint eslint-plugin-react @babel/eslint-parser --save-dev

2、配置.eslintrc.js

module.exports = {
  root: true,
  parser: '@babel/eslint-parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true
    },
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  plugins: [
    'react'
  ],
  rules: {}
}

在VSCode中集成ESLint配置

1、安装eslint插件

2、配置eslint settings.json

{
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
  },
  "eslint.codeActionsOnSave.mode": "all",
  "eslint.validate": [
      "vue",
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
  ],
  "eslint.codeAction.showDocumentation": {
      "enable": true
  },
  "eslint.probe": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "html",
      "vue",
      "markdown"
  ],
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": -1,
  "eslint.options": {}
}

husky和lint-staged代码检查工作流

1、安装husky、lint-staged

typicode.github.io/husky/#/

www.npmjs.com/package/lin…

npm install husky lint-staged --save-dev

2.配置package.json

{
  "scripts": {
      "lint": "lint-staged", // 执行lint-staged
      "prepare": "husky install" // 生成.husky文件
  },
  "lint-staged": {
      "*.{js,jsx,ts,tsx}": [
          "eslint --fix",
          "git add"
      ]
  }
}

3、配置git hooks

npx husky add .husky/pre-commit "npm run lint"

代码提交规范

1、安装commitlint

commitlint.js.org/#/reference…

npm install  @commitlint/cli @commitlint/config-conventional --save-dev

2、配置package.json

{
  "commitlint": {
      "extends": ["@commitlint/config-conventional"],
      "rules": {
          "type-enum":[
              2,
              "always",
              [
                  "feat",
                  "fix",
                  "docs",
                  "style",
                  "refactor",
                  "test",
                  "revert",
                  "chore"
              ]
          ],
          "type-case": [0],
          "type-empty": [0],
          "scope-empty": [0],
          "scope-case": [0],
          "subject-full-stop": [0, "never"],
          "subject-case": [0, "never"],
          "header-max-length": [0, "always", 72]
      }
  }
}

3、配置git hooks

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'