vue3 Typescript eslint prettier, husky lint-staged, @commitlint/config-conventional @commitlint/cli

eslint

npm init @eslint/config

.eslintrc.js 修改

module.exports = {
	env: {
		browser: true,
		es2021: true,
	},
	extends: [
		// "eslint:recommended",
		// "plugin:vue/vue3-essential",
		"plugin:vue/vue3-recommended",
		"plugin:@typescript-eslint/recommended",
	],
	overrides: [],
	parser: "vue-eslint-parser",
	parserOptions: {
		parser: "@typescript-eslint/parser",
		ecmaVersion: "latest",
		sourceType: "module",
	},
	plugins: ["vue", "@typescript-eslint"],
	rules: {
		// indent: 'off',
		// 'vue/script-indent': ['error', 2, { baseIndent: 1 }],
		// 'linebreak-style': ['error', 'unix'],
		// quotes: ['error', 'single'],
		// semi: ['error', 'always'],
		// 'vue/no-multiple-template-root': 'off',
		// 'vue/no-v-model-argument': 'off',
	},
};

常用命令
检测文件
npx eslint “src/App.vue”
npx eslint --ext .js,vue src
npx eslint “src/**/*.{js,vue}”

格式化文件
npx eslint “src/**/*.{js,vue}” --fix

添加 .eslintignore

/node_modules
/public
/dist
.vscode
.husky
components.d.ts
auto-imports.d.ts

Prettier

如果您使用 ESLint，请安装 eslint-config-prettier 以使 ESLint 和 Prettier 彼此配合得很好。它会关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则。
pnpm add eslint-config-prettier prettier -D

.eslintrc.js 修改

module.exports = {
	extends: [
		...
		"prettier"
	],
};

添加 .prettierrc.json

{
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 4,
    "endOfLine": "lf",
    "semi": true,
    "trailingComma": "all",
    "vueIndentScriptAndStyle": true,
    "htmlWhitespaceSensitivity": "ignore"
}

添加 .prettierignore

/node_modules
/public
/dist
.vscode
.husky
components.d.ts
auto-imports.d.ts

格式化代码
npx prettier --write .

vscode 插件 ESLint Prettier - Code formatter

husky lint-staged

pnpm add husky lint-staged -D

npm pkg set scripts.prepare=“husky install”

package.json 生成命令

{
	"scripts": {
			...
	    "prepare": "husky install"
	}
}

npm run prepare
根目录生成 .husky 文件夹

npx husky add .husky/pre-commit “npx lint-staged”
.husky 文件夹 生成 pre-commit
pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# 提交 git 时会自动执行此命令
npx lint-staged

package.json

{
	...
	"lint-staged": {
		"*.{js,jsx,ts,tsx,vue}": [
				"eslint --cache --fix",
				"prettier --write"
		]
	}
}

@commitlint/config-conventional @commitlint/cli

下载

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

添加 commitlint.config.js
注意 如果是命令创建注意修改编码为 utf-8
echo “module.exports = {extends: [‘@commitlint/config-conventional’]}” > commitlint.config.js

使用 Husky 的 commit-msg 钩子
npx husky install
npx husky add .husky/commit-msg ‘npx --no – commitlint --edit ${1}’

commitlint.config.js
1:0 error Parsing error: Invalid character
echo "module.exports 编码不是utf-8
把 commitlint.config.js 编码格式改为 utf-8