Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目

vue3-vite-vant-h5-template 最新版vue移动端开发模板

开箱即用的 Vue3 + Vant4 移动端模板

使用技术 Vue 3 + TypeScript + Vite + Vant + pinia + vue-router + axios + vuei18n
支持rem移动端适配方案
axios二次封装
主题切换
支持国际化
项目使用 pnpm 包管理工具，用法和 npm 没有什么区别，官方地址：https://www.pnpm.cn/

github

gitee

预览

在线预览

## 项目搭建
- 参考vite官网：https://vitejs.cn

pnpm create vite

## 代码规范### 集成 editorconfig 配置- EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。```yaml
# http://editorconfig.orgroot = true[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

VSCode 需要安装一个插件：EditorConfig for VS Code

配置 eslint、prettier

pnpm i eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin vue-global-api -D

在根目录下建立 eslint 配置文件： .eslintrc.js

module.exports = {root: true,env: {browser: true,node: true},globals: {Message: true,env: true,useRoute: true,useRouter: true,useStore: true},/* 指定如何解析语法。可以为空，但若不为空，只能配该值，原因见下文。*/parser: 'vue-eslint-parser',/* 优先级低于parse的语法解析配置 */parserOptions: {parser: '@typescript-eslint/parser', // Specifies the ESLint parserecmaVersion: 2020, // Allows for the parsing of modern ECMAScript featuressourceType: 'module', // Allows for the use of importsecmaFeatures: {jsx: true}},extends: ['vue-global-api','eslint:recommended','plugin:vue/vue3-recommended','plugin:@typescript-eslint/recommended','prettier','plugin:prettier/recommended'],plugins: ['vue'],rules: {'no-console': process.env.NODE_ENV === 'production' ? 1 : 0,'no-debugger': process.env.NODE_ENV === 'production' ? 1 : 0,'no-useless-concat': 1, // 禁止不必要的字符串字面量或模板字面量的连接'no-useless-escape': 0, // 禁止不必要的转义字符'consistent-return': 0, // 要求 return 语句要么总是指定返回的值，要么不指定'camelcase': 0, // 强制使用骆驼拼写法命名约定'no-redeclare': 1, // 禁止多次声明同一变量'array-callback-return': 1, // 强制数组方法的回调函数中有 return 语句,Array有几种过滤，映射和折叠的方法。如果我们忘记return在这些回调中写入语句，那可能是一个错误。'default-case': 1, // 要求 switch 语句中有 default 分支'no-fallthrough': 1, // 禁止 case 语句落空'no-lonely-if': 1, // 禁止 if 作为唯一的语句出现在 else 语句中.如果一个if陈述是该else块中唯一的陈述，那么使用一个else if表格通常会更清晰。'no-irregular-whitespace': 1, // 禁止在字符串和注释之外不规则的空白'prefer-const': 0, // 要求使用 const 声明那些声明后不再被修改的变量.如果一个变量从不重新分配，使用const声明更好。const 声明告诉读者，“这个变量永远不会被重新分配，”减少认知负荷并提高可维护性。'no-use-before-define': 1, // 禁止在变量定义之前使用它们'vue/attributes-order': 2, // vue api使用顺序'vue/no-multiple-template-root': 0,'@typescript-eslint/explicit-module-boundary-types': 0,'@typescript-eslint/no-var-requires': 0,'@typescript-eslint/no-unused-vars': 0,'@typescript-eslint/ban-ts-comment': 0,'@typescript-eslint/no-explicit-any': 0,'@typescript-eslint/no-empty-function': 0,'vue/multi-word-component-names': 0},overrides: [{files: ['**/__tests__/*.{j,t}s?(x)'],env: {mocha: true}}]
}

在根目录下建立 prettier 配置文件： .prettierrc.js

module.exports = {printWidth: 100, // 单行输出（不折行）的（最大）长度tabWidth: 2, // 每个缩进级别的空格数tabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)。semi: false, // 是否在语句末尾打印分号singleQuote: true, // 是否使用单引号quoteProps: "as-needed", // 仅在需要时在对象属性周围添加引号jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号trailingComma: "none", // 去除对象最末尾元素跟随的逗号bracketSpacing: true, // 是否在对象属性添加空格jsxBracketSameLine: true, // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）,默认false,这里选择>不另起一行arrowParens: "always", // 箭头函数，只有一个参数的时候，也需要括号proseWrap: "always", // 当超出print width（上面有这个参数）时就折行htmlWhitespaceSensitivity: "ignore", // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的vueIndentScriptAndStyle: false, // 在VUE文件中不要缩进脚本和样式标记stylelintIntegration: true,endOfLine: "auto"
}

Husky 和 Lint-staged 配置 Pre-commit 检查

# windows下需要先执行 npx husky install
npx mrm@2 lint-staged

运行上面这条命令后会在package.json中添加一条脚本和lint-staged配置

{"scripts": {"lint": "eslint ./src/**/*{.js,.jsx,.ts,.tsx,.vue} --fix", // 这条除外"prepare": "husky install"},"devDependencies": {"husky": "^7.0.4","lint-staged": "^12.4.1",},"lint-staged": {"*.{js,jsx,vue,ts,tsx}": "npm run lint"}
}

安装 lint-staged 和 husky 相关的依赖
然后会在更目录创建一个.husky目录，这一步在windows上可能会出错，执行 npx husky install 创建，该目录下有一个pre-commit文件在每次提交代码的时候会执行，可以修改里面的运行脚本，自定义提交需要做的工作

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"# npx lint-staged
npm run lint

第三方库集成

路由 vue-router

安装依赖

pnpm install vue-router@4

src 目录创建 router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Login from '/@/views/login.vue'
const routes: Array<RouteRecordRaw> = [{path: '/login',component: Login}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

在 main.ts 中注册路由

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'const app = createApp(App)
app.use(router).mount('#app')

App.vue 中使用路由占位符

<router-view v-slot="{ Component }"><keep-alive><component :is="Component" /></keep-alive>
</router-view>

状态管理 pinia

pnpm install pinia

src 目录创建 store/index.ts

import { App } from 'vue'
import { createPinia } from 'pinia'export const setupStore = (app: App) => {app.use(createPinia())
}

在 main.ts 中注册

import { setupStore } from './store'
setupStore(app)

Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目相关推荐

前端通过eslint+prettier+husky统一代码风格
背景多人协作项目,会遇到每个人都有自己的代码风格.所以需要通过工具来统一代码风格. husky是什么? 当您提交或推送时,您可以使用 husky 来检查您的提交消息.运行测试.检查代码等Husky ...
vue中使用 eslint+prettier
ESLint 主要解决了两类问题,但其实 ESLint 主要解决的是代码质量问题.另外一类代码风格问题这个应该是eslint的报错问题,那么在vue2中如何使用eslint和eslint自动修复呢? ...
eslint prettier husky代码规范配置
本文基于React 项目配置,可以使用 create-react-app . 我们为什么需要eslint? 因为每个人的代码习惯不一样,每个开发人员都需要和他人协作或者项目需要交接给下一代开发者.保持 ...
Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint
Eslint 配置 ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具. ESLint 能够帮你轻松写出高质量的 JavaScript 代码. 1.建议 vsc ...
vsCode配置Eslint+Prettier结合使用详细配置步骤，规范化开发
一.eslint eslint它规范的是代码偏向语法层面上的风格.本篇文章以一个基本的vue项目,来说明eslint+prettier+husky配置项目代码规范,为了更好的描述本文, ...
vue3 +vite+ts实战项目添加 eslint + prettier + lint-staged 踩坑指南
初始化项目 // 创建一个空的 vue3-ts 项目, yarn create vite my-vue-app --template vue-ts // 安装依赖 cd my-vue-app & ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
vue+eslint+prettier格式化
vue项目+eslint自动格式化背景手动格式化命令行指令 vscode设置自定义校验规则 eslint扩展配置文件 eslint:recommended plugin:vue/vue3-es ...
vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和 ...

Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目

vue3-vite-vant-h5-template 最新版vue移动端开发模板

预览

配置 eslint、prettier

Husky 和 Lint-staged 配置 Pre-commit 检查

第三方库集成

路由 vue-router

状态管理 pinia

Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目相关推荐

最新文章

热门文章