当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vsCode中使用ESLint配置全过程

vsCode中使用ESLint配置全过程

2020年07月14日  | 移动技术网IT编程  | 我要评论

在 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规则修复。

ESLint规则

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

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

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

本文地址：https://blog.csdn.net/qq_42784165/article/details/107294974

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网