ESLint 工具

2023-10-31

ESLint 可组装的 javaScript 和 JSX 检查工具。规范代码风格

官网:ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档

VSCode 自动格式化代码

 

ESLint安装

① 项目创建时 配置 ESLint

 

 

 ② 配置 .eslintrc.js  配置文件

 

  • "off"或者0    //关闭规则关闭
  • "warn"或者1    //在打开的规则作为警告(不影响退出代码)
  • "error"或者2    //把规则作为一个错误(退出代码触发时为1)

ESLint规则:List of available rules - ESLint中文文档

 

③ 配置VSCode 插件

ESLint插件:自动格式化代码

 Prettier - Code formatter插件:格式化文档

 setting.json 配置

{
    "editor.fontSize": 17, //编辑器字体大小
    "[scss]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
    }, //scss格式化工具
    "workbench.iconTheme": "vscode-icons", //vscode文件图标主题
    //"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", //默认终端shell
    "go.formatTool": "goimports", //golang格式化工具
    "editor.defaultFormatter": "esbenp.prettier-vscode", //编辑器格式化工具
    "[javascript]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    }, //javascript格式化工具
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }, //vue格式化工具
    "editor.insertSpaces": false,
    "workbench.editor.enablePreview": false, //打开文件不覆盖
    "search.followSymlinks": false, //关闭rg.exe进程
    "editor.minimap.enabled": false, //关闭快速预览
    "files.autoSave": "afterDelay", //编辑自动保存
    "editor.lineNumbers": "on", //开启行数提示
    "editor.quickSuggestions": {
        //开启自动显示建议
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.tabSize": 2, //制表符符号eslint
    "editor.formatOnSave": true, //每次保存自动格式化
    "eslint.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
    "prettier.semi": true, //去掉代码结尾的分号
    "prettier.singleQuote": false, //使用单引号替代双引号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //属性强制折行对齐
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        },
        "vscode-typescript": {
            "semi": false,
            "singleQuote": true
        }
    },
    "eslint.validate": [
        "vue",
        // "javascript",
        "typescript",
        "typescriptreact",
        "html"
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 导入文件时是否携带文件的拓展名
    "path-autocomplete.extensionOnImport": true,
    // 配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@": "${folder}/src"
    },
    "workbench.colorTheme": "Default Dark+",
    "powermode.enabled": true,
    "liveServer.settings.CustomBrowser": "chrome",
    "powermode.combo.threshold": 1,
    "powermode.shake.enabled": false,
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ESLint 工具 的相关文章

随机推荐

  • 华为OD机试 - 计算误码率(Java)

    题目描述 误码率是最常用的数据通信传输质量指标 它可以理解为 在多少位数据中出现一位差错 移动通信网络中的误码率主要是指比特误码率 其计算公式如下 比特误码率 错误比特数 传输总比特数 为了简单 我们使用字符串来标识通信的信息 一个字符错误
  • 解决libtorch安装编译链接时出错

    cmake build config Release Scanning dependencies of target example app 50 Building CXX object CMakeFiles example app dir
  • SQL注入漏洞(postgresql注入)

    以前孤陋寡闻对postgresql这个数据库少有了解 后来与几个目前在企业实习的朋友聊天才得知他们有的公司项目用的是postgresql 有的公司是正在将原本的数据库迁移到postgresql 可见postgresql比较热 毕竟免费且功能
  • idea:idea自定义注释模板自动生成方法注释

    idea的类注释 可以通过自己添加模板的方式来生成 在Live Templates里 添加一个分组MyGroup 下面添加一组数据 如下图 Abbreviation为 Expand with选择tab 我个人喜换用tab 主要是跟系统的回车
  • uni-app使用scroll-view实现锚点定位和滚动监听功能

    1 html代码
  • ubuntu实现有线连接拨号上网(本文使用版本ubuntu18.04 )

    1 第一步 cd usr share applications 找到下面的应用 上图中的 NetworkConnections 双击打开 如果没有的话 命令运行 sudo apt install net tools 之后就有了 2 选择以太
  • maven本地仓库jar注册

    mvn install install file Dfile name 包名称 jar DgroupId groupId DartifactId artifactId Dversion version Dpackaging jar 例
  • 《网络建设与运维》大赛试题解析

    网络建设与运维 大赛试题解析资源 CSDN文库 https download csdn net download weixin 41687096 87799021
  • Spring 中AspectJ框架简介说明

    转自 Spring 中AspectJ框架简介说明 在以前的章节中 我们学习了使用代理类实现AOP Spring 2 0 以后 Spring 新增了对 AspectJ 的支持 所以笔者建议大家在Spring 框架中 尽量使用AspectJ方式
  • 2.4总线操作和定时

    文章目录 一 引子 二 介绍 1 总线周期 2 总线定时规范 三 同步定时方式 1 过程 2 特点 3 优缺点 优点 缺点 四 异步定时方式 1 介绍 2 三种方式 1 不互锁方式 2 半互锁方式 3 全互锁方式 3 优缺点 优点 缺点 五
  • 《操作系统》 实验1_unix——io参考

    任务1 在当前用户目录下创建数据文件student txt 文件的内部信息存储格式为Sname S Sdept Sage Ssex 即 姓名 学号 学院 年龄 性别 每行一条记录 输入不少于10条学生记录 其中包括学生本人记录 编写程序ta
  • vscode 输入 npm install 报错: node-sass@8.0.0 install: `node scripts/install.js`

    1 报错信息描述 报错的原因及解决方案 自身入的坑 第一种 看一下这里是否有中文目录 有的话有可能会报错 第二种 管理员身份运行vscode 第三种 node sass版本问题 解决版本问题方案 1 报错信息描述 当我们在vscode中输入
  • 【计算机视觉

    文章目录 一 Co Scale Conv attentional Image Transformer CoaT 二 Pyramid Vision Transformer v2 PVTv2 三 Class Attention in Image
  • android studio编程时出现的错误:Cannot get property 'XXXX' on extra properties extension as it does not exist

    用Android Studio中导入第三方库工程的时候出现的问题 Error 28 0 Cannot get property junitVersion on extra properties extension as it does no
  • springAop实现事务管理控制

    Aop简要概述 Aop面向切面编程 可以实现代码的解耦合 提高代码的复用性 1 切面 切面的意思通俗的意思就是切入的代码 比如开启事务方法的代码 提交事务的代码 2 切入点 需要切入代码的地方 比如待执行代码的前 或者后 3 连接点 满足规
  • keil的错误: Error: Encountered an improper argument 的2019.6.22最新解决方法

    keil的错误 Error Encountered an improper argument 的解决方法 什么都不要改动 最正确的办法是重新破解
  • QT信号与槽连接(松耦合)

    GUI用户界面中 当用户操作一个窗口部件时 需要其他窗口部件响应 传统方式经常使用callback 回调机制 来实现 所谓回调即事先将函数指针作为参数传递另一个函数 然后在函数处理过程中适当地方调用回调函数回调机制有两个缺陷 类型不安全 不
  • 传感器学习——旋转编码器

    旋转编码器是将旋转机械位移量转换为电器信号 对该信号进行处理后检测位置 速度等的传感器 旋转编码器可分为 增量式 编码器和 绝对值 式编码器 1 增量式编码器 旋转盘转动时 光敏二极管断续收到发光二极管发出的光 从而输出方波 增量式编码器通
  • cuda11.1和cuDNN v8.8.1的安装目录问题

    cuda的不同版本文件路径是不一致的 在cuda10 1中 配置cudnn的文件路径是 sudo cp cuda include cudnn h usr local cuda 10 1 include sudo cp P cuda lib6
  • ESLint 工具

    ESLint 可组装的 javaScript 和 JSX 检查工具 规范代码风格 官网 ESLint 插件化的 JavaScript 代码检测工具 ESLint中文文档 VSCode 自动格式化代码 ESLint安装 项目创建时 配置 ES