欢迎光临
我的个人博客网站

前端工程化最佳实践


一、代码格式化规范

目前项目中使用的 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 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端工程化最佳实践
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏