配置vue3项目规范

用户5726534652651
212 阅读4分钟

创建项目

npm init vue@latest
pnpm i

代码格式化工具（Prettier）

1、下载 prettier 相关依赖：

pnpm install prettier -D

2、安装 Vscode 插件（Prettier）：

Prettier

3、配置 Prettier（.prettierrc.cjs）

代码规范工具（ESLint）

1、下载 ESLint 相关依赖：

pnpm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
依赖作用描述
eslintESLint 核心库
eslint-config-prettier关掉所有和 Prettier 冲突的 ESLint 的配置
eslint-plugin-prettier将 Prettier 的 rules 以插件的形式加入到 ESLint 里面
eslint-plugin-vue为 Vue 使用 ESlint 的插件
@typescript-eslint/eslint-pluginESLint 插件，包含了各类定义好的检测 TypeScript 代码的规范
@typescript-eslint/parserESLint 的解析器，用于解析 TypeScript，从而检查和规范 TypeScript 代码

2、安装 Vscode 插件（ESLint）：

ESLint

3、配置 ESLint（.eslintrc.cjs）

样式规范工具（StyleLint）

1、下载 StyleLint 相关依赖：

pnpm install stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order postcss postcss-html -D
依赖作用描述
stylelintstylelint 核心库
stylelint-config-htmlStylelint 的可共享 HTML（和类似 HTML）配置，捆绑 postcss-html 并对其进行配置。
stylelint-config-recommended-scss扩展 stylelint-config-recommended 共享配置，并为 SCSS 配置其规则
stylelint-config-recommended-vue扩展 stylelint-config-recommended 共享配置，并为 Vue 配置其规则
stylelint-config-standard打开额外的规则来执行在规范和一些 CSS 样式指南中发现的通用约定，包括：惯用 CSS 原则，谷歌的 CSS 样式指南，Airbnb 的样式指南，和 @mdo 的代码指南。
stylelint-config-standard-scss扩展 stylelint-config-standard 共享配置，并为 SCSS 配置其规则
stylelint-config-recess-order属性的排序（插件包）
postcsspostcss-html 的依赖包
postcss-html用于解析 HTML（和类似 HTML）的 PostCSS 语法

2、安装 Vscode 插件（StyleLint）：

Stylelint

3、在目录的 .vscode 文件夹下新建 settings.json：

{
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.fixAll.stylelint": true
	},
	"stylelint.enable": true,
	"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],
	"files.eol": "\n"
}

😎 也可以在 vscode 中全局配置上述 json 代码 😎

4、配置 StyleLint（.stylelintrc.cjs）

EditorConfig 配置

1、简介：

  • EditorConfig 帮助开发人员在 不同的编辑器 和 IDE 之间定义和维护一致的编码样式。

2、安装 VsCode 插件（EditorConfig ）：

EditorConfig

3、配置 EditorConfig（.editorconfig）：

# @see: http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
end_of_line = lf # 控制换行类型(lf | cr | crlf)
insert_final_newline = true # 始终在文件末尾插入一个新行
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
max_line_length = 130 # 最大行长度

[*.md] # 表示仅对 md 文件适用以下规则
max_line_length = off # 关闭最大行长度限制
trim_trailing_whitespace = false # 关闭末尾空格修剪

Git 流程规范配置

依赖作用描述
husky操作 git 钩子的工具（在 git xx 之前执行某些命令）
lint-staged在提交之前进行 eslint 校验，并使用 prettier 格式化本地暂存区的代码，
@commitlint/cli校验 git commit 信息是否符合规范，保证团队的一致性
@commitlint/config-conventionalAnglar 的提交规范
czg交互式命令行工具生成标准化的 git commit message
cz-git一款工程性更强，轻量级，高度自定义，标准输出格式的 commitize 适配器

1、husky（操作 git 钩子的工具）：

pnpm install husky -D
pnpm pkg set scripts.prepare="husky install"
pnpm prepare

2、 lint-staged（本地暂存代码检查工具）

作用：通过钩子函数，判断提交的代码是否符合规范，并使用 prettier 格式化代码

pnpm install lint-staged --D
npx husky add .husky/pre-commit "npm run lint:lint-staged"

新增 lint-staged.config.cjs 文件：

module.exports = {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
  "package.json": ["prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  "*.md": ["prettier --write"]
};

3、commitlint（commit 信息校验工具，不符合则报错）

pnpm install @commitlint/cli @commitlint/config-conventional -D

配置命令（在.husky 文件夹下添加 commit-msg 文件）：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

4、commitizen（基于 Node.js 的 git commit 命令行工具，生成标准化的 message）

// 安装 czg，如此一来可以快速使用 czg 命令进行启动。
pnpm install czg -D

5、cz-git

指定提交文字规范，一款工程性更强，高度自定义，标准输出格式的 commitizen 适配器

pnpm install cz-git -D

配置 package.json：

"config": {
  "commitizen": {
    "path": "node_modules/cz-git"
  }
}

新建 commitlint.config.js 文件

配置 package.json 命令

{
    "scripts": {
        // 本地运行(dev环境)
        "dev": "vite",
        // 本地运行(dev环境)
        "serve": "vite",
        // 构建打包(dev环境)
        "build:dev": "vue-tsc && vite build --mode development",
        // 构建打包(test环境)
        "build:test": "vue-tsc && vite build --mode test",
        // 构建打包(pro环境)
        "build:pro": "vue-tsc && vite build --mode production",
        // 检查项目 ts 类型
        "type:check": "vue-tsc --noEmit --skipLibCheck",
        // 本地环境预览构建后的 dist
        "preview": "npm run build:dev && vite preview",
        // 执行 eslint 校验
        "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
        // 执行 prettier 格式化
        "lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
        // 执行 stylelint 格式化
        "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
        // 执行 lint-staged.config.js 文件下的命令
        "lint:lint-staged": "lint-staged",
        // 初始化 husky 配置
        "prepare": "husky install",
        // 自动更新版本
        "release": "standard-version",
        // 提交代码(可自定义配置执行命令)
        "commit": "git add -A && czg && git push"
    }
}
avatar
文章
阅读
粉丝