当前位置: 首页 > news >正文

如何配合使用ESLINT 和 PRETTIER

各自的作用

  • eslint:静态分析语法错误
  • prettier:代码格式化工具(需要在IDE中安装prettier的插件)

使用方法:

  • 安装

    npm install eslint --save-dev
    // 创建 .eslintrc.json 文件
    npx eslint --init
    npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
    

    作用
    eslint-config-prettier - 关闭eslintprettier中冲突的规则.
    eslint-plugin-prettier - 用eslint来检查prettier的报出的问题

  • 配置

    • .eslintrc中添加
      "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]
      
    • .prettierrc中添加自己的配置
      {"semi": true,"tabWidth": 2,"printWidth": 100,"singleQuote": true,"trailingComma": "none","jsxBracketSameLine": true
      }
      
    • package.json中添加
      "lint": "eslint .",
      "lint:fix": "eslint --fix",
      

附:

  1. 可参考这个项目中的配置:自建前端组件库项目
  2. VSCode中使用Prettier的教程可参考:VSCode 插件之 Prettier
http://www.lryc.cn/news/8314.html

相关文章:

  • 学英语的优势已来,抓住这个机会
  • 基于微信小程序云开发实现考研题库小程序项目(完整版)
  • AI一点通:使用 ColumnTransformer 转换 Pandas DataFrame 的一个或多个列
  • 【C语言】全局变量、局部变量和静态变量的区别
  • 血氧仪「上潜」,智能穿戴「下沉」
  • CPP2022-计算机类-期末考试
  • 【蓝桥集训】第二天——差分
  • Spring Boot最核心的27个注解,你了解多少?
  • css3弹性盒子
  • 数据分析与SAS学习笔记2
  • 零信任-Akamai零信任介绍(6)
  • 表现良好的最长时段[前缀和思想子数组]
  • Python 获取当前系统时间
  • pytorch基础入门教程
  • RTSP协议交互时TCP/UDP的区别 以及视频和音频的区别 以及H264/H265的区别
  • 调用大智慧L2接口是什么原理?作用是什么?
  • 数据结构 - 栈 与 队列 - (java)
  • CellularAutomata元胞向量机-8-渗流集群MATLAB代码分享
  • iOS UI自动化测试详解
  • Mybatis源码分析(九)Mybatis的PreparedStatement
  • winfrom ui
  • 中国国家级地面气象站基本气象要素日值数据集(V3.0)
  • 【Python语言基础】——Python NumPy 数组副本 vs 视图
  • Spring Cloud_OpenFeign服务接口调用
  • 十三、GIO GTask
  • ch4_1存储器
  • Doris通过Flink CDC接入MySQL实战
  • 搭建zookeeper高可用集群详细步骤
  • Scala 变量和数据类型(第二章)
  • 【JVM基础内容速查表】JVM基础知识 默认参数 GC命令 工具使用 JVM参数设置、说明、使用方法、注意事项等(持续更新)