哒哒，昨天尝试了很久，终于搞完了ESLINT+PRETTIER的结合，下面先进入安装步骤

环境：WIN10

IDE：VSCODE

ESLINT的安装与配置

ESLINT就可以叫 代码质量检测工具

用npm命令安装开发依赖项(devDependencies)，为什么不放到全局呢？

因为一旦安装所有本地代码都会收到相同的约束，但我只想在项目里这么做

先介绍每一个包的含义

  • eslint：ESLint 是一款用于检查 JavaScript 代码错误、风格和质量的工具。
  • eslint-plugin-vue：一个用于在 ESLint 中检查 Vue.js 代码的插件，提供了一些特定于 Vue.js 的规则和功能。
  • eslint-plugin-html：一个用于在 ESLint 中检查 HTML 代码的插件，它允许在 JavaScript 代码中包含嵌入的 HTML，并进行检查。
  • eslint-config-standard：一套共享的 ESLint 配置，遵循 JavaScript Standard Style，其中包含了一些规范的规则。
  • eslint-plugin-import：一个用于在 ESLint 中检查 import/export 语句的插件，可以帮助你确保模块的导入和导出正确无误。
  • eslint-plugin-node：一个用于在 ESLint 中检查 Node.js 代码的插件，包含了一些特定于 Node.js 的规则。
  • eslint-plugin-promise：一个用于在 ESLint 中检查 Promise 使用的插件，可以帮助你编写更可靠的异步代码。
  • eslint-plugin-standard：一个用于在 ESLint 中检查 JavaScript 代码的插件，提供了一些与 JavaScript Standard Style 相关的规则和功能。

安装命令

1
2
3

npm install -D eslint eslint-plugin-vue eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

安装ESLINT插件

从vscode插件搜索ESLINT并安装即可，不需要配置插件，主要靠目录下两个文件来配置

使用ESLINT

在项目根目录下手动创建两个文件

配置：**.eslintrc.js**

忽略：**.eslintignore.js**

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// .eslintrc.js

module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
		es6: true,
	},
	globals: {
		wx: 'readonly',
		uni: 'readonly',
		uniCloud: 'readonly',
	},
	extends: ['plugin:vue/recommended', 'eslint:recommended'],
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 在生产环境下警告不允许使用console
		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 在生产环境下警告不允许使用debugger

		// 以下是一些具体的规则配置，0表示关闭规则，2表示报错，1表示警告
		'vue/html-indent': ['error', 'tab'], // 要求缩进为制表符
		'vue/multi-word-component-names': 'off', // 要求组件名使用大驼峰命名法
		'no-sequences': 0, // 允许使用逗号操作符
		'import/named': 0, // 允许导入模块的具体导出
		'no-useless-concat': 0, // 允许不必要的字符串拼接
		'no-unreachable': 0, // 允许在return、throw、continue和break语句之后有不可达代码
		'no-case-declarations': 0, // 允许在case子句中使用词法声明
		'no-continue': 0, // 允许使用continue语句
		'no-redeclare': 0, // 允许重复声明变量
		'block-scoped-var': 0, // 允许在块级作用域外访问变量
		'operator-assignment': 0, // 允许简化的赋值运算符
		'no-multi-assign': 0, // 允许连续赋值
		'comma-dangle': 0, // 允许行末逗号
		'prefer-const': 0, // 允许使用let和const
		semi: 2, // 允许省略分号
		'eol-last': 0, // 允许文件末尾空行
		'linebreak-style': 0, // 允许不同平台的换行符
		'no-unused-vars': 0, // 允许未使用的变量
		'no-useless-computed-key': 0, // 允许不必要的计算属性键名
		'default-case': 0, // 允许switch语句没有default分支
		'prefer-destructuring': 0, // 允许使用对象和数组的解构赋值
		'arrow-parens': 0, // 允许箭头函数参数使用括号
		'no-var': 0, // 要求使用let或const而不是var
		'comma-spacing': 0, // 允许在逗号前后使用任意空格
		'no-mixed-operators': 0, // 允许混合使用不同的操作符
		radix: 0, // 允许省略parseInt()函数的第二个参数
		'prefer-promise-reject-errors': 0, // 允许使用非Error对象作为Promise的拒绝原因
		'arrow-body-style': 0, // 允许简化的箭头函数体风格
		'prefer-rest-params': 0, // 允许使用arguments对象
		'no-restricted-syntax': 0, // 允许使用特定的语法
		'vars-on-top': 0, // 允许变量声明在作用域的任意位置
		'import/no-named-as-default': 0, // 允许使用导出对象作为默认导出
		'import/extensions': 0, // 允许在导入语句中不使用文件扩展名
		'import/no-named-as-default-member': 0, // 允许使用导出对象的成员作为默认导出
		'guard-for-in': 0, // 允许不在for...in循环中使用hasOwnProperty进行过滤
		'no-unused-expressions': 0, // 允许未使用的表达式
		'import/prefer-default-export': 0, // 允许在模块只有一个导出时使用默认导出
		'no-shadow': 0, // 允许变量名与外层作用域的变量名重复
		'no-nested-ternary': 0, // 允许嵌套的三元表达式
		'no-empty': 0, // 允许空的块语句
		eqeqeq: 0, // 允许使用非严格相等运算符
		camelcase: 0, // 允许不符合驼峰命名规则的变量名
		'prefer-template': 0, // 允许使用字符串拼接而不是模板字符串
		'dot-notation': 0, // 允许使用[]访问对象属性
		'prefer-arrow-callback': 0, // 允许使用普通函数而不是箭头函数
		'no-plusplus': 0, // 允许使用++和--
		'no-else-return': 0, // 允许在if语句中使用return语句
		'one-var-declaration-per-line': 0, // 允许每个变量声明都有独立的行
		'consistent-return': 0, // 允许函数返回值的一致性
		'no-param-reassign': 0, // 允许对函数参数进行赋值
		'max-len': 0, // 允许行的最大长度超过限制
		'no-lonely-if': 0, // 允许没有else的if语句
		'array-callback-return': 0, // 允许在数组的回调函数中不使用return语句
		'prefer-object-spread': 0, // 允许使用对象扩展运算符
		'import/order': 0, // 允许导入语句的排序方式
		'import/newline-after-import': 0, // 允许在导入语句后不加空行
		'func-names': 0, // 允许函数表达式没有函数名
		'no-underscore-dangle': 0, // 允许变量名以单个下划线开头或结尾
		'no-useless-escape': 0, // 允许不必要的转义字符
	},
};

1
2
3
4
5
// .eslintignore.js

node_modules/
uni_modules/

PRETTIER的安装与配置

PRETTIER：代码格式化工具

相比于ESLINT，prettier就相当简单了

不需要安装包

安装prettier插件

从vscode插件搜索prettier安装即可，也不需要配置

使用PRETTIER

在项目根目录下手动创建两个文件

配置：**.prettierrc.js**

忽略：**.prettierignore.js**

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
// .prettierrc.js

module.exports = {
	// 单行最大长度
	printWidth: 100,
	// 使用tab缩进，默认false
	useTabs: true,
	// 设置编辑器每一个水平缩进的空格数
	tabWidth: 2,
	// 在句尾添加分号
	semi: true,
	// 使用单引号
	singleQuote: true,
	jsxSingleQuote: true,
	// 在任何可能的多行中输入尾逗号。
	trailingComma: 'all',
	// 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
	bracketSpacing: true,
	// 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）
	jsxBracketSameLinte: false,
	// 为单行箭头函数的参数添加圆括号。
	alwaysParens: 'always',
	// 行结束
	endOfLine: 'auto',
	vueIndentScriptAndStyle: true, //是否缩进Vue 文件中的代码<script>和<style>标签
	htmlWhitespaceSensitivity: 'ignore', //HTML 空白敏感度
};

1
2
3
4
5
// .prettierignore.js

node_modules/
uni_modules/

好了，基本的配置到此就结束了，这些配置随着项目的开发，会有所改变，但安装到成型基本是不会变化的

see ya~