Vite 创建项目vue3-ts项目
Vite 需要 Node.js 版本 18+,20+ => Vite 5
bash
pnpm create vite
# 需要手动输入项目名 选择 vue ts等
一句话生成
bash
# pnpm
pnpm create vite vue3-basic --template vue-ts
文件结构以及推荐插件
代码规范ESLint
安装eslint
bash
pnpm i eslint -D
# -D 安装到开发环境 devDependencies
pnpm create @eslint/config ??
# pnpm i eslint -S:将 eslint 安装为生产依赖项。 => --save
# pnpm i eslint -D:将 eslint 安装为开发依赖项。 => --save-dev
#查看eslint版本
npx eslint --version
自动生成配置文件
bash
# 注意,这里只能使用npm,相当于启动一个命令
npm init @eslint/config
javascript
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
}
}
ESLint 可用的 Rules 一个 rule 有三个等级 ,
- 0 代表关闭
off
- 1 代表 warning输出警告
warn
- 2 代表错误,会直接抛出错误。
error
typescript
"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
Rules Reference - ESLint - Pluggable JavaScript Linter
ESlint Rules
typescript
rules: {
semi: 0,
},
extends: "eslint:recommended",
prettier
Vue3+Vite项目,如何配置ESLint和Prettier实现代码规范化?
typescript
// 1. 根目录下新建 .prettierrc, 去掉注释
{
"semi":false, // 是否带分号
"singleQuote":true, // 是否单引号
"trailingComma":"none", // 多行语句是否最后添加逗号
"arrowParens": "avoid", // 箭头函数一个参数是否省略括号,avoid省略
}
{
"semi": false,
"singleQuote": true,
"arrowParens": "avoid",
"trailingComma": "none"
}
vite添加ESLint插件
https://www.npmjs.com/package/vite-plugin-eslint
bash
pnpm i vite-plugin-eslint -D
vite.config.ts中添加配置
typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 1.导入
import eslint from 'vite-plugin-eslint'
// https://vitejs.dev/config/
export default defineConfig({
// 2. 配置,注意需要加()
plugins: [vue(), eslint()]
})
// 注意 TS找不到类型文件,暂时不配置
.eslintrc.cjs配置文件修改
javascript
module.exports = {
env: {
browser: true,
es2021: true
},
overrides: [
{
env: {
node: true
},
files: ['.eslintrc.{js,cjs}'],
parserOptions: {
sourceType: 'script'
}
}
],
// 换个位置
extends: 'eslint:recommended',
// 去掉ts相关的,用vue自己的
// parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
// plugins: ['@typescript-eslint'],
rules: {
semi: 0
}
}
添加 Vue 官方的ESLint 插件
目前还没发验证 Vue 文件的语法,会直接报错,因为出现了这样的标签。 https://eslint.vuejs.org/
bash
npm install --save-dev eslint-plugin-vue
pnpm i eslint-plugin-vue -D
修改配置文件 eslintrc.cjs
javascript
// 原来的规则就替换一下为vue3的
extends: ['plugin:vue/vue3-recommended'],
所有的规则列表:https://eslint.vuejs.org/rules 一些规则组:(规则越来越多) https://eslint.vuejs.org/user-guide/#configuration-eslintrc
- "
plugin:vue/vue3-essential
" ... base, plus rules to prevent errors or unintended behavior. - "
plugin:vue/vue3-strongly-recommended
" ... Above, plus rules to considerably improve code readability and/or dev experience. - "
plugin:vue/vue3-recommended
" ... Above, plus rules to enforce subjective community defaults to ensure consistency.
添加基于 Typescript 的特殊规则组
目前还没法验证 Typescript 的语法,一些符号会报错,比如泛型的括号。 https://www.npmjs.com/package/@vue/eslint-config-typescript
bash
npm install @vue/eslint-config-typescript --save-dev
pnpm i @vue/eslint-config-typescript -D
最终使用的是 typescript-eslint 它其实是 https://typescript-eslint.io/rulesl一个Vue 的特供版本。 添加对应的 extends
javascript
"extends": ["plugin:vue/vue3-essential","@vue/eslint-config-typescript"]
Getting Started | typescript-eslint
bash
pnpm add --save-dev eslint typescript typescript-eslint
vscode插件
Error Lens
Improve highlighting of errors 代码报错提升Pretty TypeScript Errors
ts报错 解决建议