搭建 Vite 项目
使用 NPM:
$ npm init vite@latest
创建项目
npm run dev 启动项目
增加vue-router&UI库
$ npm install vue-router --save
$ npm install element-plus --save
改造main.ts引入router UI
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: () => import('./views/index.vue'),
},
{
path: '/home',
component: () => import('./views/index.vue'),
},
],
})
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')
增加eslint + prettier
$ npm install eslint --save-dev
//vue3检查 .vue文件中的语法错误
$ npm install eslint-plugin-vue --save-dev
// Airbnb eslint插件 详细见https://www.npmjs.com/package/eslint-config-airbnb-base
$ npx install-peerdeps --dev eslint-config-airbnb-base
// 安装prettier
$ npm install --save-dev eslint-plugin-prettier
// eslint-config-prettier，这个插件的作用是禁用所有与格式相关的eslint规则，格式相关的校验都交给 prettier 处理
$ npm install --save-dev --save-exact prettier
创建.eslintrc.js
// eslint文档 http://eslint.cn/docs/user-guide/configuring
module.exports = {
root: true,
env: {
node: true,
},
// 插件名称可以省略 `eslint-plugin-` 前缀 引入eslint-plugin-prettier
plugins: ['@typescript-eslint', 'prettier'],
parserOptions: {
ecmaVersion: 12, // 启用es12
parser: '@typescript-eslint/parser', // 将 TypeScript 转换成与 estree 兼容的形式，以便在ESLint中使用
},
extends: [
'plugin:vue/vue3-recommended', // vue3检查 .vue文件中的语法错误
'airbnb-base', // Airbnb基础规则的eslint插件
'plugin:prettier/recommended', // prettier格式校验
],
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'], // 解决引入时没后缀查不到的问题
},
},
},
rules: {
'prettier/prettier': 'error', // prettier 标记的地方抛出错误信息
'linebreak-style': 0, // 强制使用Unix行结尾
'@typescript-eslint/ban-ts-comment': 0,
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'import/extensions': [ // 解决不写后缀报错的问题
'error',
'ignorePackages',
{
js: 'never',
mjs: 'never',
jsx: 'never',
ts: 'never',
},
],
},
}
创建.prettierrc.js
// .prettierrc.json
{
"semi": false,
"singleQuote": true,
"printWidth": 80
}
引入husky
git的钩子函数，在执行相关hooks时进行自定义操作，比如在提交前执行eslint校验，提交时校验commit message
husky install
$ npx husky-init && npm install
$ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
$ npx husky add .husky/pre-commit 'npx --no-install commitlint --edit "$1"'
// pre-commit文件内容
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint-staged
// commit-msg文件内容
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run commitlint
// package.json
"scripts": {
"lint-staged": "lint-staged",
"commitlint": "commitlint --config commitlint.config.js -e -V"
},
"lint-staged": {
"*.{ts,js,vue}": [
"eslint --fix",
"git add ."
]
}
// git commit 可以看到效果，先执行eslint校验，后执行commitlint校验
vscode settings
{
"leetcode.endpoint": "leetcode-cn",
"editor.detectIndentation": false,
"editor.tabSize": 2,
//打开文件不覆盖
"workbench.editor.enablePreview": false,
//关闭快速预览
"editor.minimap.enabled": false,
//打开自动保存
"files.autoSave": "afterDelay",
//使用主题
"workbench.colorTheme": "Darcula Theme from IntelliJ",
// 头部注释
"fileheader.customMade": {
"Author": "yhy",
"Date": "Do not edit", // 设置后默认设置文件生成时间
"LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
"LastEditors": "yhy", // 设置后，保存文件更改默认更新最后编辑人
"Description": ""
},
// 函数注释
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},
//手机项目rem适配
"px-to-rem.px-per-rem": 100,
// -----------------------自动格式化配置eslint+prettier-----------------------
// 每次保存自动格式化ctrl+s
"editor.formatOnSave": true,
// 每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//配置内配置对 .vue 文件的格式化
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//配置内配置对 .ts 文件的格式化
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//配置内配置对 .js 文件的格式化
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//配置内配置对 .json 文件的格式化
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
