vue3+vite项目配置ESlint、pritter插件

Prettier安装使用

1. 安装prettier

npm add -D prettier
npm add -D eslint-config-prettier #eslint兼容的插件
npm add -D eslint-plugin-prettier #eslint的prettier
1
2
3

2. 配置.prettierrc.js
   
   在根目录下面添加.prettierrc.js文件夹，然后将下面的配置添加到其中。如果不想格式化某些文件可以再添加一个.prettierignore的文件，用法和.gitignore文件差不多，将不需要格式化的文件夹或文件通过正则匹配或者具名的方式添加进去，这样就不会格式化对应的文件了。

/** .prettierrc.js
 * 在VSCode中安装prettier插件 打开插件配置填写`.prettierrc.js` 将本文件作为其代码格式化规范
 * 在本文件中修改格式化规则，不会同时触发改变ESLint代码检查，所以每次修改本文件需要重启VSCode，ESLint检查才能同步代码格式化
 * 需要相应的代码格式化规范请自行查阅配置，下面为默认项目配置
 */
module.exports = {
	// 一行最多多少个字符
	printWidth: 150,
	// 指定每个缩进级别的空格数
	tabWidth: 2,
	// 使用制表符而不是空格缩进行
	useTabs: true,
	// 在语句末尾是否需要分号
	semi: true,
	// 是否使用单引号
	singleQuote: true,
	// 更改引用对象属性的时间 可选值""
	quoteProps: 'as-needed',
	// 在JSX中使用单引号而不是双引号
	jsxSingleQuote: false,
	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值""，默认none
	trailingComma: 'es5',
	// 在对象文字中的括号之间打印空格
	bracketSpacing: true,
	// jsx 标签的反尖括号需要换行
	jsxBracketSameLine: false,
	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
	arrowParens: 'always',
	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
	rangeStart: 0,
	rangeEnd: Infinity,
	// 指定要使用的解析器，不需要写文件开头的 @prettier
	requirePragma: false,
	// 不需要自动在文件开头插入 @prettier
	insertPragma: false,
	// 使用默认的折行标准 always\never\preserve
	proseWrap: 'preserve',
	// 指定HTML文件的全局空格敏感度 css\strict\ignore
	htmlWhitespaceSensitivity: 'css',
	// Vue文件脚本和样式标签缩进
	vueIndentScriptAndStyle: false,
	//在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，
	//然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。
	//对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。auto意为保持现有的行尾
	// 换行符使用 lf 结尾是 可选值""
	endOfLine: 'auto',
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3. VsCode安装prettier插件
   

在插件商店中找到prettier插件，安装完成后，点击prettier插件右下角的设置按钮，打开扩展设置，如上图右侧，找到Prettier: Config Path将.prettierrc.js填入，这一步相当于告诉插件我要使用自定义的格式化配置文件，然后就会遵守该文件的风格规范对对应文件进行代码规范格式化。

如果想每次保存（ctrl+s）自动格式化代码文件，可以在VsCode的设置中配置保存文件时自动格式化内容，如下图设置所示。

格式化的插件可能有多个，可以再编辑器内右键选择默认的格式化配置插件，如下图所示，我们设置prettier为默认的格式化插件，点击配置默认格式化程序...->选择prettier。

Prettier结合ESLint

配置完成prettier肯定会和eslint发生冲突，所以接下来要调整一下.eslintrc.js文件，通过几个扩展，来完成vue3、ts、prettier的规则和eslint插件结合使用，配置如下面代码所示。

Vue3的setup语法糖中有几个宏定义，如果不声明直接引用会报错，这里可以在配置文件中加入globals配置项（如下所示），通过全局声明这几个宏定义，就可以直接使用这几个函数不用再提前声明了，eslint检查也会正常通过。

可以看到配置文件中有process.env.NODE_ENV，这是一个node环境变量，使用过程可能会报错，这里安装@types/node(npm i -D @types/node)插件，就可以在全局使用process这个参数了，我们这里主要用于区分开发和生产环境，下面配置就是开发环境允许使用console.log()，而生产环境不能使用，如果构建包的过程中代码含有console.log()，会导致构建失败，请删除log后再打包。

/** .eslintrc.js
 * 在VSCode中安装ESLint插件，编写过程中检测代码质量
 * ESLint 代码质量校验相关配置
 * 这里使用prettier作为代码格式化工具，用ESLint做代码质检
 * 相关配置使用下面extends扩展先做默认设置
 * 在.prettierrc.js文件中配置好后，格式化规则会以.prettierrc.js作为最终格式，所以不建议在本文件中做代码格式化相关配置
 * 相关prettier配置ESLint会默认加载为代码质检 格式化以prettier为主
 * 在本配置文件中只做代码质量约束规范配置
 */
module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
	},
	extends: [
		'eslint-config-prettier',
		'eslint:recommended', // 使用推荐的eslint
		'plugin:@typescript-eslint/recommended',
		'plugin:vue/vue3-recommended', // 使用插件支持vue3
		'plugin:vue/vue3-essential',
		//1.继承.prettierrc.js文件规则  2.开启rules的 "prettier/prettier": "error"  3.eslint fix的同时执行prettier格式化
		'plugin:prettier/recommended',
	],
	parser: 'vue-eslint-parser',
	parserOptions: {
		ecmaVersion: 2020,
		sourceType: 'moudule',
		parser: '@typescript-eslint/parser',
	},
	plugins: [],
	globals: {
		defineProps: 'readonly',
		defineEmits: 'readonly',
		defineExpose: 'readonly',
		withDefaults: 'readonly',
	},
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? ['error', { allow: ['error', 'warn'] }] : 'off', //生产模式不允许使用log
		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', //生产默认不允许使用debugger
		'@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '.*', args: 'none' }], //变量声明未使用
		'@typescript-eslint/no-explicit-any': 'off', // 允许ts使用any
		// '@typescript-eslint/no-var-requires': 'off', // 强制使用 import 且不允许使用 require 设置off关闭检查
		// 'vue/require-v-for-key': 'off', // 对保留元素检查 vue3中v-for会自动追加key值，所以不用再强制添加key属性，所以不检查key的填写
		// 'vue/valid-v-for': 'off', // 对于非保留(自定义)元素检查  vue3中v-for会自动追加key值，所以不用再强制添加key属性，所以不检查key的填写
		// // 添加组件命名忽略规则 vue官方默认规则是多单词驼峰来进行组件命名
		// 'vue/multi-word-component-names': [
		// 	'warn',
		// 	{
		// 		ignores: ['index'], //需要忽略的组件名
		// 	},
		// ],
	},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

注意！

需要值得注意的是，配置文件修改如果是eslint能立刻反应并且提示，但是prettier修改后，由于结合了eslint插件，可能会导致不同步，需要重启VsCode才能一致，比如把单引号修改为双引号，prettier能立马格式化代码使用双引号，但是eslint检查会报错，所以修改完成prettier配置文件建议重启一下VsCode，保证eslint检查同步更新。

后期我们会结合项目使用过程遇到的代码检查问题不断调整eslint的配置项，所以以上配置只是初步的配置文件，查看完整的配置文件，请访问deduction-frontend/.eslintrc.js项目中的配置文件。

结语

脚手架搭建过程借鉴了网上许多大佬的博客，相关链接均已贴出，本文内容全部基于亲自实践所得，如果对您有帮助，劳烦点赞支持一下作者，如果文章内有错误之处还望指正，希望大家可以共同进步٩(๑❛ᴗ❛๑)۶。