全球观焦点：企业级项目模板的配置与集成（Vite + Vue3 + TypeScript）

企业级项目模板的配置与集成（Vite + Vue3 + TypeScript）

1、项目介绍

项目使用：eslint + stylelint + prettier来对我们代码质量做检测和修复。

【资料图】

需要使用husky来做commit拦截

需要使用commitlint来统一提交规范

需要使用preinstall来统一包管理工具。

2、环境准备

• node v16.14.2
• pnpm 8.0.0（因为懒得安装新版的node，以下我使用npm进行管理）

3、初始化项目

本项目使用Vite进行构建。

pnpm：performant npm，意思是高性能的npm，解决了npm/yarn内部潜在的bug，极大地优化了性能，被誉为“最先进的包管理工具”

npm i -g pnpm

4、项目配置

4.1、eslint配置

这个插件的目标是提供一个插件化的JS代码检测工具，TS作为JS的超集，自然也可以检测。

npm i eslint -D

生成配置文件：.eslint.cjs

npx eslint --init

4.2、Vue3环境代码校验插件

安装：

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

修改一下.eslint.cjs

module.exports = {    "env": {        "browser": true,        "es2021": true    },    "extends": [        "eslint:recommended",        "plugin:vue/vue3-essential",        "plugin:@typescript-eslint/recommended"    ],    "overrides": [    ],    "parser": "@typescript-eslint/parser",    "parserOptions": {        "ecmaVersion": "latest",        "sourceType": "module"    },    "plugins": [        "vue",        "@typescript-eslint"    ],    "rules": {        // eslint（https://eslint.bootcss.com/docs/rules/）        "no-var": "error", // 要求使用let 或 const，禁止var        "no-multiple-empty-lines": ["warn", { max: 1}], // 不允许多个空行        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",        "no-unexpected-multiline": "error", // 禁止多余空行        "no-useless-escape": "off", // 禁止不必要的转义字符        // typescript（https://typescript-eslint.io/rules）        "@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量        "@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore        "@typescript-eslint/no-explicit-any": "off", // 禁止使用any        "@typescript-eslint/no-non-null-assertion": "off",        "@typescript-eslint/no-namespace": "off", // 禁止使用自定义TypeScript模块        "@typescript-eslint/semi": "off",        // eslint-plugin-vue（https://eslint.vuejs.org/rules/）        "vue/multi-word-component-names": "off", // 要求组件名称始终为“-”链接的单词        "vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量