vue项目中ESLint配置

ESlint 被设计为完全可配置的，这意味着你可以关闭每一个规则而只运行基本语法验证，或混合和匹配 ESLint 默认绑定的规则和你的自定义规则，以让 ESLint 更适合你的项目。

嘴巴嘟嘟

6266人浏览 · 2022-07-26 20:48:42

嘴巴嘟嘟 · 2022-07-26 20:48:42 发布

1.Eslint是用来干嘛的

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
在这里插入图片描述

2.为什么要使用Eslint

ESLint 是一个开源的 JavaScript 代码检查工具,。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
代码千万行，安全第一行；前端不规范，同事两行泪

统一团队编码规范（命名，众多格式等）
统一语法，毕竟es版本已经不少了(var/let…)
减少git不必要的提交（如果文件格式不一样，也会被git提交的）
避免低级错误在编译时检查语法，而不是等JS引擎运行时才检查

3.手动下载配置(原理)

3.1 创建项目
创建一个测试文件夹：eslint_test
初始化项目：npm init -y (创建 package.json)
3.2 ESLint安装
直接在项目中安装eslint包 npm i eslint -D
注意安装结果：node_moduels 中下载了很多包

.bin/eslint.cmd 脚本文件，内部通过 nodejs 执行 eslint运行包的代码
@eslint包用来规范eslint配置文件
eslint开头的包是 eslint运行包，包含eslint代码

3.3 生成ESLint配置文件
使用 npx 来执行 (推荐)：npx eslint --init

执行结果

3.6 ESLint执行
命令：npx eslint ./需要检查语法的文件路径
如果违法规范，会将错误提示到终端，说明 eslint 工作正常

在这里插入图片描述

4.ESLint配置文件入门

在这里插入图片描述
4.1 env节点

"env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
}

由于 ESLint 的各种规范中，一般都不允许使用未在页面内声明的成员，所以告诉eslint，当前代码运行在那些环境中。
4.2 globals节点

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

 "globals": {
  "_": true  // 可以读取，可以修改
  "$": false // 可以读取，不能修改
 }

可以使用 globals 节点来手动配置全局成员
4.3 extends 节点
通过这个节点可以配置使用内置规范还是第三方规范

"extends": [
  "standard" // "eslint-config-standard"
 ]

注意：配置 extends时，可以省略 eslint-config-，直接写成 standard
4.4 parserOptions 节点
ESLint 解析器解析代码时，可以指定用哪个 js 的版本

 "parserOptions": {
  "ecmaVersion": 12
 }

注意：这里是指定检查时按照哪个js版本语法检查，但这里不包含全局变量
4.5 rules 节点

 "rules": {
 }

两种用法：

不使用 extend 节点配置整套的规范，而是在 rules节点中直接配置
使用 extend 节点配置整套的规范，在 rules节点中修改部分规范的配置

5.ESLint检查语法的规则

5.1 ESLint语法规范本质
本质就是函数
我们可以通过看 ESLint 源码查看：

eslint 内置285个规则，每条规则都是一个 create函数
在进行语法检查时，会将代码转成另一种

6. 语法规范包类型

a. ESLint内置规范包：eslint-all / eslint-recommended

b. 标准规范包：eslint-config-standard

c. 第三方规范包(google/airbnb/facebook…)

6.1 内置规范包

已经随eslint一起下载：
eslint-all：使用全部280多个规则
eslint-recommended：只使用推荐的60个规则

6.2 标准规范包(需要下载)
包名：eslint-config-standard也使用了200多个规则
手动下载：
a. 查看需要下载的包和版本 npm info "eslint-config-airbnb-base@latest" peerDependencies
b.下载相关包 npx install-peerdeps --dev eslint-config-airbnb-base

7. 配置规范包

7.1 修改 eslint 配置文件

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    // "extends": "eslint:all", // 内置：所有规则
    // "extends": "eslint:recommended", // 内置：推荐规则
    "extends": "eslint-config-standard", // 第三方：标准规则
    // "extends": "eslint-config-airbnb-base", // 第三方：airbnb公司规则
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
    }
};

7.2 运行ESLint
注意：ESLint 默认只检查 js 文件代码，如果想检查 vue 或 react文件，需要装其它插件包

npx eslint ./index.js // 检查 目标文件
npx eslint ./src // 检查 目标文件夹 中所有js文件

7.3 测试不同包检查相同代码
一段相同代码
在这里插入图片描述

注意：自己平时写代码还是要开启严格模式，要是去公司还得按照公司规范书写。

下面是我个人在项目中经常使用配置：
package.json

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "^5.0.0",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-plugin-vuex": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.22.0",
    "eslint-config-tpconfig": "^0.3.3",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-vue": "^7.7.0"
  },

.eslintrc.js

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
    },
    env: {
        browser: true,
        node: true,
        es6: true,
        jquery: true
    },
    extends: ['plugin:vue/recommended', 'eslint:recommended'],
    rules: {
        'vue/no-mutating-props': 0, // 先不管对props的修改
        'vue/max-attributes-per-line': [
            2,
            {
                singleline: 20,
                multiline: {
                    max: 10,
                    allowFirstLine: false
                }
            }
        ],
        'vue/singleline-html-element-content-newline': 'off',
        'vue/html-self-closing': [
            'error',
            {
                html: {
                    void: 'always',
                    normal: 'never',
                    component: 'never'
                },
                svg: 'any',
                math: 'any'
            }
        ],
        'vue/multiline-html-element-content-newline': 'off',
        'vue/name-property-casing': ['error', 'PascalCase'],
        'vue/no-v-html': 'off',
        'vue/html-indent': ['error', 4, { baseIndent: 1 }],
        'vue/script-indent': ['error', 4, { baseIndent: 0 }],
        'accessor-pairs': 2,
        'arrow-spacing': [
            2,
            {
                before: true,
                after: true
            }
        ],
        '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'],
        'constructor-super': 2,
        curly: [2, 'multi-line'],
        'dot-location': [2, 'property'],
        'eol-last': 2,
        eqeqeq: ['error', 'always', { null: 'ignore' }],
        'generator-star-spacing': [
            2,
            {
                before: true,
                after: true
            }
        ],
        'handle-callback-err': [2, '^(err|error)$'],
        'jsx-quotes': [2, 'prefer-single'],
        'key-spacing': [
            2,
            {
                beforeColon: false,
                afterColon: true
            }
        ],
        'keyword-spacing': [
            2,
            {
                before: true,
                after: true
            }
        ],
        'new-cap': [
            2,
            {
                newIsCap: true,
                capIsNew: false
            }
        ],
        'new-parens': 2,
        'no-array-constructor': 2,
        'no-caller': 2,
        'no-class-assign': 2,
        'no-cond-assign': 2,
        'no-const-assign': 2,
        'no-control-regex': 0,
        '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,
        // 'no-eval': 2,
        'no-ex-assign': 2,
        'no-extend-native': 2,
        'no-extra-bind': 2,
        'no-extra-boolean-cast': 2,
        'no-extra-parens': [2, 'functions'],
        'no-fallthrough': 2,
        'no-floating-decimal': 2,
        'no-func-assign': 2,
        'no-implied-eval': 2,
        'no-inner-declarations': [2, 'functions'],
        'no-invalid-regexp': 2,
        'no-irregular-whitespace': 2,
        '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-native-reassign': 2,
        'no-negated-in-lhs': 2,
        'no-new-object': 2,
        'no-new-require': 2,
        'no-new-symbol': 2,
        'no-new-wrappers': 2,
        'no-obj-calls': 2,
        'no-octal': 2,
        'no-octal-escape': 2,
        'no-path-concat': 2,
        'no-proto': 2,
        'no-redeclare': 2,
        'no-regex-spaces': 2,
        'no-return-assign': [2, 'except-parens'],
        'no-self-assign': 2,
        'no-self-compare': 2,
        'no-sequences': 2,
        'no-shadow-restricted-names': 2,
        'no-spaced-func': 2,
        'no-sparse-arrays': 2,
        'no-this-before-super': 2,
        'no-throw-literal': 2,
        'no-trailing-spaces': 2,
        'no-undef': 2,
        'no-undef-init': 2,
        'no-unexpected-multiline': 2,
        'no-unmodified-loop-condition': 2,
        'no-unneeded-ternary': [
            2,
            {
                defaultAssignment: false
            }
        ],
        'no-unreachable': 2,
        'no-unsafe-finally': 2,
        'no-unused-vars': [
            2,
            {
                vars: 'all',
                args: 'none'
            }
        ],
        'no-useless-call': 2,
        'no-useless-computed-key': 2,
        'no-useless-constructor': 2,
        'no-useless-escape': 0,
        'no-whitespace-before-property': 2,
        '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
            }
        ],
        semi: [2, 'always'],
        'semi-spacing': [
            2,
            {
                before: false,
                after: true
            }
        ],
        'space-before-blocks': [2, 'always'],
        'space-before-function-paren': [2, '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'],
        'use-isnan': 2,
        'valid-typeof': 2,
        'wrap-iife': [2, 'any'],
        'yield-star-spacing': [2, 'both'],
        yoda: [2, 'never'],
        'prefer-const': 2,
        'object-curly-spacing': [
            2,
            'always',
            {
                objectsInObjects: false
            }
        ],
        'array-bracket-spacing': [2, 'never'],
        strict: 2, // 使用严格模式
        'max-statements': [2, 50, { ignoreTopLevelFunctions: true }],
        'no-console': process.env.NODE_ENV === 'production' ? 0 : 0,
        'no-debugger': process.env.NODE_ENV === 'production' ? 0 : 0
    },
    globals: { _: true, Base64: true, axios: true, BMap: true }
};

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

嘴巴嘟嘟

@qq_41961239

已为社区贡献10条内容