重点创建项目后eslint+prettier未生效，应该是版本太高出现错误可以查看命令台查看问题
项目基于以下相关技术搭建：
- vue3 cn.vuejs.org/
- typescript typescript.bootcss.com/tutorials/t…
- vite cn.vitejs.dev/
- pnpm www.pnpm.cn/
- eslint eslint.cn/
- prettier www.prettier.cn/
- husky typicode.github.io/husky/
第一步：确保安装好了node.js与pnpm(官网有安装方式)
注意：Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。 提示：可以使用nvm来管理node github.com/coreybutler…
第二步：使用pnpm创建vite项目
注意：输入命令后根据提示选择，项目是ts所以必选typescript
pnpm create vite
也可以通过附加的命令行选项直接指定项目名称和你想要使用的模板
pnpm create vite my-vue-app --template vue
第三步：使用vscode打开刚刚创建好的项目
打开vscode命令行终端执行命令安装依赖
pnpm install
注意：安装完项目还报错，打开vscode命令端 ctrl+shift+p 输入reload window
第四步：配置eslint
注意：确保上一步创建的项目运行不会报错 在终端执行安装命令
pnpm add eslint -D
执行eslint初始化命令
pnpm eslint --init
初始化选择
- 这一步选择2：只是帮我们检查语法找对应错误
- 这一步选1：使用es6的导入包语法
- 这一步肯定vue：
- 使用ts：
- 代码运行在游览器中选1：
- 生成的配置文件用js展示选1：
- 选yes:
- 选pnpm
依赖安装完成后，会生成.eslintrc.js配置文件，进入后会出现找不到模块报错，需要再env字段中增加
node: true
配置以解决eslint找不到module的报错。并且添加特定解析vue文件的解析器
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true //新增
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
],
"overrides": [
],
"parser": "vue-eslint-parser", //修改
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser", //新增
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
}
}
在package.json文件中的script中添加lint命令，测试eslint
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"eslint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix" //新增
},
"dependencies": {
"vue": "^3.2.47"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",
"@vitejs/plugin-vue": "^4.1.0",
"eslint": "^8.41.0",
"eslint-plugin-vue": "^9.14.1",
"typescript": "^5.0.2",
"vite": "^4.3.2",
"vue-tsc": "^1.4.2"
}
}
执行测试命令
pnpm eslint
测试通过
安装vscode插件，实现每次保存自动执行一次检查命令，因为会同步使用prettier来统一代码风格，所以选择
Prettier ESLint插件
在项目中的.vscode目录下新建settings.json文件加入自动执行脚本
{
// 开启eslint自动修复
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
}
}
第五步：配置prettier
在终端执行安装命令
pnpm add prettier -D
在根目录下新建.prettierrc.cjs并配置以下内容
module.exports = {
// 一行的字符数，如果超过会进行换行，默认为80
printWidth: 80,
// 一个tab代表几个空格数，默认为2
tabWidth: 2,
// 是否使用tab进行缩进，默认为false，表示用空格进行缩减
useTabs: false,
// 字符串是否使用单引号，默认为false，使用双引号
singleQuote: true,
// 行位是否使用分号，默认为true
semi: false,
// 是否使用尾逗号，有三个可选值"<none|es5|all>"
trailingComma: "none",
// 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
bracketSpacing: true
}
在package.json中的script中添加以下命令
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"eslint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
"prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"" //新增
},
"dependencies": {
"vue": "^3.2.47"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",
"@vitejs/plugin-vue": "^4.1.0",
"eslint": "^8.41.0",
"eslint-plugin-vue": "^9.14.1",
"prettier": "^2.8.8",
"typescript": "^5.0.2",
"vite": "^4.3.2",
"vue-tsc": "^1.4.2"
}
}
在项目中的.vscode目录下新建settings.json文件加入自动执行脚本
{
// 开启eslint自动修复
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
},
// 保存的时候自动格式化
"editor.formatOnSave": true,
// 默认格式化工具选择prettier-eslint
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
}
第六步：配置husky
配置husky来保证提交到git的代码是经过了eslint与prettier处理过的 husky是一个用来管理git hook的工具，git hook即在我们使用git提交代码的过程中会触发的钩子。
安装依赖
pnpm add husky -D
在package.json中的script中添加一条脚本命令，该命令会在pnpm install之后运行，这样其他克隆该项目的就在装包的时候就会自动执行该命令来安装husky。
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"eslint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
"prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
"prepare": "husky install" //新增
},
"dependencies": {
"vue": "^3.2.47"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",
"@vitejs/plugin-vue": "^4.1.0",
"eslint": "^8.41.0",
"eslint-plugin-vue": "^9.14.1",
"husky": "^8.0.3",
"prettier": "^2.8.8",
"typescript": "^5.0.2",
"vite": "^4.3.2",
"vue-tsc": "^1.4.2"
}
}
执行pnpm prepare命令生成.husky目录
注意：如果提示没有.git文件是属于git未初始化 执行 git init
使用husky命令添加pre-commit钩子，运行
pnpm husky add .husky/pre-commit "pnpm eslint && pnpm prettier"
会在.husky目录下生成一个pre-commit文件
第七步：配置vite别名
在vite.config.ts中增加别名配置，以~举例
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' //新增
export default defineConfig({
//新增
resolve: {
alias: {
'~': resolve(__dirname, './src')
}
},
plugins: [vue()]
})
配置tsconfig.json别名让代码可以识别路径
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
// 别名
"baseUrl": "./",
"paths": {
"~/*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
