記事ディレクトリ
導入
やるべきこと: この記事では、コード スタイルと一貫性を確保するために、コードを git に送信する前に、必須の検証を最初から構成し
huskyて完了する方法を説明します。stylelint
テクノロジー スタック: Vue3 + TypeScript + Vite
1. プロジェクト環境
1.1 node.js v16.0.0 以降 (I v16.14.1)
// 查看node 版本 : 打开小黑窗输入 node -v
node -v
1.2 pnpm v8.0.0 以降 (I v8.6.6)
// 查看pnpm 版本 : 打开小黑窗输入 pnpm -v
pnpm -v
2. プロジェクトを作成する
2.1 pnpmのインストール
npm i pnpm -g
2.2 プロジェクトを作成します - 詳細を説明する必要はありません
pnpm create vite '项目名称'
3.eslintの設定
3.1 eslintのインストール
pnpm i eslint -D
3.2 eslint設定ファイルの生成
pnpm eslint --init
コマンドを実行すると、.eslintrc.cjs次のコードを含むファイルがルート ディレクトリに生成されます。
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-essential",
'plugin:prettier/recommended',
],
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"vue"
],
"rules": {
}
}
3.3 .eslintrc.cjs ファイル内のルール オブジェクトを改善する
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', // 不允许组件 prop的改变
'vue/attribute-hyphenation': 'off' // 对模板中的自定义组件强制执行属性命名样式
}
3.4 新しい無視ファイルの作成
プロジェクトのルート ディレクトリに新しいファイルを作成し.eslintignore、次のコードを記述します。
dist
node_modules
3.5 スクリプトの追加
packjson.json「中」フィールドにscript2 行のコマンドを追加します。
"lint": "eslint src",
"fix": "eslint src --fix"
3.6 効果があるかどうかを確認する
main.tsデータ タイプ in を使用し、varターミナルで pnpm run lint コマンドを実行します。次のエラー メッセージが表示されます。eslintインストールと構成は成功しました。
次に、修復コマンドを実行してみてくださいpnpm run fix。修復は成功し、構成が成功したことが証明されます。
4.よりきれいに設定する
私たちのプロジェクトでは、
eslint主に構文検証とコードのフォーマットを担当する必要がありますprettier。
4.1 よりきれいなインストール
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
4.2 pnpm の実行 lint の実行
パッケージ化が完了したら、pnpm run lintターミナルでコマンドを実行して、このパッケージ化がプロジェクトに影響を与えるかどうかを確認します。
pnpm run lint
コマンドを実行するとpnpm run lint、次のようなエラーが表示されます。
Oops! Something went wrong! :(
ESLint: 8.44.0
TypeError: prettier.resolveConfig.sync is not a function
Occurred while linting D:\Users\Desktop\study_wy\src\main.ts:1
Rule: “prettier/prettier”
at Program (D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected][email protected][email protected][email protected]\node_modules\eslint-plugin-prettier\eslint-plugin-prettier.js:138:40)
at ruleErrorHandler (D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected]\node_modules\eslint\lib\linter\linter.js:1050:28)
at D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected]\node_modules\eslint\lib\linter\safe-emitter.js:45:58
at Array.forEach (<anonymous>)
at Object.emit (D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected]\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected]\node_modules\eslint\lib\linter\node-event-generator.js:297:26)
at NodeEventGenerator.applySelectors (D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected]\node_modules\eslint\lib\linter\node-event-generator.js:326:22)
at NodeEventGenerator.enterNode (D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected]\node_modules\eslint\lib\linter\node-event-generator.js:340:14) at CodePathAnalyzer.enterNode (D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected]\node_modules\eslint\lib\linter\code-path-analysis\code-path-analyzer.js:795:23)
at D:\Users\Desktop\study_wy\node_modules.pnpm\[email protected]\node_modules\eslint\lib\linter\linter.js:1085:32
上記と同様のエラーが報告された場合は、次のコマンドを実行します。エラーが報告されない場合は、次の手順に進みます。
pnpm install prettier@^2.4.0 -D
4.3 より適切な新しい構成ファイルを作成する
.prettierrc.jsonルート ディレクトリに新しいファイルを作成し、次のコードを入力します。
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": true,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "ignore",
"vueIndentScriptAndStyle": false,
"endOfLine": "auto",
"singleAttributePerLine": false
}
各ファイルの説明:
{
"printWidth": 100, //每行最多显示的字符数
"tabWidth": 2,//tab的宽度 2个字符
"useTabs": true,//使用tab代替空格
"semi": false,//结尾使用分号
"singleQuote": true,//使用单引号代替双引号
"trailingComma": "none",//结尾是否添加逗号
"bracketSpacing": true,//对象括号俩边是否用空格隔开
"bracketSameLine": true,;//组件最后的尖括号不另起一行
"arrowParens": "always",//箭头函数参数始终添加括号
"htmlWhitespaceSensitivity": "ignore",//html存在空格是不敏感的
"vueIndentScriptAndStyle": false,//vue 的script和style的内容是否缩进
"endOfLine": "auto",//行结尾形式 mac和linux是\n windows是\r\n
"singleAttributePerLine": false //组件或者标签的属性是否控制一行只显示一个属性
}
4.4 新しい無視ファイルの作成
.prettierignoreルート ディレクトリに新しいファイルを作成し、次のコードを入力します。
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
4.5 .eslintrc.cjs ファイルの改善
'plugin:prettier/recommended',
テスト用のコンソール文を追加してmain.ts実行すると、pnpm run lintコンソールにプロンプトが表示されることがわかります。
4.6 スクリプトの追加
ファイルpackjson.jsonのフィールドscriptにコマンド行を追加します
"format": "prettier --write \"./**/*.{html,vue,js,ts,json,md}\" "
実行するpnpm run formatと、許可されたすべてのファイルがフォーマットされたことがわかります。
5.stylelintの設定
stylelintCSSの整形ツールです。cssコードの整形、cssの構文エラーや無理な記述のチェック、cssの書き込み順の指定などが可能です。
5.1 stylelintのインストール
このプロジェクトでは、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
5.2 梱包完了後
5.1 コマンドの実行完了後、次のような警告が報告された場合は、無視してステップ 5.2 に進んでください。
└─┬ stylelint-config-prettier 9.0.5
└── ✕ unmet peer stylelint@“>= 11.x < 15”: found 15.10.1
5.3 新しい stylelint 設定ファイルの作成
プロジェクトのルート ディレクトリに新しいものを作成し.stylelintrc.cjs、次のコードを入力します。
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和prettier兼容
],
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(必须加上引号)"|"never(没有引号)"
'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-unknown': [
// 不允许未知的选择器
true,
{
ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
},
],
},
}
5.4 新しい stylelint 無視ファイルの作成
プロジェクトのルート ディレクトリに新しいファイルを作成し.stylelintignore、次のコードを入力します。
/node_modules/*
/dist/*
/html/*
/public/*
5.5 スクリプトの追加
ファイルpackjson.jsonのフィールドscriptにコマンドを追加します
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
6. ハスキーの設定
6.1 ハスキーのインストール
pnpm install -D husky
6.2 ハスキー設定ファイルの生成
注: このコマンドを実行する前に、まず
git initこのプロジェクト链接到远程仓库(github、gitee など)をダウンロードする必要があります。
npx husky-init
このコマンドを実行すると、ルート ディレクトリに .husky ディレクトリが生成され、その下にコミット前ファイルが作成されます内容如下。このファイル内のコマンドは、コミットを実行するときに実行されます。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm format
7. commitlint の設定
git送信時のコミット情報の設定とgit送信仕様の統一送信
7.1 commitlintのインストール
pnpm add @commitlint/config-conventional @commitlint/cli -D
7.2 新しい commitlint 設定ファイルの作成
プロジェクトのルート ディレクトリに新しい commitlint.config.cjs ファイルを作成し、次のコードを入力します。
module.exports = {
extends: ['@commitlint/config-conventional'],
// 校验规则
rules: {
'type-enum': [
2,
'always',
[
'feat',
'fix',
'docs',
'style',
'refactor',
'perf',
'test',
'chore',
'revert',
'build',
],
],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72],
},
}
設定手順:
'feat', //新特性、新功能
'fix', //修改bug
'docs', //文档修改
'style', //代码格式修改, 注意不是 css 修改
'refactor', //代码重构
'perf', //优化相关，比如提升性能、体验
'test', //测试用例修改
'chore', //其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert', //回滚到上一个版本
'build', //编译相关的修改，例如发布版本、对项目构建或者依赖的改动
7.3 スクリプトの追加
ファイルpackjson.jsonのフィールドscriptにコマンドを追加します
"commitlint": "commitlint --config commitlint.config.cjs -e -V"
7.4 ハスキー犬との使用
npx husky add .husky/commit-msg
ルートディレクトリのhuskyフォルダーにあるcommit-msgに次のコマンドを追加します。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint
7.5 提出仕様書
デモの送信: git commit -m 'feat: New product page query function' はプレフィックスとして
使用されるだけでなくfeat、他のプレフィックスも使用できます。詳細については、ステップ 7.2 を参照してください。
