学习视频：https://www.bilibili.com/video/BV1Xh411V7b5/?spm_id_from=333.999.0.0&vd_source=5c584bd3b474d579d0bbbffdf0437c70
1.配置项目启动自动打开浏览器
在package.json文件中：
"scripts": {
"dev": "vite", // 项目初始化之后默认是这样的
-->"dev": "vite --open", // 改成这样，加上--open,这样是默认打开浏览器页面
},
2. 项目中eslint校验工具的配置
- 首先安装eslint
pnpm i eslint -D
- 生成配置文件: eslint.cjs
npx eslint --init
3.安装vue3环境代码校验插件并配置eslint规则
- 安装vue3环境代码校验插件
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
- 配置eslint规则:安装完后需要更改eslint.cjs文件
module.exports= {
env: { // 安装环境
browser: true, // 浏览器端
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析语法 */
parser: 'vue-eslint-parser',
/* 优先级低于 parse 的语法解析配置 */
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
}
},
/* 继承已有的规则 */
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
plugins: ['vue', '@typescript-eslint'],
/**
*"off"或0 ==》 关闭规则
*"warn"或1 ==》 打开的规则作为警告（不影响代码执行）
*"error"或2 ==》 规则作为一个错误（代码不能执行，界面报错）
*/
rules: {
// eslint (https://eslint.bootcss.com/docs/rules/)
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不需要的转义字符
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用@ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用any类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript模块和
'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为"-"连接的单词
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>
'vue/no-mutating-props': 'off', // 不允许组件props的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
}
}
- 项目根目录下创建点/
.eslintignore忽略文件, 哪些文件夹下面的不需要eslint代码检测
.eslintignore文件前面有个.点号
dist
node_modules
- 运行脚本：package.json新增两个运行脚本
"scripts": {
"lint": "eslint src", // 运行这个指令时去校验src文件夹里面的文件
"fix": "eslint src --fix", // 把不符合规则的语法纠正
}
4.项目中prettier格式化工具配置，prettierrc.json添加规则
eslint保证js代码质量，prettier保证代码美观。检测语法的工具，属于格式化工具
- 安装依赖包
pnpm install -D eslint-plugin-prettier eslint-config-prettier
- 根项目目录下创建prettierrc.json文件添加规则
{
"singleQuote": true, // 要求字符串都是单引号
"semi": false, // 语句后面加分号
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "all",
"tabWith": 2 // 缩进
}
- 项目根目录下创建
.prettierignore忽略文件:哪些文件格式化的时候不会被格式化
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
5.项目中stylelint工具配置
stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理写法，指定css书写顺序等。
- 我们项目中使用scss作为预处理器，安装以下依赖：
pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
.stylelintrc.cjs配置文件
官网：https://stylelint.bootcss.com/
module.exports = {
extends: [
'stylelint-config-standard', // 配置stylelint扩展插件
'stylelint-config-html/vue', // 配置vue中template样式格式化
'stylelint-config-standard-scss', // 配置stylelint scss插件
'stylelint-config-recommended-vue/scss', // 配置vue中scss样式格式化
'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件
'stylelint-config-prettier', // 配置stylelint和prettierper兼容
],
overrides: [
{
files: ['**/*.(scss|css|vue|html)'],
customSyntax: 'postcss-scss',
},
{
files: ['**/*.(html|vue)'],
customSyntax: 'postcss-html',
}
],
ignoreFiles: [
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
'**/*.json',
'**/*.md',
'**/*.yaml',
],
/**
* null => 关闭该规则
* always => 必须
*/
rules: {
'value-keyword-case': null, // 在css中使用v-bind，不报错
'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖
'function-url-quotes': 'always', // 要求或禁止URL的引号"always"(必须加上引号)
'no-empty-source': null, // 关闭禁止空源码
'selector-class-pattern': null, // 关闭强制选择器类名的格式
'property-no-unknown': null, // 禁止未知的属性(true为不允许)
'block-opening-brace-space-before': 'always', // 大括号之前必须有一个空格或不能
'value-no-vendor-prefix': null, // 关闭属性值前缀 --webkit-box
'property-no-vendor-prefix': null, // 关闭属性前缀 -webkit-mask
'selector-pseudo-class-no-unknow': [
// 不允许未知的选择器
true,
{
ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改
}
]
}
}
- 根目录下创建
.stylelintignore忽略文件
/node_modules/*
/dist/*
/html/*
/public/*
- 添加运行脚本，在package.json中写
"scripts": {
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}
最后配置统一的prettier来格式化我们的js和css，html代码
当我们运行pnpm run format的时候，会把代码直接格式化
"scripts": {
"dev": "vite --open",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint": "eslint src",
"fix": "eslint src --fix",
"format": "prettier --write \"./**/*.{html,vue,ts,json,md}\"",
"lint:eslit": "eslint src/**/*.{ts,vue} --cache --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",
},
6.项目配置husky
以上配置已经集成好了代码校验工具，但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中，那这个规范就没什么用，所以我们需要强制让开发人员按照代码规范来提交。
要做到这件事情，就需要利用husky在代码提交之前触发git hook(git在客户端的钩子),然后执行pnpm run format来自动的格式化我们的代码
- 安装husky
pnpm install -D husky
安装好后会自动再package.json生成一个命令
"scripts": {
...
"prepare": "husky install" // 生成了新命令
},
再跑下pnpm run prepare安装husky依赖
- 执行
npx husky-init
会在根目录下生成一个.husky目录，在这个目录下面会有一个pre-commit文件，这个文件里面的命令在我们执行commit的时候就会执行
在.husky/pre-commit文件添加如下命令：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format
当我们对代码进行commit操作的收，就会执行命令，对代码进行格式化，然后再提交。
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
