# vite-vue3-ts base scaffold

vite + vue3 + typescript 的基础项目框架，项目使用技术栈见下表：

<!-- prettier-ignore-start -->

| 类别 | 包/工具 | 备注 |
| --- | ------ | ---- |
|IDE|[VS Code](https://code.visualstudio.com/)| 推荐使用vscode + [Vue-Official插件](https://marketplace.visualstudio.com/items?itemName=Vue.volar)的组合。`.vscode/settings.json`中配置了vscode相关的eslint和stylelint配置; `.vscode/extensions.json`中列出了项目推荐使用的几个插件。 |
|包管理器|[pnpm](https://pnpm.io/zh/)| [pnpm vs npm vs yarn](https://zhuanlan.zhihu.com/p/542738352) |
|构建|[vite](https://cn.vitejs.dev/)| -- |
|框架|[vue 3](https://cn.vuejs.org/)| -- |
|语言|[typescript](https://www.typescriptlang.org/zh/)| -- |
|css预处理器|[sass(scss)](https://sass-lang.com/)| -- |
|语法检查|[eslint](https://eslint.org/)| -- |
|格式化|[prettier](https://prettier.io/)| -- |
|样式语法检查|[stylelint](https://stylelint.io/)| -- |
|git提交预检|[simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) + [lint-staged](https://github.com/okonet/lint-staged)| -- |
|UI库|[element-plus](https://element-plus.gitee.io/zh-CN/)| 根据项目具体情况，如不需要UI库可以不用 |
|状态管理|[pinia](https://pinia.vuejs.org/zh/)| -- |
|路由|[vue-router](https://router.vuejs.org/zh/index.html)| -- |
|css框架|[unocss](https://github.com/unocss/unocss)| unocss兼容windicss和tailwind，同时附带iconify等比较方便的功能; 推荐vscode的unocss插件(antfu.unocss) |

<!-- prettier-ignore-end -->

## 项目搭建记录

1. 创建 package.json
   执行 pnpm init 创建 package.json
   ```sh
   pnpm init
   ```
2. 配置.editorconfig

   新建.editorconfig 文件，输入以下配置，并安装 vscode 插件：EditorConfig for VSCode

   ```sh
   # Editor configuration, see http://editorconfig.org
   # 表示是最顶层的 EditorConfig 配置文件
   root = true
   # 表示所有文件适用
   [*]
   # 设置文件字符集为 utf-8
   charset = utf-8
   # 缩进风格（tab | space）
   indent_style = space
   # 缩进大小
   indent_size = 2
   # 控制换行类型(lf | cr | crlf)
   end_of_line = lf
   # 去除行首的任意空白字符
   trim_trailing_whitespace = true
   # 始终在文件末尾插入一个新行
   insert_final_newline = true
   # 删除一行中的前后空格
   trim_trailing_whitespace = true
   ```

3. 配置 eslint

   执行 pnpm create @eslint/config，根据命令行提示创建 eslint 配置。

   ```sh
   pnpm create @eslint/config
   ```

4. 添加 eslint 脚本到 package.json

   ```json
   {
    ...
     "scripts": {
       ...
       "lint:es:fix": "eslint --fix",
       "lint:es:check": "eslint"
       ...
     }
     ...
   }
   ```

5. 安装&配置 stylelint

   ```sh
   pnpm add -D stylelint stylelint-config-html stylelint-config-standard stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-recommended-vue
   ```

   | package                           | description                                                        |
   | --------------------------------- | ------------------------------------------------------------------ |
   | stylelint                         | stylelint core package                                             |
   | stylelint-config-html             | lint styles in html files                                          |
   | stylelint-config-standard         | stylelint's standard shareable configs                             |
   | stylelint-config-recess-order     | helps to ensure that you have a consistent style order             |
   | stylelint-config-recommended-scss | extend stylelint-config-recommended configs and set rules for SCSS |
   | stylelint-config-recommended-vue  | extend stylelint-config-recommended configs and set rules for Vue  |

   添加 stylelint 脚本到 package.json

   ```json
   {
    ...
     "scripts": {
      ...
      "lint:style:fix": "stylelint ./**/*.{vue,css,scss,html} --fix",
      "lint:style:check": "stylelint ./**/*.{vue,css,scss,html}"
      ...
     }
     ...
   }
   ```

6. 安装&配置 simple-git-hooks 和 lint-staged

   1. 添加 simple-git-hooks 和 lint-staged 脚本到 package.josn:

      ```json
      {
        "simple-git-hooks": {
          "pre-commit": "npx lint-staged"
        },
        "lint-staged": {
          "*.{vue,js,ts,jsx,tsx,md,json}": "eslint --fix",
          "*.{scss,css,vue,html}": "stylelint --fix"
        }
      }
      ```

   2. 安装 simple-git-hooks 和 lint-staged，并设置 prepare 脚本

      ```sh
      pnpm add -D simple-git-hooks lint-staged
      npm pkg set scripts.prepare="simple-git-hooks"
      pnpm prepare
      ```

7. 安装&配置prettier

   ```sh
   pnpm add -D prettier eslint-plugin-prettier
   ```

   新建prettier配置文件prettier.config.js:

   ```js
   /** @type {import('prettier').Options} */
   export default {
     tabWidth: 2, // 缩进
     useTabs: false, // 缩进方式
     semi: true, // 语句结尾是否加分号
     singleQuote: true, // 单引号
     trailingComma: 'es5',
     printWidth: 120, // 换行长度
     bracketSameLine: true,
     arrowParens: 'always', // 箭头函数参数
     bracketSpacing: true, // 对象花括号内是否加空格
     endOfLine: 'auto', // 换行符
     vueIndentScriptAndStyle: true, // vue文件内script和style标签缩进
   };
   ```

   同时更新eslint.config.js，添加prettier相关配置

   ```js
   import globals from 'globals';
   import pluginJs from '@eslint/js';
   import tseslint from 'typescript-eslint';
   import pluginVue from 'eslint-plugin-vue';
   import pluginPrettierRecommendedConfigs from 'eslint-plugin-prettier/recommended';

   /** @type {import('eslint').Linter.Config[]} */
   export default [
     // eslint 默认推荐规则
     pluginJs.configs.recommended,
     // ts 默认推荐规则
     ...tseslint.configs.recommended,
     // vue3 基础推荐规则
     ...pluginVue.configs['flat/recommended'],
     // prettier 默认推荐规则，these recommended rules automatically enables eslint-config-prettier to disable all formatting-related ESLint rules.
     pluginPrettierRecommendedConfigs,
     {
       languageOptions: {
         globals: {
           ...globals.browser,
           ...globals.es2020,
           ...globals.node,
         },
         ecmaVersion: 2020,
         // parser: parserVue,
         parserOptions: {
           parser: tseslint.parser,
         },
       },
     },
     {
       files: ['**/*.vue'],
       rules: {
         'vue/multi-word-component-names': 0,
       },
     },
     {
       rules: {
         '@typescript-eslint/no-explicit-any': 0,
         '@typescript-eslint/no-unused-vars': 0,
       },
     },
   ];
   ```