vite携手eslint与prettier与stylelint与husky与commitlint，以及统一包管理工具 pnpm

本文链接：https://blog.csdn.net/csdnmingzai/article/details/141340370

1、首先安装eslint（检查代码）

pnpm i eslint -D

1.1、生成配置文件 .eslint.cjs 使用命令：npx eslint --init

Need to install the following packages:
@eslint/create-config@1.0.1
Ok to proceed? (y) y
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@eslint/create-config@1.0.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || ^20.9.0 || >=21.1.0' },
npm WARN EBADENGINE current: { node: 'v18.14.0', npm: '9.3.1' }
npm WARN EBADENGINE }
? How would you like to use ESLint? ...
To check syntax only
> To check syntax and find problems
To check syntax, find problems, and enforce code style
? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue
√ Would you like to install them now? · No / Yes
? Which package manager do you want to use? ...
npm
yarn
> pnpm
bun

1.2、安装指令插件

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

2、安装prettier依赖包（格式化代码）

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.1、创建 .prettierrc.json，并添加配置

{

"singleQuote": true,

"semi": false,

"bracketSpacing": true,

"htmlWhitespaceSensitivity": "ignore",

"endOfLine": "auto",

"trailingComma": "all",

"tabWidth": 2

}

2.2、创建 .prettierignore忽略文件，并添加配置

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

2.3、配置文件修正 eslint.config.js

import globals from 'globals'
// 预定义配置
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'

// import babelParser from "@typescript-eslint/parser";
import commpnParser from 'vue-eslint-parser'
import prettier from 'eslint-plugin-prettier'

// "@babel/eslint-parser";

// import customConfig from "./esconfig/custom_config.js";

export default [
// languageOptions：配置如何检查 js 代码
{
// 1.1 处理与 JavaScript 相关的配置项
// - ecmaVersion
// - sourceType
// - globals
// - parser
// - parserOptions
// files: ["**/*.ts", "**/*.vue"],
// ignores: ["**/*.config.js"],
ignores: [
'**/*.config.js',
'dist/**',
'node_modules/**',
'!**/eslint.config.js',
],
languageOptions: {
// 1.11 定义可用的全局变量
globals: globals.browser,
// 1.12 扩展
// ecmaVersion: "latest",
// sourceType: "module",
parser: commpnParser,
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
},
},
// 原来的extends替换为如下模式
pluginJs.configs.recommended,
...tseslint.configs.recommended,
...pluginVue.configs['flat/essential'],
{
plugins: {
prettier,
},
rules: {
// 开启这条规则后，会将prettier的校验规则传递给eslint，这样eslint就可以按照prettier的方式来进行代码格式的校验
'prettier/prettier': 'error',
// 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、安装stylelint依赖（格式化html、css、js）

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

3.1、创建 .stylelintrc.cjs 配置文件

// @see 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和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默认样式的时候能使用到
},
],
},
}

3.2、创建 .stylelintignore 忽略文件

/node_modules/*
/html/*
/dist/*
/public/*
public/*
/dist*
/docs/**/*

3.3、添加运行脚本

"scripts": {
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}

3.4、最终运行脚本：配置统一的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,js,json,md}\"",
"lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
},

4、安装husky依赖（在提交git前格式化代码；自动执行 pnpm run format）

pnpm install -D husky

4.1、先初始化 git 仓库，在进行关联远程仓库

git init

git remote add origin https://gitee.com/test1101/vue3_admin_template.git

4.2、执行 npx husky-init 会在根目录生成一个 .husky目录，目录下会有一个pre-commit文件。这个文件里面的命令会在我们执行commit的时候就会执行。(本地向远程提交前)

npx husky-init

4.3、在 .husky/pre-commit 文件添加如下命令。

后续只需要 commit代码就行，如果发生格式化在进行 add 与 commit 就可以提交到远程

#!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

pnpm run format

5、安装commitlint依赖（统一 git commit 的信息提交规范）

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

5.1、添加配置文件，新建 commitlint.config.cjs (注意是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],

        }

}

5.2、在 package.json 中配置scripts命令

# 在 script 中添加下面的代码

{

“scripts”: {

"commitlint": "commitlint --config commitlint.config.cjs -e -V"

}

}

5.3、配置结束，当填写 commit 信息的时候，前面就需要带着下面的 subject

'feat', // 新特性、新功能

'fix', // 修改 bug

'docs', // 文档修改

'style', // 代码格式修改，注意不是 css 修改

'refactor', // 代码重构

'perf', // 优化相关，比如提升性能、体验

'test', // 测试用例修改

'chore', // 其他修改，比如改变构建流程、或者增加依赖库、工具等

'revert', // 回滚到上一个版本

'build', // 编译相关的修改，例如发布版本，对项目构建或者依赖的改动

5.4、添加并配置 husky，会生成一个 commit-msg 文件（本地向远程提交信息会执行）

npx husky add .husky/commit-msg

5.5、在生成的 commit-msg 文件中添加如下命令

当 commit 提交信息，必须是 git commit -m 'fix: xxx' 符合类型的才可以，注意的是类型的后面需要用英文的 : ，并且冒号后面必须有一个空格，这个是不能省略的

#!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

pnpm commitlint

6、统一包管理工具 pnpm

在根目录创建 scripts/preinstall.js 文件，添加如下内容

if(!/pnpm/.test(process.env.npm_execpath || '')){

console.warn(

`\u001b[33mThis repository must using pnpm as the package manager ` +

`for scripts to work properly .\u001b[39m\n`,

)

process.exit(1)

}

6.1、配置命令