vuecli项目环境配置配置 prettier自动格式化、拦截git commit 规范提交信息、代码提交验证等....

配置 prettier自动格式化、拦截git commit 规范提交信息、代码提交验证等

prettier

npm i -D prettier
配置完需要出去 vscode 生效 .prettierrc 配置
useTabs boolean tab 缩进还所空格缩进
tabWidth number tab 是空格时候，是几个空格
printWidth number 当行字符的长度推荐 80
singleQuote boolean 使用单引号还所双引号
trailingComma 多行输入的尾逗号是否添加
semi 语句末尾是否要加分号

配置完成后 package.json -> scripts 内 (配置脚本) prettier: 'prettier --write .' // 自动格式化本项目内所有需要格式化的文件

不需要自动格式化的

create /.prettierignore

eslint 和 prettier 冲突

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

.eslintrc.js extends: [

..., 'plugin:prettier/recommended' ]

拦截 git commit

husky 是一个 git hook 工具，可以帮助我们触发 git 提交的各个阶段：pre-commit、commit-msg、pre-push

npm install husky-init -D
npx husky-init

// git commit 之前执行lint 自动格式化

// package.json scripts
  {
    ...,
    "lint": "vue-cli-service lint",
  }


  // /.husky/pre-commit
  npm run lint

规范提交信息 commitize

npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact

这个命令会帮助我们安装 cz-conventional-changelog：

并且在 package.json 中进行配置：

{
  ...,
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

之后在要提交时候

git add .
npx cz

代码提交验证

拦截手动不规范的 commit 提交

npm i @commitlint/config-conventional @commitlint/cli -D
在根目录创建 commitlint.config.js 文件，配置 commitlint

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

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

/.husky 没有自动生成 commit-msg 文件的话手动创建 commit-msg

commit-msg

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit

scripts: {
  ...,
  commit: 'cz'  // npx cz
}

路由安装

npm install vue-router@next

// router/index.ts
import {
  createRouter,
  creteWebHashHistory,
  RouteRecordRaw, // 路由类型（可以 ctrl 大法进到 vue-router 内看类型）
} from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/login',
  },

  {
    path: '/login',
    component: () =>
      import(/* webpackChunkName: "login" */ '@/views/login/Login.vue'),
  },
];

const router = createRouter({
  routes,
  history: createWebHashHistory,
});

export default router;

Vuex 安装

npm install vuex@next

import { createStore } from 'vuex';

export default createStore({
  state: () => ({
    name: 'cqc
  })
})

element-plus 安装

npm install element-plus

// 手动引用 (太麻烦)

import { ElButton } from 'element-plus';

import 'element-plus/lib/theme-chalk/el-button.css';
import 'element-plus/lib/theme-chalk/base.css';

// ------------------

按需引用

npm install babel-plugin-import -D npm install sass-loader@10.1.1 sass -D

// 按需引用

// /babel.config.js
module.exports = {
  ...,
  plugins: [
    ...,
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ]
}


// 自定义插件 /globalComponent
// index.ts
import { App } from 'vue';
import { ElButton } from 'element-plus';

const elementComponents = [ElButton];


export const registerApp = {
  install: (app: App): App => {
    elementComponents.map((c) => {
      app.component(c.name, c);
    });
    return app;
  },
};


// main.ts
import { registerApp } from '@/globalComponent';
import 'element-plus/lib/theme-chalk/base.css';

...

app.use(registerApp)

Axios 安装

npm install axios

1;