在 vue项目中使用vscode编辑时为了开发的代码统一,采用了ESLint如果代码没有按照规则格式化的话那么就将报错,接下来将详细的讲下配置全过程:

前提条件

安装ESLint,我这里就重整个Vue项目的下载开始操作

vue init webpack eslint_dome_vue //创建项目

在这里插入图片描述
在创建项目时可直接开启,ESLint配置。项目创建开之后会在目录下生成 .eslintrc.js 文件,这是用来今后配置规则之处。

配置vsCode令代码可修复

在vscode商城中下载ESLint插件
在这里插入图片描述
配置vscode路径:文件 -> 首选项 -> 设置
在这里插入图片描述
在设置中分为用户工作区,区别在于在用户中的配置的对改用户的所有项目都有效,工作区的是针对指定项目。这里我们开启用户的setting.json文件添加以下代码开启保存自动修复即可(添加在对象第一层)。添加代码如下:

  //eslint 代码自动检查相关配置
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascriptreact",
        "vue",
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        {
            "language": "html",
            "autoFix": true
        }
    ],

保存之后重启vsCode,随后就可实现代码跟随ESLint规则修复!如果出现重启vsCode后没有实现跟随ESLint规则修复,那么一定要检查下如下开关是否开启:
在这里插入图片描述

ESLint规则

  • “off” or 0 - 关闭规则
  • “warn” or 1 - 将规则视为一个警告(不会影响退出码)
  • “error” or 2 - 将规则视为一个错误 (退出码为1)

尝试在规则中添加'no-debugger': 1,意味着不允许使用debugger
在这里插入图片描述
则会出现报错警告:
在这里插入图片描述
还有其他一些规则可以去看ESLint文档,这里就不一一描述了。

以上就是我对ESLint的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐