前言
对于 ESLint、Prettier 不了解的同学，可以查看相关的文章，我这里就不赘述了。
其他规范可参考以下：
实现步骤
1、在项目的 package.json 文件中添加相关依赖（注意版本间有一定的关联性，这里适用于 vue2）
{
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.19",
"@vue/cli-plugin-eslint": "^4.5.19",
"@vue/eslint-config-prettier": "6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-vue": "^7.2.0",
"prettier": "^2.5.1",
},
}
2、安装依赖
npm i
3、配置 ESLint 的规则
在项目的根目录中，创建 .eslintrc.js 文件，加入以下内容（相应的规则可以按照自己想要的效果进行修改）
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended', 'plugin:prettier/recommended'],
// add your custom rules here
// it is base on https://github.com/vuejs/eslint-config-vue
rules: {
// 模板每行属性的数量是否不超过定义的最大值,超过就换行
'vue/max-attributes-per-line': [
'warn',
{
singleline: 10,
multiline: {
max: 10,
allowFirstLine: true,
},
},
],
// 强制在单行元素的内容前后加换行符
'vue/singleline-html-element-content-newline': 'off',
// 该规则强制在多行元素的内容前后换行
'vue/multiline-html-element-content-newline': 'off',
// 该规则旨在为name属性的大小写强制使用样式，以保持一致性。
'vue/name-property-casing': ['error', 'PascalCase'],
// 该规则报告了所有v-html指令的使用，以减少将潜在不安全/未转义的html注入浏览器导致跨站点脚本攻击的风险。
'vue/no-v-html': 'off',
'vue/html-closing-bracket-newline': 'off',
// 模板语法错误
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
// 将自关闭符号作为已配置的样式强制执行
'vue/html-self-closing': 0,
// 在对象中使用getter/setter
'accessor-pairs': 2,
// =>的前/后括号
'arrow-spacing': [
2,
{
before: true,
after: true,
},
],
// 在循环内禁止`await`
'block-spacing': [2, 'always'],
// if while function 后面的{必须与if在同一行，java风格
'brace-style': [
2,
'1tbs',
{
allowSingleLine: true,
},
],
// 强制驼峰法命名
camelcase: [
0,
{
properties: 'always',
},
],
// always-multiline：多行模式必须带逗号，单行模式不能带逗号 off->2
'comma-dangle': ['off', 'never'],
// 控制逗号前后的空格
'comma-spacing': [
2,
{
before: false,
after: true,
},
],
// 控制逗号在行尾出现还是在行首出现
'comma-style': [2, 'last'],
// 强制在子类构造函数中用super()调用父类构造函数，TypeScrip的编译器也会提示
'constructor-super': 2,
// 强制所有控制语句使用一致的括号风格
curly: [2, 'multi-line'],
// object, '.' 号应与对象名在同一行
'dot-location': [2, 'property'],
// 文件末尾强制换行
'eol-last': 2,
// 使用 === 替代 ==
eqeqeq: ['off'],
// 生成器函数*的前后空格
'generator-star-spacing': [
2,
{
before: true,
after: true,
},
],
// nodejs 处理错误
'handle-callback-err': [2, '^(err|error)$'],
// 缩进风格 off->2
indent: [
'error',
2,
{
SwitchCase: 1,
},
],
'vue/html-indent': [
'off',
2,
{
SwitchCase: 1,
},
],
// JSX 属性中一致使用双引号或单引号
'jsx-quotes': [2, 'prefer-double'],
// 对象字面量中冒号的前后空格
'key-spacing': [
2,
{
beforeColon: false,
afterColon: true,
},
],
// 在关键字前后强制使用一致的空格
'keyword-spacing': [
2,
{
before: true,
after: true,
},
],
// 函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
'new-cap': [
2,
{
newIsCap: true,
capIsNew: false,
},
],
// 在调用没有参数的构造函数时强制或禁止使用圆括号
'new-parens': 2,
// 不允许“数组”构造函数
'no-array-constructor': 2,
// 不允许使用“arguments.caller”或“arguments.callee”
'no-caller': 2,
// 不允许使用 "console"
'no-console': 'off',
// 禁止重新分配类成员
'no-class-assign': 2,
// 在条件表达式中禁止赋值操作符
'no-cond-assign': 2,
// 禁止对const变量重新赋值
'no-const-assign': 2,
// 禁止在正则表达式中使用控制字符
'no-control-regex': 0,
// 不允许删除变量 var
'no-delete-var': 2,
// 在“函数”定义中禁止重复参数
'no-dupe-args': 2,
// 禁止重复的类成员
'no-dupe-class-members': 2,
// 禁止在对象字面量中出现重复的键
'no-dupe-keys': 2,
// 禁止重复的大小写标签
'no-duplicate-case': 2,
// 禁止在正则表达式中使用空字符类
'no-empty-character-class': 2,
// 不允许空解构模式
'no-empty-pattern': 2,
// 禁止使用' eval()
'no-eval': 2,
// 禁止在' catch '子句中重新赋值异常
'no-ex-assign': 2,
// 禁止扩展本机类型
'no-extend-native': 2,
// 禁止不必要地调用' .bind() '
'no-extra-bind': 2,
// 禁止不必要的布尔类型转换
'no-extra-boolean-cast': 2,
// 禁止不必要的括号
'no-extra-parens': [2, 'functions'],
// 禁止跌落' case '语句
'no-fallthrough': 2,
// 在数字字面值中禁止前导或后导小数点
'no-floating-decimal': 2,
// 禁止对' function '声明重新赋值
'no-func-assign': 2,
// 禁止使用' eval() '类方法
'no-implied-eval': 2,
// 禁止在嵌套块中声明变量或'函数'
'no-inner-declarations': [2, 'functions'],
// 禁止在' RegExp '构造函数中使用无效的正则表达式字符串
'no-invalid-regexp': 2,
// 不允许不规则的空白
'no-irregular-whitespace': 2,
// 禁止使用' __iterator__ '属性
'no-iterator': 2,
// 禁止与变量共享名称的标签
'no-label-var': 2,
// 不允许标记语句
'no-labels': [
2,
{
allowLoop: false,
allowSwitch: false,
},
],
// 禁止不必要的嵌套块
'no-lone-blocks': 2,
// 禁止使用空格和制表符混合进行缩进
'no-mixed-spaces-and-tabs': 2,
// 不允许多行空格
'no-multi-spaces': 2,
// 不允许多行字符串
'no-multi-str': 2,
// 禁止多个空行
'no-multiple-empty-lines': [
2,
{
max: 1,
},
],
// 禁止赋值给本机对象或只读全局变量+
'no-global-assign': 2,
// 禁止对关系操作符的左操作数取反+
'no-unsafe-negation': 2,
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
// 不允许对象的构造函数
'no-new-object': 2,
'no-new-require': 2,
// 禁止“Symbol”对象使用“new”操作符
'no-new-symbol': 2,
// 禁止使用' String '、' Number '和' Boolean '对象的' new '操作符
'no-new-wrappers': 2,
// 禁止调用全局对象属性作为函数
'no-obj-calls': 2,
// 不允许八进制文字
'no-octal': 2,
// 禁止在字符串字面量中使用八进制转义序列
'no-octal-escape': 2,
'no-path-concat': 2,
// 禁止使用' __proto__ '属性
'no-proto': 2,
// 不允许变量redeclaration
'no-redeclare': 2,
// 禁止在正则表达式中使用多个空格
'no-regex-spaces': 2,
// 禁止在' return '语句中使用赋值操作符
'no-return-assign': [2, 'except-parens'],
// 禁止两边完全相同的作业
'no-self-assign': 2,
// 禁止两边完全相同的比较
'no-self-compare': 2,
// 不允许逗号操作符
'no-sequences': 2,
// 禁止标识符隐藏受限制的名称
'no-shadow-restricted-names': 2,
// 要求或不允许函数标识符与其调用之间有空格+
'func-call-spacing': 2,
'no-spaced-func': 2,
// 不允许稀疏阵列
'no-sparse-arrays': 2,
// 在构造函数中调用super()之前禁止使用' this ' / ' super '
'no-this-before-super': 2,
// 禁止将文字作为异常抛出
'no-throw-literal': 2,
// 禁止行尾有空格
'no-trailing-spaces': 2,
// 禁止使用未声明的变量，除非在' /*global */ '注释中提到
'no-undef': 2,
// 禁止将变量初始化为“undefined”
'no-undef-init': 2,
// 禁止混乱的多行表达式
'no-unexpected-multiline': 2,
// 禁止未修改的循环条件
'no-unmodified-loop-condition': 2,
// 当存在更简单的选择时，禁止使用三元运算符
'no-unneeded-ternary': [
2,
{
defaultAssignment: false,
},
],
// 禁止在' return '， ' throw '， ' continue '和' break '语句之后出现不可到达的代码
'no-unreachable': 2,
// 禁止在' finally '块中使用控制流语句
'no-unsafe-finally': 2,
// 不允许未使用的变量
'no-unused-vars': [
2,
{
vars: 'all',
args: 'none',
},
],
// 禁止不必要地调用' .call() '和' .apply()
'no-useless-call': 2,
// 禁止在对象和类中使用不必要的计算属性键
'no-useless-computed-key': 2,
// 禁止不必要的构造函数
'no-useless-constructor': 2,
// 禁止不必要的转义字符
'no-useless-escape': 0,
// 属性前不允许有空格
'no-whitespace-before-property': 2,
// 不允许`with`语句
'no-with': 2,
// 强制在函数中同时声明或单独声明变量
'one-var': [
2,
{
initialized: 'never',
},
],
// 强制操作符使用一致的换行样式
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before',
},
},
],
// 要求或禁止在块内填充
'padded-blocks': [2, 'never'],
// 强制一致使用反引号、双引号或单引号
quotes: [
2,
'single',
{
avoidEscape: true,
allowTemplateLiterals: true,
},
],
// 要求或不允许用分号代替ASI off->2
semi: ['off', 'never'],
// 强制分号前后有一致的空格
'semi-spacing': [
2,
{
before: false,
after: true,
},
],
// 强制在块之前有一致的空格
'space-before-blocks': [2, 'always'],
// 强制在“函数”定义开括号前有一致的空格
'space-before-function-paren': [0, 'never'],
// 在圆括号内强制使用一致的空格
'space-in-parens': [2, 'never'],
// 要求中缀操作符周围有空格
'space-infix-ops': 2,
// 强制一元运算符前后有一致的空格
'space-unary-ops': [
2,
{
words: true,
nonwords: false,
},
],
// 空格注释强制在注释中的' // '或' /* '后面有一致的空格
'spaced-comment': [
2,
'always',
{
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','],
},
],
// 要求或禁止模板字符串内嵌表达式周围有空格
'template-curly-spacing': [2, 'never'],
// 检查' NaN '时要求调用' isNaN() '
'use-isnan': 2,
// 强制将' typeof '表达式与有效字符串进行比较
'valid-typeof': 2,
// 要求立即调用' function '时使用圆括号
'wrap-iife': [2, 'any'],
// 要求或禁止' yield* '表达式中的' * '周围有空格
'yield-star-spacing': [2, 'both'],
// 要求或不允许“尤达”条件
yoda: [2, 'never'],
// 对于声明后从未重新赋值的变量，要求使用' const '声明
'prefer-const': 2,
// 禁止使用'debugger'
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// 在大括号内强制使用一致的空格
'object-curly-spacing': [
2,
'always',
{
objectsInObjects: true,
},
],
// 在数组括号内强制使用一致的空格
'array-bracket-spacing': [2, 'never'],
'vue/no-lone-template': [
'off',
{
ignoreAccessible: true,
},
],
},
};
4、配置 ESLint 忽略文件（可选）
在项目的根目录中，创建 .eslintignore 文件，把想要忽略格式化的文件路径加入进去（以下是示例）
src/assets
src/lib
src/icons
public
dist
node_modules
vab-icons
5、配置 Prettier 规则
在项目的根目录中，创建 .prettierrc.js 文件，加入以下内容（由于 ESLint 和 Prettier 的代码格式化规则不太一样，所以需要保持同步）
module.exports = {
// 指定自动换行的行长，默认值80。
printWidth: 150,
//开启 eslint 支持
eslintIntegration: true,
//使用单引号
singleQuote: true,
//结尾加分号
semi: true,
endOfLine: 'auto',
};
6、安装 VSCode 插件
- ESLint
- Prettier
7、推荐团队成员安装相关插件（可选）
在项目的根目录中，创建 .vscode 文件夹，在 .vscode 里面创建 extensions.json 文件，加入想要推荐的插件
{
"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}
8、设置 VSCode 保存时自动格式化（避免多种格式化插件冲突）
在项目的根目录中，创建 .vscode 文件夹，在 .vscode 里面创建 settings.json 文件，加入以下内容
{
// 以下程序用于格式化Vue项目，其他项目可以根据原理一通百通。
// 设置保存时格式化。只用于用于格式化css/less程序
"editor.formatOnSave": true,
// 关闭js/ts的默认format,统一用eslint进行格式化（tslint已经不维护了，所以转eslint吧）
"javascript.format.enable": false,
"typescript.format.enable": false,
// 关闭vetur的js/ts/html的formatter。html用eslint-plugin-vue格式化。
// js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突
"vetur.format.defaultFormatter.html": "none",
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.ts": "none",
// 开启eslint自动修复js/ts/jsx/tsx功能
"eslint.format.enable": true,
// 设置js的formatter为eslint
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// jsonc是有注释的json
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.codeActionsOnSave.mode": "problems",
"eslint.validate": ["typescript", "javascript", "javascriptreact", "typescriptreact"],
// 将json文件识别为jsonc格式
"files.associations": {
"*.json": "jsonc"
},
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
}
