Eslint配置指南

  • 1. Eslint配置指南
    • 1.1. 安装 ESLint
    • 1.2. 生成配置文件
    • 1.3. 修改配置文件
    • 1.4. 创建 .eslintignore 文件
    • 1.5. 运行 ESLint
    • 1.6. 整合到编辑器/IDE
    • 1.7. 自动修复
  • 2. 配置prettier
    • 2.1. 安装依赖包
    • 2.2. .prettierrc.json添加规则
    • 2.3. .prettierignore忽略文件
    • 2.4. 保存自动格式化
  • 3. eslint-config-win
    • 3.1. 安装
    • 3.2. 依赖版本
    • 3.3. 用法
      • 3.3.1. Vue
    • 3.4. Vue3 新增规则
    • 3.5. 参考
    • 3.6. 开发维护
  • 4. eslint配置举例

1. Eslint配置指南

ESLint 是一个强大的代码检查工具,用于识别 JavaScript 和其他支持的语言中的常见编程错误,并强制执行一致的编码风格。

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。

ESLint 是一个开源的 JavaScript 代码检查工具,它是用来进行代码的校验,检测代码中潜在的问题,比如某个变量定义了未使用、函数定义的参数重复、变量名没有按规范命名等等。

中文官网:https://zh-hans.eslint.org/

英文官网:https://eslint.org/

下面是一个基本的 ESLint 配置指南,帮助你开始使用它来提升代码质量。

1.1. 安装 ESLint

首先,你需要在项目中安装 ESLint。如果你的项目是一个 Node.js 应用,通常会将其作为开发依赖安装:

npm install eslint --save-dev
// 或者使用 yarn
yarn add eslint --dev

1.2. 生成配置文件

ESLint 支持多种格式的配置文件,包括 .eslintrc.js, .eslintrc.yaml, .eslintrc.yml, .eslintrc.json, 以及直接在 package.json 中的 "eslintConfig" 字段。你可以根据需要选择合适的格式。

要生成配置文件,可以运行:

npx eslint --init

这会引导你进行一系列问题的回答,根据你的回答自动生成配置。

例如,你可以选择你的环境(浏览器、Node.js等)、想要遵循的编码规范(如 Airbnb、Google、Standard等)以及是否要支持某些语言特性(比如 Vue.js 或 React)。

1.3. 修改配置文件

生成的 .eslintrc.* 文件包含了 ESLint 的基础配置。你可以手动编辑这个文件来调整规则,添加或移除规则,或改变规则的严格程度。配置文件通常看起来像这样:

// .eslintrc.js 示例
// @see https://eslint.bootcss.com/docs/rules/module.exports = {env: {browser: true,es2021: true,node: true,jest: true,},/* 指定如何解析语法 */parser: 'vue-eslint-parser',/** 优先级低于 parse 的语法解析配置 */parserOptions: {ecmaVersion: 'latest',sourceType: 'module',parser: '@typescript-eslint/parser',jsxPragma: 'React',ecmaFeatures: {jsx: true,},},/* 继承已有的规则 */extends: ['eslint:recommended','plugin:vue/vue3-essential','plugin:@typescript-eslint/recommended','plugin:prettier/recommended',],plugins: ['vue', '@typescript-eslint'],/** "off" 或 0    ==>  关闭规则* "warn" 或 1   ==>  打开的规则作为警告(不影响代码执行)* "error" 或 2  ==>  规则作为一个错误(代码不能执行,界面报错)*/rules: {// eslint(https://eslint.bootcss.com/docs/rules/)'no-var': 'error', // 要求使用 let 或 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 (https://typescript-eslint.io/rules)'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型'@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。'@typescript-eslint/semi': 'off',// eslint-plugin-vue (https://eslint.vuejs.org/rules/)'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用'vue/no-mutating-props': 'off', // 不允许组件 prop的改变'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式},
}

1.4. 创建 .eslintignore 文件

你可以创建一个 .eslintignore 文件来指定 ESLint 应该忽略哪些文件或目录。这与 .gitignore 类似,每一行一个路径模式。

例如:

/node_modules/
/dist/
/build/

1.5. 运行 ESLint

安装并配置好后,可以在命令行中运行 ESLint 来检查你的代码:

npx eslint yourfile.js
// 或者检查整个项目
npx eslint .

1.6. 整合到编辑器/IDE

大多数现代代码编辑器(如 VSCode, WebStorm等)都支持 ESLint 插件,允许你在编写代码时实时看到 ESLint 的警告和错误,并提供快速修复选项。确保安装对应的插件并启用它。

1.7. 自动修复

ESLint 提供了一个自动修复功能,可以尝试修复一些简单的警告和错误:

npx eslint --fix yourfile.js
// 或者修复整个项目
npx eslint --fix .

package.json新增两个运行脚本

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

以上就是 ESLint 的基本配置指南。随着项目的进展,你可能需要根据团队的编码规范进一步定制配置。记得定期更新 ESLint 及其插件以获取最新的规则和支持。

更多详细内容,请微信搜索“前端爱好者戳我 查看

2. 配置prettier

有了eslint,为什么还要有prettier?

eslint针对的是javascript,他是一个检测工具,包含js语法以及少部分格式问题,在eslint看来,语法对了就能保证代码正常运行,格式问题属于其次;

而prettier属于格式化工具,它看不惯格式不统一,所以它就把eslint没干好的事接着干,另外,prettier支持包含js在内的多种语言。

总结起来,eslint和prettier这俩兄弟一个保证js代码质量,一个保证代码美观。

来到VS Code安装其对应的插件。

2.1. 安装依赖包

npm install -D eslint-plugin-prettier prettier eslint-config-prettier 
yarn add -D eslint-plugin-prettier prettier eslint-config-prettier 
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier 

同样是在src同级目录下安装.prettierrc.json文件夹

2.2. .prettierrc.json添加规则

{"printWidth": 120, "tabWidth": 2, "useTabs": false, "semi": false, "singleQuote": true,"bracketSpacing": true,"trailingComma": "all", "jsxSingleQuote": false, "arrowParens": "avoid","proseWrap": "preserve","htmlWhitespaceSensitivity": "strict", "endOfLine": "auto"
}

2.3. .prettierignore忽略文件

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

通过pnpm run lint去检测语法,如果出现不规范格式,通过pnpm run fix 修改

2.4. 保存自动格式化

想要按 Ctrl+S 保证的自动按eslint规则格式化代码的话,找到 .vscode 文件,内部新建个 setting.json 文件夹

setting.json 写入代码

{"editor.formatOnType": true,
"editor.formatOnSave": true,
"eslint.codeAction.showDocumentation": {"enable": true
},
"editor.codeActionsOnSave": {"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "javascriptreact", "html", "vue"]
}

3. eslint-config-win

此规则适用于 JavaScript/Vue 项目的 ESLint 配置规范。

目前已支持 Vue 3.0,需要指定 extends 配置vue3

https://gitee.com/braden/eslint-config-win?spm=5176.28575747.0.0.ff1f2adcn7ydP7

3.1. 安装

yarn add @winner-fed/eslint-config-win -D

3.2. 依赖版本

eslint ^7.32.0
@babel/eslint-parser ^7.15.8
vue-eslint-parser ^7.11.0
eslint-plugin-vue ^7.20.0

Tips:如果项目中没有安装此依赖包或者版本不一致,请安装或者升级。

3.3. 用法

  • 在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:
module.exports = {extends: ['@winner-fed/win',],env: {// 你的环境变量(包含多个预定义的全局变量)//// browser: true,// node: true,// mocha: true,// jest: true,// jquery: true},globals: {// 你的全局变量(设置为 false 表示它不允许被重新赋值)//// myGlobal: false},rules: {// 自定义你的规则}
};
  • 项目目录下的 package.json 添加检测指令,举个例子
{..."scripts": {
+    "lint:es": "eslint \"src/**/*.{vue,js,jsx}\" --fix",}...
}
3.3.1. Vue
npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue @winner-fed/eslint-config-win

在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:

module.exports = {extends: ['@winner-fed/win',// 这里是针对 vue2 的配置'@winner-fed/win/vue', // 如果是 vue3 的项目工程,则推荐下面配置// '@winner-fed/win/vue3',],env: {// 你的环境变量(包含多个预定义的全局变量)//// browser: true,// node: true,// mocha: true,// jest: true,// jquery: true},globals: {// 你的全局变量(设置为 false 表示它不允许被重新赋值)//// myGlobal: false},rules: {// 自定义你的规则}
};

3.4. Vue3 新增规则

rule规则描述
vue/custom-event-name-casing 自定义事件名必须用 kebab-case 风格
vue/no-arrow-functions-in-watchwatch 中禁止使用箭头函数
vue/no-custom-modifiers-on-v-model禁止自定义的 v-modal 修饰语
vue/no-deprecated-data-object-declaration 禁止在 data 中使用已废弃的对象定义
vue/no-deprecated-destroyed-lifecycle禁止使用已废弃的 destroyed 和 beforeDestroy 生命周期
vue/no-deprecated-dollar-listeners-api禁止使用已废弃的 $listeners
vue/no-deprecated-dollar-scopedslots-api 禁止使用已废弃的 $scopedSlots
vue/no-deprecated-events-api 禁止使用已废弃的 events 接口
vue/no-deprecated-filter 禁止使用已废弃的 filters 语法
vue/no-deprecated-functional-template禁止使用已废弃的 functional 模版
vue/no-deprecated-html-element-is禁止使用已废弃的 is 属性
vue/no-deprecated-inline-template禁止使用已废弃的 inline-template 属性
vue/no-deprecated-props-default-this 禁止使用已废弃的 this
vue/no-deprecated-v-bind-sync禁止在 v-bind 指令中使用已废弃的 .sync 修饰符
vue/no-deprecated-v-on-native-modifier禁止使用已废弃的 .native 修饰符
vue/no-deprecated-v-on-number-modifiers 禁止使用已废弃的数字修饰符
vue/no-deprecated-vue-config-keycodes禁止使用已废弃的 Vue.config.keyCodes
vue/no-dupe-v-else-if 禁止在 v-if 和 v-else-if 中出现重复的测试表达式
vue/no-duplicate-attr-inheritance使用 v-bind=“$attrs” 时 inheritAttrs 必须是 false
vue/no-empty-component-block禁止 <template> <script> <style> 为空
vue/no-invalid-model-keys禁止 model 中出现错误的属性
vue/no-lifecycle-after-await禁止异步注册生命周期
vue/no-lone-template 禁止出现没必要的 <template>
vue/no-multiple-objects-in-class禁止 class 中出现复数的对象
vue/no-multiple-slot-args禁止给 scoped slots 传递多个参数
vue/no-multiple-template-root 禁止模版中有多个根节点
vue/no-mutating-props 禁止修改组件的 props
vue/no-ref-as-operand 禁止直接使用由 ref 生成的变量,必须使用它的 value
vue/no-setup-props-destructure禁止对 setup 中的 props 解构
vue/no-sparse-arrays 禁止在数组中出现连续的逗号
vue/no-useless-concat 禁止没必要的字符拼接
vue/no-useless-mustaches 禁止出现无用的 mustache 字符串
vue/no-useless-v-bind 禁止出现无用的 v-bind
vue/no-v-for-template-key 禁止 template 有 v-for 属性时又有 key 属性
vue/no-v-for-template-key-on-child 禁止 template v-for 属性的子节点有 key 属性
vue/no-watch-after-await 禁止在 await 之后调用 watch
vue/one-component-per-file 一个文件必须仅包含一个组件
vue/order-in-components 组件的属性必须为一定的顺序
vue/require-explicit-emitsemits 属性必须包含 $emit() 中的值
vue/require-slots-as-functions this.$slots.default 必须被当作方法使用
vue/require-toggle-inside-transitiontransition 内部必须有条件指令
vue/return-in-emits-validatoremits 中的方法必须有返回值
vue/v-on-event-hyphenation禁止在 v-on 的事件名使用横杠
vue/valid-v-is v-is 指令必须合法

3.5. 参考

  • ESlint Code Guide
  • ESlint Shareable Config
  • eslint-config-alloy

3.6. 开发维护

  • 以测试开发驱动,config/rules/*.json 文件都是根据 test/ 文件夹对应的生成的

4. eslint配置举例

{
"rules" : {// 定义对象的set存取器属性时,强制定义get"accessor-pairs": 2,// 指定数组的元素之间要以空格隔开(,后面), never参数:[ 之前和 ] 之后不能带空格,always参数:[ 之前和 ] 之后必须带空格"array-bracket-spacing": [2, "never"],// 在块级作用域外访问块内定义的变量是否报错提示"block-scoped-var": 0,// if while function 后面的{必须与if在同一行,java风格。"brace-style": [2, "1tbs", { "allowSingleLine": true }],// 双峰驼命名格式"camelcase": 2,// 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号,// always-multiline:多行模式必须带逗号,单行模式不能带逗号"comma-dangle": [2, "never"],// 控制逗号前后的空格"comma-spacing": [2, { "before": false, "after": true }],// 控制逗号在行尾出现还是在行首出现// http://eslint.org/docs/rules/comma-style"comma-style": [2, "last"],// 圈复杂度"complexity": [2,9],// 以方括号取对象属性时,[ 后面和 ] 前面是否需要空格, 可选参数 never, always"computed-property-spacing": [2,"never"],// 强制方法必须返回值,TypeScript强类型,不配置"consistent-return": 0,// 用于指统一在回调函数中指向this的变量名,箭头函数中的this已经可以指向外层调用者,应该没卵用了// e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值,this也不能赋值给that以外的其他值"consistent-this": 0,// 强制在子类构造函数中用super()调用父类构造函数,TypeScrip的编译器也会提示"constructor-super": 0,// if else while for do后面的代码块是否需要{ }包围,参数://    multi  只有块中有多行语句时才需要{ }包围//    multi-line  只有块中有多行语句时才需要{ }包围, 但是块中的执行语句只有一行时,//                   块中的语句只能跟和if语句在同一行。if (foo) foo++; else doSomething();//    multi-or-nest 只有块中有多行语句时才需要{ }包围, 如果块中的执行语句只有一行,执行语句可以零另起一行也可以跟在if语句后面//    [2, "multi", "consistent"] 保持前后语句的{ }一致//    default: [2, "all"] 全都需要{ }包围"curly": [2, "all"],// switch语句强制default分支,也可添加 // no default 注释取消此次警告"default-case": 2,// 强制object.key 中 . 的位置,参数://      property,'.'号应与属性在同一行//      object, '.' 号应与对象名在同一行"dot-location": [2, "property"],// 强制使用.号取属性//    参数: allowKeywords:true 使用保留字做属性名时,只能使用.方式取属性//                          false 使用保留字做属性名时, 只能使用[]方式取属性 e.g [2, {"allowKeywords": false}]//           allowPattern:  当属性名匹配提供的正则表达式时,允许使用[]方式取值,否则只能用.号取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}]"dot-notation": [2, {"allowKeywords": true}],// 文件末尾强制换行"eol-last": 2,// 使用 === 替代 =="eqeqeq": [2, "allow-null"],// 方法表达式是否需要命名"func-names": 0,// 方法定义风格,参数://    declaration: 强制使用方法声明的方式,function f(){} e.g [2, "declaration"]//    expression:强制使用方法表达式的方式,var f = function() {}  e.g [2, "expression"]//    allowArrowFunctions: declaration风格中允许箭头函数。 e.g [2, "declaration", { "allowArrowFunctions": true }]"func-style": 0,"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名"no-class-assign": 2,//禁止给类赋值"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句"no-console": 2,//禁止使用console"no-const-assign": 2,//禁止修改const声明的变量"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)"no-continue": 0,//禁止使用continue"no-control-regex": 2,//禁止在正则表达式中使用控制字符"no-debugger": 2,//禁止使用debugger"no-delete-var": 2,//不能对var声明的变量使用delete操作符"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}"no-dupe-args": 2,//函数参数不能重复"no-duplicate-case": 2,//switch中的case标签不能重复"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句"no-empty": 2,//块语句中的内容不能为空"no-empty-character-class": 2,//正则表达式中的[]内容不能为空"no-empty-label": 2,//禁止使用空label"no-eq-null": 2,//禁止对null使用==或!=运算符"no-eval": 1,//禁止使用eval"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值"no-extend-native": 2,//禁止扩展native对象"no-extra-bind": 2,//禁止不必要的函数绑定"no-extra-boolean-cast": 2,//禁止不必要的bool转换"no-extra-parens": 2,//禁止非必要的括号"no-extra-semi": 2,//禁止多余的冒号"no-fallthrough": 1,//禁止switch穿透"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3."no-func-assign": 2,//禁止重复的函数声明"no-implicit-coercion": 1,//禁止隐式转换"no-implied-eval": 2,//禁止使用隐式eval"no-inline-comments": 0,//禁止行内备注"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明(变量或函数)"no-invalid-regexp": 2,//禁止无效的正则表达式"no-invalid-this": 2,//禁止无效的this,只能用在构造器,类,对象字面量"no-irregular-whitespace": 2,//不能有不规则的空格"no-iterator": 2,//禁止使用__iterator__ 属性"no-label-var": 2,//label名不能与var声明的变量名相同"no-labels": 2,//禁止标签声明"no-lone-blocks": 2,//禁止不必要的嵌套块"no-lonely-if": 2,//禁止else语句内只有if语句"no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)"no-mixed-requires": [0, false],//声明时不能混用声明类型"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格"linebreak-style": [0, "windows"],//换行风格"no-multi-spaces": 1,//不能用多余的空格"no-multi-str": 2,//字符串不能用\换行"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行"no-native-reassign": 2,//不能重写native对象"no-negated-in-lhs": 2,//in 操作符的左边不能有!"no-nested-ternary": 0,//禁止使用嵌套的三目运算"no-new": 1,//禁止在使用new构造一个实例后不赋值"no-new-func": 1,//禁止使用new Function"no-new-object": 2,//禁止使用new Object()"no-new-require": 2,//禁止使用new require"no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number"no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()"no-octal": 2,//禁止使用八进制数字"no-octal-escape": 2,//禁止使用八进制转义序列"no-param-reassign": 2,//禁止给参数重新赋值"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接"no-plusplus": 0,//禁止使用++,--"no-process-env": 0,//禁止使用process.env"no-process-exit": 0,//禁止使用process.exit()"no-proto": 2,//禁止使用__proto__属性"no-redeclare": 2,//禁止重复声明变量"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/"no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错"no-return-assign": 1,//return 语句中不能有赋值表达式"no-script-url": 0,//禁止使用javascript:void(0)"no-self-compare": 2,//不能比较自身"no-sequences": 0,//禁止使用逗号运算符"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格"no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]"no-sync": 0,//nodejs 禁止同步方法"no-ternary": 0,//禁止使用三目运算符"no-trailing-spaces": 1,//一行结束后面不要有空格"no-this-before-super": 0,//在调用super()之前不能使用this或super"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";"no-undef": 1,//不能有未定义的变量"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined"no-undefined": 2,//不能使用undefined"no-unexpected-multiline": 2,//避免多行表达式"no-underscore-dangle": 1,//标识符不能以_开头或结尾"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;"no-unreachable": 2,//不能有无法执行的代码"no-unused-expressions": 2,//禁止无用的表达式"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数"no-use-before-define": 2,//未定义前不能使用"no-useless-call": 2,//禁止不必要的call和apply"no-void": 2,//禁用void操作符"no-var": 0,//禁用var,用let和const代替"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注"no-with": 2,//禁用with"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格"arrow-parens": 0,//箭头函数用小括号括起来"arrow-spacing": 0,//=>的前/后括号"accessor-pairs": 0,//在对象中使用getter/setter"block-scoped-var": 0,//块语句中使用var"brace-style": [1, "1tbs"],//大括号风格"callback-return": 1,//避免多次调用回调什么的"camelcase": 2,//强制驼峰法命名"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号"comma-spacing": 0,//逗号前后的空格"comma-style": [2, "last"],//逗号风格,换行时在行首还是行尾"complexity": [0, 11],//循环复杂度"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的"consistent-return": 0,//return 后面是否允许省略"consistent-this": [2, "that"],//this别名"constructor-super": 0,//非派生类不能调用super,派生类必须调用super"curly": [2, "all"],//必须使用 if(){} 中的{}"default-case": 2,//switch语句最后必须有default"dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号"eol-last": 0,//文件以单一的换行符结束"eqeqeq": 2,//必须使用全等"func-names": 0,//函数表达式必须有名字"func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式"generator-star-spacing": 0,//生成器函数*的前后空格"guard-for-in": 0,//for in循环要用if语句过滤"handle-callback-err": 0,//nodejs 处理错误"id-length": 0,//变量名长度"indent": [2, 4],//缩进风格"init-declarations": 0,//声明时必须赋初值"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格"lines-around-comment": 0,//行前/行后备注"max-depth": [0, 4],//嵌套块深度"max-len": [0, 80, 4],//字符串最大长度"max-nested-callbacks": [0, 2],//回调嵌套深度"max-params": [0, 3],//函数最多只能有3个参数"max-statements": [0, 10],//函数内最多有几个声明"new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用"new-parens": 2,//new时必须加小括号"newline-after-var": 2,//变量声明后是否需要空一行"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格"object-shorthand": 0,//强制对象字面量缩写语法"one-var": 1,//连续声明"operator-assignment": [0, "always"],//赋值运算符 += -=什么的"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首"padded-blocks": 0,//块语句内行首行尾是否要空行"prefer-const": 0,//首选const"prefer-spread": 0,//首选展开运算"prefer-reflect": 0,//首选Reflect的方法"quotes": [1, "single"],//引号类型 `` "" ''"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号"radix": 2,//parseInt必须指定第二个参数"id-match": 0,//命名检测"require-yield": 0,//生成器函数必须有yield"semi": [2, "always"],//语句强制分号结尾"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格"sort-vars": 0,//变量声明时排序"space-after-keywords": [0, "always"],//关键字后面是否要空一格"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格"space-in-parens": [0, "never"],//小括号里面要不要有空格"space-infix-ops": 0,//中缀操作符周围要不要有空格"space-return-throw-case": 2,//return throw case后面要不要加空格"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格"spaced-comment": 0,//注释风格不要有空格什么的"strict": 2,//使用严格模式"use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()"valid-jsdoc": 0,//jsdoc规则"valid-typeof": 2,//必须使用合法的typeof的值"vars-on-top": 2,//var必须放在作用域顶部"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格"wrap-regex": 0,//正则表达式字面量用小括号包起来"yoda": [2, "never"]//禁止尤达条件}
}
module.exports = {root: true,parserOptions: {parser: 'babel-eslint',sourceType: 'module'},env: {browser: true,node: true,es6: true,},extends: ['plugin:vue/recommended', 'eslint:recommended'],// add your custom rules here//it is base on https://github.com/vuejs/eslint-config-vuerules: {// 强制"for"循环中更新子句的计算器朝着正确的方向移动'for-direction': 0,// 禁止function定义中出现重名参数'no-dupe-args': 2,// 禁止对象字面量中出现重复的key'no-dupe-keys': 2,// 禁止出现重复的case标签'no-duplicate-case': 2,// 禁止对catch子句的参数重新赋值'no-ex-assign': 2,// 禁止对关系运算符的左操作数使用否定操作符'no-unsafe-negation': 2,// 禁止出现令人困惑的多行表达式'no-unexpected-multiline': 2,// 禁止在return、throw、continue、break语句之后出现不可达代码'no-unreachable': 2,// 禁止在finally语句块中出现控制流语句'no-unsafe-finally': 2,// 要求使用isNaN()检查NaN'use-isnan': 2,// 强制typeof表达式与有效的字符串进行比较'valid-typeof': 2,// 还可以写表达式,厉害了~'no-debugger': process.env.NODE_ENV === 'production' ? 'error': 'off','no-console': process.env.NODE_ENV === 'production' ? 'error': 'off',/*** 【================================================ Best Practices ================================================】* 这些规则是关于最佳实践的,帮助你避免一些问题。*/// 强制 getter 和 setter在对象中成对出现'accessor-pairs': 2,// 强制所有控制语句使用一致的括号风格'curly': [2, 'multi-line'],// 强制在点号之前和之后一致的换行'dot-location': [2, 'property'],// 要求使用 ===和 !=='eqeqeq': [2, 'allow-null'],// 禁用arguments.caller 或 arguments.callee'no-caller': 2,// 禁止使用空解构模式'no-empty-pattern': 2,// 禁止eval()'no-eval': 2,// 禁止使用类似eval()的方法'no-implied-eval': 2,// 禁止扩展原生类型'no-extend-native': 2,// 禁止不必要的.bind()调用'no-extra-bind': 2,// 禁止case语句落空'no-fallthrough': 2,// 禁止数字字面量中使用前导和末尾小数点'no-floating-decimal': 2,// 禁用__iterator__属性'no-iterator': 2,// 禁用标签语句'no-labels': [2, {'allowLoop'  : false,'allowSwitch': false}],// 禁用不必要嵌套块'no-lone-blocks': 2,// 禁止使用多个空格'no-multi-spaces': 2,// 禁止使用多行字符串'no-multi-str': 2,// 禁止对String,Number 和 Boolean 使用new操作符'no-new-wrappers': 2,// 禁用八进制字面量'no-octal': 2,// 禁止在字符串中使用八进制转义序列'no-octal-escape': 2,// 禁止使用__proto__属性'no-proto': 2,// 禁止多次声明同一变量'no-redeclare': 2,// 禁止在return语句中使用赋值语句'no-return-assign': [2, 'except-parens'],// 禁止自我赋值'no-self-assign': 2,// 禁止自我比较'no-self-compare': 2,// 禁用逗号操作符'no-sequences': 2,// 禁止抛出异常字面量'no-throw-literal': 2,// 禁止一成不变的循环条件'no-unmodified-loop-condition': 2,// 禁止不必要的.call()和.apply()'no-useless-call': 2,// 禁止不必要的转义字符'no-useless-escape': 2,// 禁用with语句'no-with': 2,// 要求IIFE使用括号括起来'wrap-iife': 2,// 要求或禁止Yoda条件。 if("red" === color) { //字面量在前,变量在后 }'yoda': [2, 'never'],   //  比较绝不能是Yoda条件(需要变量在前,字面量在后)/*** 【================================================ ECMAScript 6 ================================================】* 这些规则只与ES6有关,即通常所说的ES2015。*/// 强制箭头函数前后使用一致的空格'arrow-spacing': [2, {'before': true,'after' : true}],// 要求在构造函数中有super()调用'constructor-super': 2,// 强制generator函数中*号周围使用一致的空格'generator-star-spacing': [2, {'before': true,'after' : true}],// 禁止修改类声明的变量'no-class-assign': 2,// 禁止修改const声明的变量'no-const-assign': 2,// 禁止类成员中出现重复的名称'no-dupe-class-members': 2,// 禁止 Symbolnew 操作符和 new 一起使用'no-new-symbol': 2,// 禁止在构造函数中,在调用super()之前使用 this 或 super'no-this-before-super': 2,// 禁止在对象中使用不必要的计算属性'no-useless-computed-key': 2,// 禁止不必要的构造函数'no-useless-constructor': 2,// 禁止模板字符串中嵌入表达式周围空格的使用'template-curly-spacing': [2, 'never'],// 强制yield*表达式中的*周围使用空格'yield-star-spacing': [2, 'both'],// 要求使用const声明那些声明后不再被修改的变量'prefer-const': 2,/*** 【================================================ Stylistic Issues ================================================】* 这些规则是关于代码风格的。*/// //  获取当前执行环境的上下文时,强制使用一致的命名(此处强制使用 'that')。// 'consistent-this': [2, 'that'],// // 禁止或强制在代码块中开括号前和闭括号后有空格  { return 11 }// 'block-spacing': [2, 'always'],// // 强制在代码块中使用一致的大括号风格// 'brace-style': [2, '1tbs', {//   'allowSingleLine': true// }],// // 强制使用驼峰拼写法命名规定// 'camelcase': [0, {//   'properties': 'always'// }],// // 要求或禁止末尾逗号// 'comma-dangle': [2, 'never'],// // 强制在逗号前后使用一致的空格// 'comma-spacing': [2, {//   'before': false,//   'after' : true// }],// // 强制在逗号前后使用一致的空格// 'comma-style': [2, 'last'],// // 要求或禁止文件末尾存在空行// 'eol-last': 2,// // 强制使用一致的缩进// 'indent': [2, 2, {//   'SwitchCase': 1// }],// // 强制在JSX属性中一致地使用双引号或单引号// 'jsx-quotes': [2, 'prefer-single'],// // 要求构造函数首字母大写// 'new-cap': [2, {//   'newIsCap': true,//   'capIsNew': false// }],// // 要求构造无参构造函数时有圆括号// 'new-parens': 2,// // 禁用Array构造函数// 'no-array-constructor': 2,// // 禁止空格和tab的混合缩进// 'no-mixed-spaces-and-tabs': 2,// // 禁止出现多行空行// 'no-multiple-empty-lines': [2, {//   // 最大连续空行数//   max: 2// }],// // 禁止在函数标识符和其调用之间有空格// 'func-call-spacing': 2,// // 禁止行尾空格// 'no-trailing-spaces': 2,// // 禁止可以在有更简单的可替代的表达式时使用三元操作符// 'no-unneeded-ternary': [2, {//   // 允许表达式作为默认的赋值模式//   'defaultAssignment': true// }],// // 禁止属性前有空白// 'no-whitespace-before-property': 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(自动分号插入)// 'semi': ["error", "always"],// // 强制分号之前和之后使用一致的空格// 'semi-spacing': [2, {//   'before': false,//   'after' : true// }],// // 强制在块之前使用一致的空格// 'space-before-blocks': [2, 'always'],// // 强制在圆括号内使用一致的空格// 'space-in-parens': [2, 'never'],// // 要求操作符周围有空格// 'space-infix-ops': 2,// // 强制在一元操作符前后使用一致的空格// 'space-unary-ops': [2, {//   'words'   : true,//   'nonwords': false// }],// // 强制在注释// 或/*使用一致的空格// 'spaced-comment': [1, 'always', {//   'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']// }],// // 强制在大括号中使用一致的空格// 'object-curly-spacing': [2, 'always', {//   'objectsInObjects': false// }],// // 禁止或强制在括号内使用空格// 'array-bracket-spacing': [2, 'never'],// // 强制要求在对象字面量的属性中键和值之间使用一致的间距// 'key-spacing': [2, {//   'beforeColon': false,//   'afterColon' : true// }],/*** 【================================================ Node.js and CommonJS ================================================】* 这些规则是关于Node.js 或 在浏览器中使用CommonJS的。*/// 要求回调函数中有容错处理'handle-callback-err': [2, '^(err|error)$'],// 禁止调用 require 时使用new操作符'no-new-require': 2,// 禁止对__dirname和__filename进行字符串连接'no-path-concat': 1,// 强制在function的左括号之前使用一致的空格'space-before-function-paren': [2, 'never'],/*** 【================================================ Possible Errors ================================================】* 这些规则与JavaScript代码中可能的错误或逻辑错误有关。*/// 禁止条件表达式中出现赋值操作符'no-cond-assign': 2,// 禁止在正则表达式中使用控制字符'no-control-regex': 0,// 禁止在正则表达式中使用空字符集'no-empty-character-class': 2,// 禁止不必要的布尔转换'no-extra-boolean-cast': 2,// 禁止不必要的括号'no-extra-parens': [2, 'functions'],// 禁止对function声明重新赋值'no-func-assign': 2,// 禁止在嵌套块中出现变量声明或function声明'no-inner-declarations': [2, 'functions'],// 禁止RegExp构造函数中存在无效的正则表达式字符串'no-invalid-regexp': 2,// 禁止在字符串和注释之外不规则的空白'no-irregular-whitespace': 2,// 禁止把全局对象作为函数调用'no-obj-calls': 2,// 禁止正则表达式字面量中出现多个空格'no-regex-spaces': 2,// 禁用稀疏数组'no-sparse-arrays': 2,/*** 【================================================ Variables ================================================】* 这些规则与变量声明有关。*/// 禁止删除变量'no-delete-var': 2,// 不允许标签与变量同名'no-label-var': 2,// 禁止将标识符定义为受限的名字'no-shadow-restricted-names': 2,// 禁止未声明的变量,除非它们在/*global */注释中被提到'no-undef': 2,// 禁止将变量初始化为undefined'no-undef-init': 2,// 禁止出现未使用的变量'no-unused-vars': [2, {'var' : 'all','args': 'none'}],/*** 【================================================ 配置定义在插件中的规则 ================================================】* 格式: 插件名/规则ID*///'vue/no-parsing-error': ["off"]}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/24978.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习中2D分割

深度学习中的2D图像分割 2D图像分割是深度学习中的一个重要任务&#xff0c;旨在将图像划分为不同的区域&#xff0c;每个区域对应于图像中的不同对象或背景。该任务广泛应用于医学影像分析、自动驾驶、卫星图像分析等领域。以下是对深度学习中2D图像分割的详细介绍&#xff0…

实战 | 通过微调SegFormer改进车道检测效果(数据集 + 源码)

背景介绍 SegFormer&#xff1a;实例分割在自动驾驶汽车技术的快速发展中发挥了关键作用。对于任何在道路上行驶的车辆来说&#xff0c;车道检测都是必不可少的。车道是道路上的标记&#xff0c;有助于区分道路上可行驶区域和不可行驶区域。车道检测算法有很多种&#xff0c;每…

vue2实现将el-table表格数据导出为长图片

方法一、 el-table数据导出为长图片 将el-table数据导出为图片不是一个直接的功能&#xff0c;但可以通过以下步骤实现&#xff1a; 使用html2canvas库将表格区域转换为画布(canvas)。 使用canvas的toDataURL方法将画布导出为图片格式&#xff08;例如PNG&#xff09;。 创建…

数据结构--实验

话不多说&#xff0c;直接启动&#xff01;&#x1f44c;&#x1f923; 目录 一、线性表&#x1f60e; 1、建立链表 2、插入元素 3、删除特定位置的元素 4、输出特定元素值的位置 5、输出特定位置的元素值 6、输出整个链表 实现 二、栈和队列&#x1f618; 栈 顺序栈 …

Mybatis缓存的生命周期、使用的特殊情况

以下场景均在Spring Boot程序中&#xff0c;并非手动创建SqlSession使用。 在回答这个问题之前&#xff0c;我们先来回顾一下&#xff0c;Mybatis的一级二级缓存是啥。 一级二级缓存 是什么 一级缓存&#xff08;本地缓存&#xff09;&#xff1a;一级缓存是SqlSession级别的…

将web项目打包成electron桌面端教程(一)vue3+vite+js

说明&#xff1a;后续项目需要web端和桌面端&#xff0c;为了提高开发效率&#xff0c;准备直接将web端的代码打包成桌面端&#xff0c;在此提前记录一下demo打包的过程&#xff0c;需要注意的是vue2或者vue3的打包方式各不同&#xff0c;如果你的项目不是vue3vitejs&#xff0…

数字孪生技术体系和核心能力整理

最近对数字孪生技术进行了跟踪调研学习,整理形成了调研成果,供大家参考。通过学习,发现数字孪生技术的构建过程其实就是数字孪生体的构建与应用过程,数字孪生体的构建是一个体系化的系统工程,数字化转型的最终形态应该就是数实融合互动互联的终极状态。数实融合是每个行业…

MSA算法满足条件后续之Blum定理

文章目录 引言Blum定理关于MSA算法的讨论 此文章属于文献研读内容&#xff0c;文章内容来源于以下文献 Warren B. Powell, Yosef Sheffi , (1982) The Convergence of Equilibrium Algorithms with Predetermined Step Sizes. Transportation Science ,16(1):45-55. http://dx.…

赶紧收藏!2024 年最常见 20道分布式、微服务面试题(三)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道分布式、微服务面试题&#xff08;二&#xff09;-CSDN博客 五、微服务架构有哪些优点和缺点&#xff1f; 微服务架构是一种设计方法&#xff0c;它将应用程序分解为一组小型、独立、松散耦合的服务。每个服务都…

[每周一更]-(第100期):介绍 goctl自动生成代码

​ 在自己组件库中&#xff0c;由于部分设计会存在重复引用各个模板的文件&#xff0c;并且基础架构中需要基础模块内容&#xff0c;就想到自动生成代码模板&#xff0c;刚好之前有使用过goctl&#xff0c;以下就简单描述下gozero中goctl场景和逻辑&#xff0c;后续自己借鉴将自…

英语学习笔记32——What‘s he/she/it doing?

What’s he/she/it doing? 他/她/它 正在做什么&#xff1f; 词汇 Vocabulary type /taɪp/ v. 打字 n. 类型&#xff0c;签字 ing形式&#xff1a;typeing 用法&#xff1a;this type of …    这种类型的…… 例句&#xff1a;我喜欢这种苹果。    I like this type…

java自学阶段二:JavaWeb开发--day80(项目实战2之苍穹外卖)

《项目案例—黑马苍穹外卖》 目录&#xff1a; 学习目标项目介绍前端环境搭建(前期直接导入老师的项目&#xff0c;后期自己敲&#xff09;后端环境搭建&#xff08;导入初始项目&#xff0c;新建仓库使用git管理项目&#xff0c;新建数据库&#xff0c;修改登录功能&#xff…

btstack协议栈---总目录

章节文章标题文章链接1.基础篇1.BLE协议栈全解一篇就够点击我2.实战篇1.Hello World example点击我2.

面试专区|【53道Java基础高频题整理(附答案背诵版)】

Java为什么被称为平台无关性语言&#xff1f; Java被称为平台无关性语言&#xff0c;是因为一旦Java代码被编译成字节码&#xff0c;这些字节码就可以在任何安装了Java虚拟机&#xff08;JVM&#xff09;的设备上运行&#xff0c;无论这个设备使用的是什么操作系统。这就是“一…

[office] 如何在Excel中拉动单元格时表头不变形- #学习方法#职场发展#经验分享

如何在Excel中拉动单元格时表头不变形? 如何在Excel中拉动单元格时表头不变形&#xff1f;Excel是我们常用的办公软件&#xff0c;当我们使用Excel拉动单元格时表头不变形&#xff0c;该如何操作呢&#xff0c;下面小编就为大家做详细讲解 如何在Excel中拉动单元格时表头不变…

用户输入表格数据设计(XPTable控件使用说明九)

XP Table控件可以编辑数据&#xff0c;程序也可以使用编辑后的数据&#xff0c;但是程序新建时又从初始化数据到模型到显示&#xff0c;这两步有点绕&#xff0c;做了一个实例来说明这块内容。 流程1&#xff1a;初始化数据--> model--> UI show 流程2&#xff1a;UI--…

skywalking基础使用

skywalking基础使用 找链路追踪Id将链路追踪Id拿到skywalking-ui中筛选对应链路补充说明例如, sql的打印能让我们了解到代码中对应的sql是否符合预期 找链路追踪Id 在接口响应header中复制x-trace-id 这个接口响应正常了, 异常没有暴露到前端, 且调用链路很长, 但我们借助s…

【讲解下ECMAScript和JavaScript之间有何区别?】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

QUIC 的多路径扩展

QUIC 的多路径扩展 抽象 本文档指定了 QUIC 协议的多路径扩展&#xff0c;以支持同时使用单个连接的多个路径。 讨论场地 在作为 RFC 发布之前&#xff0c;应删除此注释。 对本文档的讨论在 QUIC 工作组邮件列表 &#xff08;quicietf.org&#xff09;&#xff0c; 存档于…

第1章 起步

第1章 起步 1.1搭建编程环境1.2 在不同操作系统中搭建 Python 编程环境1.3 运行Hello world 程序1.4 解决安装问题1.5 从终端运行 Python 程序 1.1搭建编程环境 1.1.1 Python 版本 本书编写期间的最新版本为 Python 3.7 1.1.2 运行 Python 代码片段 Python 自带一个在终端窗口…