MOFASHY

Live Is Life

Vue3/Vite 创建 uni-app 工程及相关配置

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序等多个平台。

创建项目

创建以 Javascript 开发的工程

  • 使用正式版
1
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
  • 使用开发版
1
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

创建以Typescript 开发的工程

1
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

添加 sass 预处理器

1
pnpm add sass -D

配置 eslint

安装 ESLint

1
pnpm add eslint -D

初始化 ESLint 配置

1
pnpm create @eslint/config

使用 ESLint 做什么，我选择第三个

1
2
3
4
? How would you like to use ESLint? ...
  To check syntax only  // 仅检查语法
  To check syntax and find problems  // 检查语法并发现问题
> To check syntax, find problems, and enforce code style // 检查语法、发现问题并强制执行代码样式

在哪种项目模块规范中使用，我选择第一个

1
2
3
4
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

在哪个框架中使用

1
2
3
4
? Which framework does your project use? ...
  React
> Vue.js
  None of these

是否使用 Typescript 和代码在哪里运行，我选择了使用 Typescript 和两个环境都选择

1
2
√ Does your project use TypeScript? · No / **Yes**
√ Where does your code run? · browser, node

希望如何定义项目的样式，这里看实际需要，因为后面还要配置 Prettier，我选择了第二个

1
2
3
4
5
√ How would you like to define a style for your project? …
  Use a popular style guide
❯ Answer questions about your style
  ## next
√ How would you like to define a style for your project? · prompt

想用什么格式的配置文件，我选了 Javascript

1
2
3
4
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

选择缩进风格，看实际需要，我选择了 Tabs

1
2
3
? What style of indentation do you use? ...
> Tabs
  Spaces

字符串使用双引号还是单引号，看实际需要，我选了单引号

1
2
3
? What quotes do you use for strings? ...
  Double
> Single

使用哪种结束符，Windows 是 CRLF，Unix 是 LF，我这里选择了默认，因为后面在.eslintrc.js改成了不限制，即在 类 Unix 平台和 Windows 平台都不做警示

1
2
3
? What line endings do you use? ...
> Unix
  Windows

是否使用分号，我选择了 No

1
? Do you require semicolons? » No / Yes

接下来会提示需要安装哪些依赖，以及是否立即安装，我选择了 Yes

1
2
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes

选择包管理工具，看实际需要，我这里选择了 pnpm

1
2
3
4
? Which package manager do you want to use? ...
  npm
  yarn
> pnpm

随后安装完依赖就会在项目的跟目录下生成.eslintrc.js文件，根据提示，我把后缀改成了.cjs，并且 eslint 已经生效了（如果不生效，建议重启 VS Code）

根据实际需要，可以新增一个 ESLint 的忽略文件.eslintignore，并根据实际需要配置需要忽略的目录或文件

VSCode 添加 ESLint 插件

VSCode 全局配置

关闭默认的保存并格式，开启自动格式化修复

1
2
3
4
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": false,

配置 Prettier

安装 Prettier

1
pnpm add prettier -D

安装 ESLint 与 Prettier 结合使用的依赖

1
pnpm i eslint-config-prettier eslint-plugin-prettier -D

配置 Prettier

根据实际需要在根目录下添加.prettierrc.js或.prettierrc.cjs，并进行相关配置，我这里只是几个规则，就配置在.eslintrc.cjs里了，如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// .exlintrc.cjs
module.exports = {
    // ... 省略 ...
    rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行结束不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'] // 关闭 props 解构的校验
  }
}

VSCode 添加 Prettier 插件

VSCode 默认安装了该插件，如果没有则可以自己安装

配置 Stylelint

Stylelint，一个强大的 CSS Lint工具，可以帮助你避免语法错误和同意代码风格。

初始化 Stylelint，在根目录下生成 .stylelintrc.json文件

1
pnpm create stylelint

添加 Stylelint 格式化规则，根据实际需要添加其他规则

1
pnpm i stylelint stylelint-config-standard stylelint-config-standard-scss -D

修改项目根目录下的 .stylelintrc.json

1
2
3
4
5
6
{ 
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss"
  ]
}

VSCode 安装 Stylelint 插件

配置 Stylelint

可以根据实际需要在 VSCode 全局配置文件 settings.json 或 为单独项目进行配置，我这里是为单独项目进行配置，修改项目根目录下的文件（如果不存在则自行添加）：./.vscode/settings.json

1
2
3
4
5
6
{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss"]
}

说明：前三行是关闭 vscode 的默认校验，最后一行是开启 styelint 校验 css和 scss 样式文件，这些配置在 Stylelint 插件说明里就有，其他配置可以参考插件说明

配置 huskey

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

使用介绍：🐶 husky | 🐶 husky (typicode.github.io)

初始化 git

1
git init

初始化 huskey

1
pnpm dlx husky-init && pnpm install

修改 .huskey/pre-commit 文件

默认会执行全量检查，所以需要配合后面的 lint-staged 使用

1
pnpm lint

配置 lint-staged

1
pnpm i lint-staged -D

配置 package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ],
    "*.{css,scss}": [
      "stylelint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

修改 .huskey/pre-commit 文件

1
pnpm lint-staged
技术 uni-appvite