基于 UniApp +Vite + Vue3 + TypeScript + Pinia 项目搭建
UniApp 工程搭建
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
参考链接
配置 Prettier
配置ESLint
1. 引入ESLint
npx eslint --init
第一个问题是：
- 你希望用 ESLint 来干嘛？
- 我们选择最全面的那个：检查语法，发现问题，并强制统一代码样式
$ npm init @eslint/config
? 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
第二个问题是：
- 你的项目用的是什么模块系统？
- 因为是运行在浏览器端，选择 ESModule
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
第三个问题是：
- 你用的什么框架？
- 选择 Vue
? Which framework does your project use? …
React
❯ Vue.js
None of these
第四个问题是：
- 你是否使用 TypeScript？
- 选择 Yes
? Does your project use TypeScript? › No / Yes
第五个问题是：
- 你的代码运行在什么环境？（这个可以多选）
- 选择 Browser 浏览器环境
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
Browser
Node
第六个问题是：
- 你想定义怎样的代码风格？
- 选择使用一个流行的代码风格
? How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
第七个问题是：
- 你想使用哪个样式风格？
- standard-with-typescript
Which style guide do you want to follow? ·
> standard-with-typescript
第八个问题是：
- 配置文件用什么格式？
- 就选 JavaScript 吧（生成 eslintrc.js 文件）
? What format do you want your config file to be in? …
❯ JavaScript
YAML
JSON
第九个问题是：
- 你是否想立刻安装
- 选择是
Would you like to install them now? Yes
第十个问题是：
- 选择哪个包管理工具
- 我选择的是pnpm
Which package manager do you want to use? · pnpm
2. 解决ESLint和Prettier规则冲突问题
ESLint 和 Prettier 组合, 以 Prettier 为主, 不符合 Prettier 的标准时, 会报一个 ESLint 错误, 同时也可以使用eslint --fix 来进行格式化.
1. 安装 eslint-config-prettier、eslint-plugin-prettier 和 prettier
pnpm add -D eslint-config-prettier eslint-plugin-prettier prettier
2. 修改 eslintrc 文件
{
"extends": [
"plugin:prettier/recommended"
]
}
// 相当于
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
3. 安装eslint-plugin-import插件
这个插件意在提供对ES6+ import/export语法的支持，有助于防止你写错文件路径或者引用的变量名
1. 安装
pnpm add -D eslint-plugin-import
2. 修改 eslintrc 文件
{
"extends": [
"plugin:import/recommended"
]
}
// 相当于
{
"plugins": ["import"],
"rules": {
"import/no-unresolved": [2, { "commonjs": true, "amd": true }],
"import/named": 2,
"import/namespace": 2,
"import/default": 2,
"import/export": 2,
}
}
4. 安装eslint-plugin-promise插件
这个插件意在通过代码风格检测让开发者养成较好地使用promise的方式（最佳实践，best practices）。比如在对promise使用了then之后会要求你加一个catch捕获下异常，当然如果你的方法是直接return返回了这个promise的话则不会要求你马上加catch（因为毕竟当然你可以稍后在其他地方拿到这个promise后再catch）
1. 安装
pnpm add -D eslint-plugin-promise
2. 修改 eslintrc 文件
{
"extends": [
"plugin:promise/recommended"
]
}
// 相当于
{
"plugins": ["promise"],
"rules": {
"promise/always-return": "error",
"promise/no-return-wrap": "error",
"promise/param-names": "error",
"promise/catch-or-return": "error",
"promise/no-native": "off",
"promise/no-nesting": "warn",
"promise/no-promise-in-callback": "warn",
"promise/no-callback-in-promise": "warn",
"promise/avoid-new": "warn",
"promise/no-return-in-finally": "warn"
}
}