vite + vue3 多页面实战优化续集：eslint+lint-staged+husky+stylelint

藏宝库编辑 · 2024-9-20 10:59:16

目标：项目投入使用发现很多使用起来不惬意的地方，举行优化

注意!!!：最新的一次创建项目运行时间以及设置eslint部分出现了很多题目，可以结合最新的一篇vite+vue+ssg做官网再纪录一下项目创建结合起来检察是否有你碰到的题目
条件：在上一篇vite + vue3多页面设置纪录references,loadEnv等中我详细纪录了通过各种设置相识多页面项目。

结果：终极代码放到gitee这里的release分支vite-vue3-multip-release

之前设置不公道的地方：

为了让项目启动的时间自动打开html，修改了项目根目次到views下面root：'./src/views/'，以至于outDir，windicss也要改。

全部天生的html全部扎堆天生在views下面，结构紊乱

未设置eslint，生存自动格式化

未设置代码提交自动跑eslint检测。使用lint-staged + husky

未设置stylelint，规范css誊写

未设置快速天生页面脚本：用plop搞个模版天生index.vue和main.ts，可以直接看代码库代码

项目到实践中肯定是不公道的，用起来不惬意。逐步办理上面的题目
第一步：不修改根目次路径；在根目次新建一个html文件夹，并将天生的html放到根目次同一管理，且要支持多级页面

通过上图目次结构可以看到，src/views下面有多级页面，末了天生到src同级目次下的html文件夹中，且结构与之对应。如许看起来就很惬意，html文件夹中的东西根本不消动，通过脚本，每次dev的时间自动天生
我们看代码实现,紧张照旧去修改build/getPage.ts，使用mkdirp天生多级文件夹
import glob from 'glob'import fs from 'fs'import mkdirp from 'mkdirp'import { resolve } from 'path'const input = {}const mainEntry = []const iconDirs = []function getPages () { // 遍历文件夹中含有main.ts的文件夹路径 const allEntry = glob.sync('./src/views/**/main.ts') // console.log(allEntry) // console.log('allEntry', allEntry) // 创建多页面模板 allEntry.forEach((entry: string) => { const pathArr = entry.split('/') const tsName = pathArr[pathArr.length - 2] pathArr.pop() const targetFilePath = pathArr.splice(3).join('/') // 创建多级文件夹，去掉末了一个 const mkdirPath = targetFilePath.replace(`/${tsName}`, '') const srcArr = entry.replace('./', '') // console.log(targetFilePath, mkdirPath) // 判断文件是否存在 try { fs.accessSync(`./html/${targetFilePath}.html`) } catch (err) { if (targetFilePath.includes('/')) { mkdirp(`./html/${mkdirPath}`).then(() => { generete(targetFilePath, srcArr) }) } else { generete(targetFilePath, srcArr) } } const svgPath = srcArr.split('/') svgPath.splice(svgPath.length - 1, 1) // input中的设置 input[targetFilePath] = resolve(`html/${targetFilePath}.html`) // vconsole用 mainEntry.push(resolve(`${srcArr}`)) iconDirs.push(resolve(process.cwd(), `${svgPath.join('/')}/svg`)) })};function generete (targetFilePath, srcArr) { // 获取模板 const temp = fs.readFileSync('./index.html')// 多级相对路径 let relativeStr = '' targetFilePath.split('/').forEach(() => { relativeStr += '../' }) console.log(`创建${targetFilePath}.html文件`) const index = temp.toString().indexOf('</body>') const content = temp.toString().slice(0, index) + `<script type="module" src="${relativeStr}${srcArr}"></script>` + temp.toString().slice(index) fs.writeFile(`./html/${targetFilePath}.html`, content, err => { if (err) console.log(err) })}getPages()// console.log(input, mainEntry, iconDirs)export { input, mainEntry, iconDirs }有了以上代码。每次运行都会根据入口main.ts，天生对应的html。但是启动项目怎么直接打开我想要的index.html呢？
server内里有设置,设置open即可。想到当时仅仅为了启动项目打开入口页面就更改root是多么的不理智了
// vite.config.ts server: { open: '/html/index.html', proxy: { '/api': { target: 'https://app-api-0.com', changeOrigin: true } } },第二步：设置eslint

这个就比力简单了，网上也有很多教程，当走到教程前面几步就可以了。我这里也纪录一下

安装eslint npm i eslint -D
初始化设置：npx eslint --init
然后根据提示一步步利用
2.1 选择模式： (To check syntax and find problems)
我选第三个：To check syntax, find problems, and enforce code style
2.2 (选JavaScript modules): 选第一个：JavaScript modules (import/export)
2.3 选择语言框架 (选Vue.js)
2.4 是否使用ts : 我这里选yes
2.5 代码在那里运行 (用空格选中 Browser+Node)
2.6 选择一个风格：我选的Standard，完全就够用了
背面就是yes安装，会发现安装了这些插件

"eslint-config-standard": "^17.0.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-n": "^15.2.4", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-vue": "^9.2.0","@typescript-eslint/eslint-plugin": "^5.30.7", "@typescript-eslint/parser": "^5.30.7",一些教程内里还单独安装@typescript-eslint/parser，我实践中走完上面就已经全部有了，天生的.eslintrc.js也不须要修改。
只是部分规则不实用vue3，我们可以在rules直接关掉即可：比如 vue/multi-word-component-names, no-irregular-whitespace
3.选择性安装vite-plugin-eslint, 用于设置vite运行的时间自动检测eslint规范,使用npm run dev时会自动查抄代码并报错
npm i -D vite-plugin-eslint使用import eslint from 'vite-plugin-eslint'export default defineConfig({ plugins: [ vue(), eslint() ]})

setting.json 须要的内容

// setting.json{  // 重新设定tabsize  "editor.tabSize": 2,  // 每次生存的时间自动格式化 "editor.formatOnSave": false,  "editor.codeActionsOnSave": { "source.fixAll.eslint": true  } }这里提一嘴i18n-ally多语言翻译这个vscode 插件，好用。
// setting.json中参加{  "i18n-ally.localesPaths": ["src/views/login/lang"],  "i18n-ally.keystyle": "nested",  "i18n-ally.sortKeys": true,// pathMatcher 必须开启namespace ，{locale}指的就是翻译文件名"i18n-ally.localesPaths"，{ext}就是enabledParsers中的文件后缀  "i18n-ally.namespace": true,  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",  "i18n-ally.enabledParsers": ["js", "json", "ts"],  "i18n-ally.sourceLanguage": "en",  "i18n-ally.displayLanguage": "zh", // 展示中文  "i18n-ally.enabledFrameworks": ["vue", "react"],}紧张提这个i18n-ally.pathMatcher路径匹配，多份翻译文件，放在在同一个二级文件src/lang/en,src/lang/zh夹就能通过它namespaces匹配到且见效

第三步：设置lint-staged + husky。在git commit 的时间对提交文件举行校验

lint-staged工具对暂存的代码举行 lint,通常都是配共同husky使用.
husky帮助你在git利用环节实验lint-staged，也就是内里的 eslint --fix 对暂存的src下面的文件举行eslint校验。
一样平常我们会看到如下package.json设置
//package.json{  "lint-staged": { "src/**/*.{js,jsx,ts,tsx,vue}": [    "eslint --fix" // 仅仅校验修改暂存的文件    // "npm run lint:eslint". 如果要校验全部文件的也可以，除非你想这么做 ]  }}//"scripts": {//"lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,js,tsx}\" --fix",// }通过husky安装参考文档可以发现，安装husky有两种方式，结果是一样的

自动方式，只须要实验一句npx husky-init && npm install

npx husky-init && npm install # npmnpx husky-init && yarn # Yarn 1yarn dlx husky-init --yarn2 && yarn # Yarn 2+pnpm dlx husky-init && pnpm install # pnpm实验完后会在package.json/scripts 自动加上"prepare": "husky install"，
在根目次天生了一个.husky文件夹，内里有个_pre-commit脚本文件
#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"npm test修改npm test为自己的脚本下令，比如：npx lint-staged

这里的下令修改就可以自由发挥了，只要能触发package.json中的 lint-staged就成
比如我可以在这里写npm run lint:lint-staged,那package.json/scripts中有对应的下令"lint:lint-staged": "lint-staged"即可
tip：不走lint-staged，直接在这里写npm run lint:eslint也是可以的(lint:eslint是scripts中的eslint --fix下令)。分析仅仅只安装husky也是可以的，那也就是校验全部文件了。共同lint-staged只校验暂存区文件才是最好的

手动方式，按照序次多实验几个下令

// 先安装npm i husky -D.// 先实验这句才气实验有第四句npx husky install // 在package.json/scripts 加上`"prepare": "husky install"`。本技艺动去加也行npm set-script prepare "husky install" // 这句就是在`_pre-commit`脚本文件加上自己的下令啦npx husky add .husky/pre-commit "npx lint-staged"以上就能乐成了。
第四步：设置stylelint

vscode 扩展必不可少：

通过stylelint官方文档我们先安装三个插件:我项目用的less，多来一个postcss-less。如果你用scss，来一个postcss-scss就好，下面设置一样的

npm i stylelint stylelint-config-standard postcss-less -D

新建文件.stylelintignore

/dist/*/public/*public/*

新建.stylelintrc.js。stylelint默认只能识别css文件，我项目使用的less，上面安装一个postcss-less，使用官网提到的自界说语法customSyntax参数让其可以大概识别less文件。
如果没有下面设置的overrides/customSyntax，less文件中会有看不懂的报错：Unknown word (CssSyntaxError)Stylelint(CssSyntaxError)

// .stylelintrc.jsmodule.exports={ extends:["stylelint-config-standard",], overrides:[ { files:["**/*.less"], customSyntax:"postcss-less" } ]}

有了上面的利用，已经能看到less文件中的样式各种赤色提示了，还须要生存自动格式化，在.vscode/setting.json中增长下面的内容就可以了。

"editor.codeActionsOnSave": { "source.fixAll.stylelint": true }

项目是vue项目，vue文件中的样式无法识别，而且能看到输出的报错信息，提示我要postcss-html,安装它

在.stylelintrc.js中参加它

module.exports={ extends:["stylelint-config-standard"], customSyntax: "postcss-html", overrides: [ { files:["**/*.less"], customSyntax:"postcss-less" } ],}这时间你会发现vue文件中样式并没有提示题目。还差一步，在.vscode/settings.json中增长
"stylelint.validate": ["vue", "less", "css"]有了以上的简单设置，就可以生存自动按照stylelint格式化你的样式了

升级内容
（1）结合lint-staged，提交检测样式,在package.json中增长

"lint-staged": { "**/*.{css,less,scss,vue}":[    "stylelint --fix" ]  }（2）插件帮助我们css按照序次誊写
// 安装插件npm i -D stylelint-order stylelint-config-rational-orderstylelint-config-rational-order插件用来简化了插件stylelint-order的引用和设置。你只用stylelint-order也是可以的
//.stylelintrc.js 中使用插件module.exports={  extends:["stylelint-config-standard", 'stylelint-config-rational-order'],}下面是一些题目纪录

1. 当项目中使用了自动导入unplugin-auto-import/vite插件，eslint会提示ref等不存在

(1) 安装 vue-global-api
(2) 在eslintrc.js中参加它
extends: [ 'plugin:vue/vue3-essential', 'standard', 'vue-global-api'  ],2. 纪录一下cross-env，cross-env 使用单个下令，而不消担心环境变量的设置

安装
npm i cross-env -D使用
"report": "cross-env REPORT=true npm run build",取参数
const isReport = process.env.REPORT === 'true'isReport    ? visualizer({ //天生的stats放到别的地方去       filename: './node_modules/.cache/visualizer/stats.html',       open: true,       gzipSize: true,       brotliSize: true    })    : [],3. 项目中参加一个插件后，在linux编译时莫名其妙报错：Error: The package "esbuild-linux-64" could not be found, and is needed by esbuild.

If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" flag. The "optionalDependencies" package.json feature is used
by esbuild to install the correct binary executable for your current platform.
按照道理说jenkins工作地区的node_modules早就有了，怎么突然没这个依靠了呢？
直接删除工作地区代码，重新npm i 跑一遍办理了
4. 该项目开辟的多页面是给安卓app用的，用的lzyzsd/JsBridge。旧版app使用registerHandler提供native调用js的本领，在新版app失效，这个库issue内里也提到了

直接将js方法挂到window下面，native去调用
// 该方法给安卓调用，安卓返回是否开启消息提示window.getPunchInReminderStatus = (res) => {systemRemindOpen = res === '1'}5. window.onresize不触发

旧版本安卓在进入页面大概失去焦点的时间会触发window.onresize，当时使用它时为了控制fixed元素不被键盘顶起来。
在新版安卓中，键盘并没有将底部fixed元素顶起来，且失去焦点的时间window.onresize不触发了，用不上它了

vite + vue3 多页面实战优化续集：eslint+lint-staged+husky+stylelint

所属分类: 问答交流

新帖推荐: 30日

推荐作品