如何用vite快速搭建一个包含常用配置的前端项目这是我参与新手入门的第1篇文章 vite 一个由 vue 作者尤雨溪开发

这是我参与新手入门的第1篇文章

vite 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：

1. 快速的冷启动
2. 即时的模块热更新
3. 真正的按需编译 至于为什么选择vite，官网上介绍的很详细，可点击查看为什么选择vite，这里主要介绍一下如何用vite搭建一个包含前端开发常用配置的前端项目

初始化项目

查看vite官网可知 yarn create @vitejs/app 这里选择vue框架，再选择vue-ts模板，然后根据提示操作即可

初始化项目也可以采用快捷方式，在命令中写好项目名称和模板 yarn create @vitejs/app project-name --template vue-ts

安装eslint及相关plugin

yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-simple-import-sort -D  

解释说明下相关plugin:

eslint-plugin-vue：Vue.js的官方ESLint插件 @typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码 @typescript-eslint/eslint-plugin：ESLint插件，包含了各类定义好的检测Typescript代码的规范 eslint-plugin-simple-import-sort：自动排序 import 的插件

新建.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  //定义eslint依赖的插件
  plugins: ["@typescript-eslint", "prettier", "simple-import-sort"],
  //定义文件继承的代码规范
  extends: ["plugin:vue/vue3-recommended", "prettier"],
  parserOptions: {
    //解析ts文件
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    ecmaVersion: 2020,
    ecmaFeatures: {
      tsx: true // 允许解析TSX
    }
  },
  rules: {
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/camelcase": "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/html-self-closing": [
      "error",
      {
        html: {
          component: "always",
          normal: "always",
          void: "any"
        },
        math: "always",
        svg: "always"
      }
    ],
    "vue/require-default-prop": "off",
    "vue/no-v-html": "off",
    "sort-imports": "off",
    "import/order": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  },
  overrides: [
    {
      files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
      env: {
        jest: true
      }
    }
  ]
};

安装prettier 用于代码格式化

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier

解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效

eslint-plugin-prettier

将prettier作为ESLint规范来使用

新建.prettierrc文件

{
  "printWidth": 120,
  "proseWrap": "preserve",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "endOfLine": "lf",
  "insertPragma": false,
  "requirePragma": false,
  "useTabs": true
}

如果想在保存时编辑器自动规范代码还需要在vscode的配置文件中添加 "editor.formatOnSave": true

安装stylelint 规范style

yarn add stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recess-order -D

新建.stylelintrc.js

module.exports = {
  defaultSeverity: "error",
  plugins: ["stylelint-prettier"],
  extends: ["stylelint-prettier/recommended", "stylelint-config-recess-order"],
  rules: {}
};

安装commit-message 用于规范git message

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

新建.commitlintrc.js文件

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "release",
        "wip",
        "build",
        "chore",
        "ci",
        "docs",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style",
        "test",
        "merge"]
    ]
  }
};

安装ls-lint 用于规范文件夹命名

yarn add @ls-lint/ls-lint -D

新建.ls-lint.yml文件

# 文件名及文件夹名命名规则
ls:
  src/components/*:
    .dir: PascalCase # 组件文件夹名命名模式
  src/views:
    .dir: camelCase | snake_case
  src/store:
    .dir: camelCase | kebab-case
  src/router:
    .dir: camelCase | kebab-case | regex:^__.+$
  src:
    .ts: camelCase
    .d.ts: camelCase | kebab-case
ignore:
  - .git
  - node_modules

安装husky和lint-staged

用于对要提交的文件代码检查及格式化 yarn add husky lint-staged -D 修改package.json

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{vue,ts,js,scss}": [
      "prettier --write",
      "git add"
    ]
  }

配置项目运行任务

在vscode中选择终端->配置默认生成任务即可在.vscode文件夹下生成tasks.json文件，内容如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "label": "npm: dev",
      "detail": "vite",
      "group": {
        "kind": "build",
        "isDefault": true // 设置成默认任务
      }
    }
  ]
}

运行默认任务的快捷键是ctrl+shift+b，这样每次开发时不用在命令行输入命令 yarn dev，直接按快捷键就行

配置项目中需要的vscode扩展

在项目根目录中的.vscode文件夹下新建extensions.json文件 将下面内容填写到extensions.json文件中

{
  "recommendations": [
    "shenjiaolong.vue-helper",
    "octref.vetur",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint"
  ]
}

如果参与该项目的同事vscode中没有安装所列插件，则会在右下角提示是否安装