vue3 admin 保姆教学指南｜项目规范集成教程，看完秒懂项目中各种奇怪的文件和配置-六虎

一个项目要有一致的标准，需求运用eslint+stylelint+prettier来对咱们代码质量做检测和修正，需求运用husky来做commit拦截，需求运用commitlint来一致提交标准，需求运用preinstall来一致包办理东西。本文教咱们怎么一步一步来集成自己的项目标准。

环境准备

node v16.17.0
pnpm 7.11.0

项目初始化

本项目运用vite进行构建，vite官方中文文档参考：cn.vitejs.dev/guide/

项目初始化指令

pnpm create vite

咱们这里挑选运用vue+typescript的方法进行初始化。

Project name命名为guigu-sph-mall-admin,意为尚品汇商城办理系统。

初始化完结以后进入guiug-sph-mall目录，装置依靠pnpm install,然后运转项目pnpm run dev，在浏览器翻开http://localhost:5173/，即可看到预览作用：

vue3 admin 保姆教学指南｜项目规范集成教程，看完秒懂项目中各种奇怪的文件和配置

装备eslint和prettier

1.eslint验证代码是否契合界说的标准

需求装置以下插件

eslint-plugin-vue：vue.js的Eslint插件（查找vue语法过错，发现过错指令，查找违规风格攻略）
eslint-plugin-prettier：运转更美丽的Eslint，使prettier规矩优先级更高，Eslint优先级低
eslint-config-prettier：让所有与prettier规矩存在抵触的Eslint rules失效，并运用prettier进行代码查看
@babel/eslint-parser：该解析器允许运用Eslint校验所有babel code

首要装置eslint

pnpm i -D eslint

生成装备文件

// 生成装备文件，.eslintrc.js
npx eslint --init

装备项如下图所示

再装置下面的依靠

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier @babel/eslint-parser

修正装备文件如下

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'space-before-function-paren': ['error', 'never'],
    semi: 0, // 完毕不要分号
  },
}

装备.eslintignore, 避免校验打包的产品

// .eslintignore 装备, 避免校验打包的产品
dist
node_modules

在package.json 中增加运转脚本

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

2.pretter格式化代码契合界说的标准

装置包

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

在.prettierrc.json增加如下规矩：

// .prettierrc.json
{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

测试一下代码查看是否收效了，咱们在main.ts中修正成如下内容

能够看到代码已经红了，然后运转npm run lint来查看一下代码不标准原因

能够看到这里有两处过错，运转npm run fix修正这个过错

这样就契合咱们界说的代码标准了。

到此，咱们的eslint和prettier装备完毕。

假如呈现下面报错，卸载vetur插件，装置TypeScript Vue Plugin (Volar)、Vue Language Features (Volar)插件即可。

装备stylelint

stylelint为css的lint东西。可格式化css代码，查看css语法过错与不合理的写法，指定css书写次序等。

装置依靠

咱们的项目中运用less作为预处理器，装置以下依靠：

pnpm add stylelint postcss postcss-less postcss-html stylelint-config-prettier stylelint-config-recommended-less stylelint-config-standard stylelint-config-standard-vue stylelint-less stylelint-order -D

依靠说明

stylelint: css款式lint东西
postcss: 转换css代码东西
postcss-less: 辨认less语法
postcss-html: 辨认html/vue 中的标签中的款式
stylelint-config-standard: Stylelint的标准可同享装备规矩，具体可查看官方文档
stylelint-config-prettier: 封闭所有不必要或可能与Prettier抵触的规矩
stylelint-config-recommended-less: less的引荐可同享装备规矩，具体可查看官方文档
stylelint-config-standard-vue: lint.vue文件的款式装备
stylelint-less: stylelint-config-recommended-less的依靠，less的stylelint规矩集合
stylelint-order: 指定款式书写的次序，在.stylelintrc.js中order/properties-order指定次序

增加 .stylelintrc 装备文件

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-recommended-less",
    "stylelint-config-standard-vue"
  ],
  "plugins": ["stylelint-order"],
  "overrides": [
    {
      "files": ["**/*.(less|css|vue|html)"],
      "customSyntax": "postcss-less"
    },
    {
      "files": ["**/*.(html|vue)"],
      "customSyntax": "postcss-html"
    }
  ],
  "ignoreFiles": [
    "**/*.js",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.ts",
    "**/*.json",
    "**/*.md",
    "**/*.yaml"
  ],
  "rules": {
    "no-descending-specificity": null,
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["v-deep"]
      }
    ],
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["deep"]
      }
    ],
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ]
  }
}

装备指令

"scripts": {
	"lint:style": "stylelint src/**/*.{css,less,vue} --cache --fix"
}

终究装备一致的prettier来格式化咱们的js和css，html代码

 "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "fix": "eslint src --fix",
    "format": "prettier --write "./**/*.{html,vue,ts,js,json,md}"",
    "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
    "lint:style": "stylelint src/**/*.{css,less,vue} --cache --fix"
  },

当咱们运转pnpm format的时分，会把代码直接格式化

vscode保存文件主动修正代码

完成每次保存代码时，主动履行lint指令来修正代码的过错。这个操作需求依靠eslint插件来完结，需求提前在vscode插件商场装置好eslint。然后有两种方法能够装备：

第一种：

直接在项目的跟路径创立.vscode/settings.json文件，然后在其中加入以下装备。

{
    // 敞开主动修正
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

第二种：

用shift+cmd+p,翻开搜索指令框，输入settings，挑选下面这个

这个文件是vscode的系统装备文件，直接把

// 敞开主动修正
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }

这段代码复制进去，任何项目翻开，都会主动保存文件了。

这里为了让别的人也能方便的运用，咱们的项目中直接采用第一种方法。

下面是完好的装备：

{
  // 敞开主动修正
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  // 保存的时分主动格式化
  "editor.formatOnSave": true,
  // 默许格式化东西挑选prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 装备该项，新建文件时默许便是space：2
  "editor.tabSize": 2,
  // stylelint校验的文件格式
  "stylelint.validate": ["css", "less", "vue", "html"]
}

装备husky

在上面咱们已经集成好了咱们代码校验东西，可是需求每次手动的去履行指令才会格式化咱们的代码。假如有人没有格式化就提交了，那这个标准就没什么用。所以咱们强制让开发人员按照代码标准来提交。

要做到这件工作，能够运用husky来在代码提交之前出发git hook，然后履行pnpm format来主动的格式化咱们的代码。

装置husky

pnpm install -D husky

履行

npx husky-init

会在根目录下生成个一个.husky目录，在这个目录下面会有一个pre-commit文件，这个文件里面的指令在咱们履行commit的时分就会履行

装置lint-staged

pnpm install -D lint-staged

装备指令

{
  "scripts": {
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,vue}": [
      "prettier --write",
      "eslint --fix",
      "stylelint --fix",
      "git add"
    ]
  },
}

在pre-commit文件增加指令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm lint-staged

当咱们对代码进行commit操作的时分，就会履行指令，对代码进行格式化，然后再提交。

装备commitlint校验提交信息

关于咱们的commit信息，也是有你一致标准的，不能随意写，比方下面的：

要让每个人都按照一致的标准来履行，咱们能够运用commitlint来完成。

装置包

pnpm add @commitlint/config-conventional @commitlint/cli -D

增加装备文件，新建commitlint.config.cjs(留意是cjs)，然后增加下面的代码：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规矩
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build',
      ],
    ],
    '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],
  },
}

装备scripts

# 在scrips中增加下面的代码
{
"scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
  },
}

装备完毕，现在当咱们填写commit信息的时分，前面就需求带着下面的subject

'feat',
'fix',
'docs',
'style',
'refactor',
'perf',
'test',
'chore',
'revert',
'build',

装备husky

npx husky add .husky/commit-msg

在生成的commit-msg文件中增加下面的指令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint

当咱们 commit 提交信息时，就不能再随意写了，必须是 git commit -m ‘fix: xxx’ 契合类型的才能够，需求留意的是类型的后边需求用英文的 :，而且冒号后边是需求空一格的，这个是不能省略的。否则就会像下面这样报错了：

提交成功

强制运用pnpm下载包

根目录创立scritps/preinstall.js文件，增加下面的内容

if (!/pnpm/.test(process.env.npm_execpath || '')) {
  console.warn(
    `\u001b[33mThis repository must using pnpm as the package manager ` +
    ` for scripts to work properly.\u001b[39m\n`,
  )
  process.exit(1)
}

装备指令

"scripts": {
	"preinstall": "node ./scripts/preinstall.js"
}

当咱们运用npm或许yarn来装置包的时分，就会报错了。原理便是在install的时分会触发preinstall（npm提供的生命周期钩子）这个指令。

终究咱们的项目被集成了这个样子

上述标准适集成思路用于各种项目，比方UI组件库，东西库，后台办理系统等等，只不过针对不同的技能有不同的lint包来装备，只需看懂了我的教程，你就能够自己装备了。

代码地址

gitee.com/guigu-fe/gu…

欢迎star,欢迎PR。

vue3 admin 保姆教学指南 ｜ 项目规范集成教程，看完秒懂项目中各种奇怪的文件和配置

环境准备

项目初始化

装备eslint和prettier

装备stylelint

vscode保存文件主动修正代码

装备husky

装备commitlint校验提交信息

强制运用pnpm下载包

代码地址

相关文章

【Babel 小玩具】如何用 Babel 为代码自动引入依赖

Python中的可变和不可变对象及使用方法

大数据闯关之MySQL基础篇（一）：MySQL安装及基础介绍

设置代码仅在 DEBUG/RELEASE 中编译

作者信息

vue3 admin 保姆教学指南｜项目规范集成教程，看完秒懂项目中各种奇怪的文件和配置