语法检测

• 校检代码是否合法，使代码更加健壮。
• 官方文档

安装

npm install eslint -D
#或者
pnpm install eslint -D

初始化

根据提示安装，会生成.eslintrc.cjs 配置文件

pnpm eslint --init

参考选项（vue3+ts）

1. How would you like to use ESLint?

• 选择：To check syntax and find problems

2. What type of modules does your project use?

• 选择：JavaScript modules (import/export)

3. Which framework does your project use?

• 选择：Vue.js

4. Does your project use TypeScript?

• 选择：Yes

5. Where does your code run?

• 选择：Browser

6. Would you like to install them now?

• 选择：Yes

7. Which package manager do you want to use?

• 选择：pnpm

配置规则

在.eslintrc.cjs 中配置 rules

module.exports = {
	//运行环境
	env: {
		browser: true, //浏览器
		es2021: true, //es2021
	},
	//规则继承
	extends: [
		//全部规则默认是关闭的，这个配置项开启推荐规则，详细参考广泛文档。例如：函数不能重名，对象不能出现重复key
		'eslint:recommended',
		//ts语法规则
		'plugin:@typescript-eslint/recommended',
		//vue3语法规则
		'plugin:vue/vue3-essential',
		//使用prettier格式化
		'prettier',
	],
	//为特定类型的文件指定处理器
	overrides: [
		{
			env: {
				node: true,
			},
			files: ['.eslintrc.{js,cjs}'],
			parserOptions: {
				sourceType: 'script',
			},
		},
	],
	parserOptions: {
		ecmaVersion: 'latest',
		parser: '@typescript-eslint/parser', //ts解析器
		sourceType: 'module',
	},
	plugins: ['@typescript-eslint', 'vue', 'prettier'],
	/**
	 * 限制规则
	 * off 或者 0 => 关闭规则
	 * warn 或者 1 => 打开的规则作为警告（不影响代码执行）
	 * error 或者 2 => 规则作为一个错误（代码不能执行，界面错误）
	 */
	rules: {
		'prettier/prettier': 'error', // 开启规则
		//eslint 参考配置：@see(https://eslint.org/docs/latest/rules/)
		'no-var': 'error', //要求使用let or 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 参考配置：@see(https://typescript-eslint.io/rules/)
		'@typescript-eslint/no-unused-vars': 'error', //不允许 定义未使用的变量
		'@typescript-eslint/no-explicit-any': 'off', //允许 使用any类型
		'@typescript-eslint/no-non-null-assertion': 'error', //禁止 非空断言
		'@typescript-eslint/no-namespace': 'off', //允许 使用自定义TypeScript模块
		'@typescript-eslint/no-this-alias': 'off', //允许this别名

		//eslint-plugin-vue @see(https://eslint.vuejs.org/rules/)
		'vue/multi-word-component-names': 'off', //允许组件自定义名称
		'vue/no-mutating-props': 'off', //允许 组件prop的改变
		'vue/attribute-hyphenation': 'off', //允许 组件自定义属性的命名
	},
};

配置忽略

在.eslintignore 文件中加入忽略的文件

dist
node_modules
src/assets

配置检测命令

在 package.json 中加入执行命令

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix"
}