关于vue.js:前端工程化最佳实践

一、代码格式化标准

目前我的项目中应用的 vetur 插件内置有 prettier 格式化，也能够装置 prettier code formatter 插件，eslint 也蕴含局部代码格调查看的性能，eslint 和 prettier 自身就有局部规定是抵触的，导致格式化凌乱，所以必须对立代码格式化标准

1、vscode 中的配置优先级

• 默认配置文件（优先级最低）
• 用户配置文件（优先级次之）
• 工程配置文件（优先级最高）

为了对立大家的代码格调，对立应用我的项目中的配置文件作为配置项。因为 ESLint 的次要性能是代码质量检查，Prettier 的次要性能是代码格调查看，所以不要在 ESLint 中去配置代码格调相干的规定。

• prettier。一个很风行的代码格式化工具，你很容易在编辑器找到实现它的各种插件，这里用它在代码提交前做代码格式化。
• eslint。代码查看工具。eslint 也能够负责一部分代码格局查看的工作，然而 prettier 曾经做的很好了，所以我便没用 eslint 的代码格局查看，只让其负责代码谬误查看。

2、解决配置抵触

npm i eslint-config-prettier  eslint-plugin-prettier -D

eslint-config-prettier 敞开 Eslint 中与 Prettier 抵触的选项，eslint-plugin-prettier 将 prettier 的规定设置为 eslint 的规定，对不合乎规定的进行提醒

3、prettierrc 配置文件阐明

//.prettierrc.js
module.exports = {
    printWidth: 160, // 编辑器每行的长度，默认 80
    tabWidth: 4, // 制表符 tab 的宽度，默认值是 2
    useTabs: false, // 代码缩进是否用制表符 tab，默认 false
    semi: true, // 是否应用分号，默认 true，应用分号
    singleQuote: true, // 是否应用单引号，默认为 false
    quoteProps: 'as-needed', // 对象属性的引号应用 as-needed 仅在须要的时候应用 consistent 有一个属性须要引号，就都须要引号 preserve 保留用户输出的状况
    jsxSingleQuote: false,
    trailingComma: 'none', // 开端逗号 none 开端没有逗号 es5 es5 无效的中央保留 all 在可能的中央都加上逗号
    bracketSpacing: true, // 字面量对象括号中的空格，默认 true true - Example: {foo: bar}.  false - Example: {foo: bar}.
    jsxBracketSameLine: false,
    arrowParens: 'avoid', // 箭头函数中的括号 always avoid
    htmlWhitespaceSensitivity: 'ignore',
    vueIndentScriptAndStyle: false,// 是否给 vue 中的 <script> and <style> 标签加缩进
    endOfLine: 'auto', // 行开端标识
    eslintIntegration: true, // 不让 prettier 应用 eslint 的代码格局进行校验
}

4、eslint 配置文件阐明

//.eslintrc.js
module.exports = {
    root: true,
    env: {node: true},
    'extends': [
        'plugin:vue/essential',
        "plugin:prettier/recommended",
        // '@vue/standard'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 'vue/script-indent': ['error', 4, { 'baseIndent': 1}],
        // "quotes": [2, "single", { "avoidEscape": true}],
        // 应用 prettier 来替换 eslint 的规定
        "prettier/prettier": "error",
        "no-var": 2,// 禁用 var，用 let 和 const 代替
        "no-unused-vars": [2, { "args": "none"}],  // 打消未应用的变量  不查看函数的参数
        "no-redeclare": 2, // 禁止屡次申明同一变量
        "no-dupe-keys": 2,// 在创建对象字面量时不容许键反复
        'eqeqeq': ['error', 'always', { null: 'ignore'}], // 强制应用全等
    },
    parserOptions: {
        parser: 'babel-eslint',
        "ecmaVersion": 6,
        "sourceType": "module"
    }
}

三、代码提交标准

1、装置 husky 和 lint-stage

//husky 新版本配置办法齐全不一样，这里锁定版本号
npm i husky@4.2.5 lint-stage -D

Husky 可能阻止不标准的代码提交和推送，确保本地的代码曾经通过查看能力 push 到近程。

lint-stage 的作用是只对以后批改后的文件进行扫描，即进行 git add 退出到 stage 区的文件进行扫描即可，实现对增量代码进行查看

2、配置 commitlint 提交规定

npm i @commitlint/cli @commitlint/config-conventional -D

//commitlint.config.js
// https://commitlint.js.org/#/
module.exports = {
    extends: ["@commitlint/config-conventional"],
    rules: {// 'name:[level,'always', 72]'，level 可选 0, 1, 2，0 为 disable，1 为 warning，2 为 error，第二位为利用与否，可选 always| never，第三位该 rule 的值
        // update: 更新某性能(不是 feat, 不是 fix)
        // feat: 新增性能(feature)
        // fix: bug 修复
        // style: 款式调整
        // merge：分支合并
        // revert：回滚某个更早之前的提交

        // build：次要目标是批改我的项目构建零碎 (例如 glup，webpack，rollup 的配置等) 的提交
        // ci：次要目标是批改我的项目持续集成流程 (例如 Travis，Jenkins，GitLab CI，Circle 等) 的提交
        // docs：文档更新
        // perf：性能, 体验优化
        // refactor：重构代码(既没有新增性能，也没有修复 bug)
        // test：新增测试用例或是更新现有测试
        // chore：不属于以上类型的其余类型
        'type-enum': [2, 'always', ['update', 'feat', 'fix', 'style', 'merge', 'revert', 'build', 'ci', 'docs', 'perf', 'refactor', 'test', 'chore']],
        'type-case': [0], //type 小写
        'type-empty': [0], //type 不为为空
        'scope-empty': [0],
        'scope-case': [0],
        'subject-full-stop': [0, 'never'],
        'subject-case': [0, 'never'],
        'header-max-length': [0, 'always', 72]
    }
};

3、配置 package.json 文件

{
  "name": "name",
  "version": "0.1.0",
  "description": "description",
  "author": "author",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {"src/**/*.{js,jsx,vue,json,css,less,scss,sass}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "element-ui": "^2.12.0",
    "md5": "^2.2.1",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@commitlint/cli": "^12.1.4",
    "@commitlint/config-conventional": "^12.1.4",
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-plugin-unit-mocha": "^3.5.0",
    "@vue/cli-service": "^3.5.3",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "compression-webpack-plugin": "^2.0.0",
    "eslint": "^5.8.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^5.0.0",
    "husky": "^4.2.5",
    "lint-staged": "^11.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "vue-template-compiler": "^2.5.21"
  }
}

4、提交代码

husky 会在你提交前，调用 pre-commit 钩子，执行 lint-staged，如果代码不合乎 prettier 配置的规定，会进行格式化；而后再用 eslint 的规定进行查看，如果有不合乎规定且无奈主动修复的，就会进行此次提交。如果都通过了就会讲代码增加到 stage，而后 commit。

git add .
git commit -m "feat: commit 内容"
git push

本文由博客一文多发平台 OpenWrite 公布！