最新VUE3 各种Lint+ TS 配置

eslint

# 目前 typescript-eslint 支持到eslint8.57
npm install -D eslint@8.57 eslint-config-prettier eslint-plugin-prettier  eslint-plugin-vue  @eslint/js @types/eslint__js  typescript-eslint @typescript-eslint/parser

参考官网

• eslint@8.57 :默认对js文件lint
• eslint-config-prettier eslint-plugin-prettier :和prettier集成，需要关闭eslint的format类规则，并在运行eslint时运行prettier
• eslint-plugin-vue :vue3的eslint插件
• @eslint/js @types/eslint__js typescript-eslint @typescript-eslint/parser :解析并lint TS文件

eslint.config.js eslint8.57版本使用

import pluginVue from 'eslint-plugin-vue'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' //自动启用eslint-config-prettier
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
export default [
	js.configs.recommended,
	...tseslint.configs.recommended,
	...pluginVue.configs['flat/recommended'],
	...pluginVue.configs['flat/essential'],
	...pluginVue.configs['flat/strongly-recommended'],
	eslintPluginPrettierRecommended,
	{
		files: ['**/*.{vue,ts}'],
		languageOptions: {
			parserOptions: {
				parser: '@typescript-eslint/parser',
			},
		},
		rules: {
			// override/add rules settings here, such as:
			'vue/no-unused-vars': 'error',
		},
	},
]

prettier

npm install --save-dev --save-exact prettier

参考官网

• prettier :仅对代码进行格式化

.prettierrc.js

export default {
	printWidth: 150,
	tabWidth: 2,
	useTabs: true,
	semi: false,
    // ...
}

stylelint

npm i -D stylelint stylelint-config-standard stylelint-config-html  stylelint-config-recommended-vue stylelint-prettier

参考官网

• stylelint stylelint-config-standard :对css文件lint
• stylelint-config-html stylelint-config-recommended-vue vue和html文件lint。可以使用postcss-html，官网说You can use it more easily if you use an already configured sharable config. 可以更方便～
• stylelint-prettier :运行stylelint时运行prettier

.stylelintrc.json

{
	"extends": ["stylelint-config-standard", "stylelint-config-html", "stylelint-config-recommended-vue"],
	"plugins": ["stylelint-prettier"],
	"rules": {
		"no-empty-source": true,
		"rule-empty-line-before": "always-multi-line"
	}
}

commitlint

npm install --save-dev @commitlint/{cli,config-conventional}
# 将 commitlint 配置为使用常规配置
echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
# 要使用 commitlint，需要设置 commit-msg hook
npm install --save-dev husky

npx husky init
# 1.在commit—msg中
# Add commit message linting to commit-msg hook
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

# 2.或者在package.json中
npm pkg set scripts.commitlint="commitlint --edit"
echo "npm run commitlint \${1}" > .husky/commit-msg

# 安装lint-staged 🚫💩 不要让💩 滑入你的仓库  --这是官网说的
npm install --save-dev lint-staged

# pre-commit 添加 npx lint-staged

参考官网

• @commitlint/{cli,config-conventional} husky:在git hook时对提交的消息lint 如add:new
• lint-staged:对暂存区的代码进行处理

package.json

{
    ...
  "lint-staged": {
		"*": [
			"prettier --write"
		],
		"*.{ts?(x),js}": [
			"eslint --fix",
		]
	},
  ...
}