首页 > 其他分享 >代码校验和格式化

代码校验和格式化

时间:2023-08-18 23:00:11浏览次数:36  
标签:typescript 格式化 no 代码 校验 prettier console true eslint

 

eslint

 

通用配置

eslint 使用版本优先级 项目安装 eslint(推荐使用) 全局安装的 eslint

 

忽略文件

一般用于第三方 lib 库, 自动生成代码等。

 

// .eslintignore 文件
/assets/js/iconfont/*
/src/service/*
/dist
**/iconfont/**
*/qiyu.ts

 

禁用规则

全局禁用需要去配置文件设置规则,不再赘述。

禁用这个文件推荐使用忽略文件配置,不再赘述。

示例局部禁用某条规则的场景,非必要不推荐使用

 

// 区间内全部禁用 禁止使用console和 alert
/* eslint-disable no-alert, no-console */
alert("foo");
console.log("bar");
/* eslint-enable no-alert, no-console */

// 下一行禁用 禁止使用console规则
/* eslint-disable-next-line no-console */
console.log("bar");

// 当前行禁用 禁止使用console规则
console.log("bar"); /* eslint-disable-line no-console */

 

Vue3 eslint 推荐配置

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended", // 如果有ts
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": "warn",
    "no-debugger": "warn",
    "@typescript-eslint/no-var-requires": 0,
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": 0,
    "vue/no-deprecated-slot-attribute": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "prettier/prettier": 0,
    "prefer-const": 0,
    "vue/multi-word-component-names": 0,
    "@typescript-eslint/no-this-alias": [
      "error",
      {
        allowDestructuring: true, // Allow `const { props, state } = this`; false by default
        allowedNames: ["_self"], // Allow `const vm= this`; `[]` by default
      },
    ],
    "@typescript-eslint/ban-types": 0, // allow Function type
  },
  // ignorePatterns: ['**/*/*.js'],
};

 

 

React eslint 推荐配置

module.exports = {
  extends: [require.resolve("@umijs/fabric/dist/eslint")],
  rules: {},
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
    REACT_APP_ENV: true,
  },
};

 

stylelint

配置读取优先级, 一旦发现它们中的任何一个,将不再继续进行查找,进行解析,将使用解析后的对象。

  • package.json 中的 stylelint 字段
  • .stylelintrc 可以使用 JSON 或 YAML 或 JS 后缀名。默认按 JSON 解析
  • stylelint.config.js
  • stylelint.config.cjs

推荐配置

const fabric = require("@umijs/fabric");

module.exports = {
  ...fabric.stylelint,
};

 

如何局部禁用某条规则

.test {
  // 下一行禁用禁止使用import 规则
  /* stylelint-disable-next-line declaration-no-important */
  color: #fff !important;
}
.test {
  // 当前行禁止使用import 规则
  color: #fff !important; /* stylelint-disable-line declaration-no-important */
}

// 禁用区间内所有import 规则
/* stylelint-disable selector-no-id, declaration-no-important  */
.test {
  color: #fff !important;
  background-color: #fff !important;
}
/* stylelint-enable */

 

prettier

配置文件

// .prettierrc or prettier.config.js or .prettierrc.js
{
  "singleQuote": true, // 使用单引号
  "printWidth": 115,
  "proseWrap": "always",
  "semi": true, // 不加分号
  "trailingComma": "none", // 结尾处不加逗号
  "htmlWhitespaceSensitivity": "ignore" // 忽略'>'下落问题
}

 

特别注意的是, 当只使用 git hooks 就行代码格式化的时候,当提交的时候,会出现你没编辑过的文件被添加到 git 暂存区的情况。

配置文件优先级

Prettier configuration file

.editorconfig

Visual Studio Code Settings (Ignored if any other configuration is present)

 

配合 eslint 使用

在 ESlint 推出 --fix 参数前,ESLint 并没有自动化格式代码的功能,要对一些格式问题做批量格式化只能用 Prettier 这样的工具。并且,Prettier 在代码风格的检测上比 ESlint 更全面,所以两者通常是结合在一起使用的。

但是两者会有一些规则是相互冲突的要怎么配合起来使用呢。

1.安装依赖

$ npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

2.设置配置文件

 // .eslintrc.js
 {
   "extends": ["plugin:prettier/recommended"]
 }
 // .prettierrc
 {
   "singleQuote": true
}

3.如果有使用到一些 ESLint 插件(如 eslint-plugin-react),需要禁掉这些插件中与 Prettier 冲突,所以需要添加 "prettier/react"。

 {
   "extends": [
     "plugin:prettier/recommended",
     "prettier/flowtype",
     "prettier/react"
   ]
 }

 

标签:typescript,格式化,no,代码,校验,prettier,console,true,eslint
From: https://www.cnblogs.com/miangao/p/17622475.html

相关文章

  • uniapp中使用过滤器filters来格式化时间
    uniapp中使用过滤器filters来格式化时间看那个创云商城源码的时候看到的,觉得蛮有用的,扒下来备用,应该也能直接用于JS  <template><viewclass="mix-timeline"><viewclass="cell"v-for="(item,index)inlist":key="index">......
  • 代码随想里算法训练营第四天|
     24.两两交换链表中的节点题目给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。第一想法第一次做这个题的时候其实没搞懂怎么两两交换,原来是12、34、56这样...应该是反转链表的变体,先判断......
  • 产品代码都给你看了,可别再说不会DDD(三):战略设计
    这是一个讲解DDD落地的文章系列,作者是《实现领域驱动设计》的译者滕云。本文章系列以一个真实的并已成功上线的软件项目——码如云(https://www.mryqr.com)为例,系统性地讲解DDD在落地实施过程中的各种典型实践,以及在面临实际业务场景时的诸多取舍。本系列包含以下文章:DDD入门DD......
  • 代码随想录算法训练营第六天|242.有效的字母异位词 349. 两个数组的交集 202. 快乐数
     哈希表部分:哈希表,简单来说就是k-v形式查询的结构,用来快速判断一个元素是否出现集合里,如hashmap核心是哈希函数,k存哈希函数的值,找的时候找查询项的哈希函数值就行,返回v 出现哈希碰撞的时候,查找的流程怎么走呢?(*存疑,之后查一下) 类型:数组+集合set(set、multiset、unordered......
  • 代码随想录算法训练营第三天| 203.移除链表元素 ,707.设计链表 ,206.反转链表
    203.移除链表元素题目给你一个链表的头节点head和一个整数val,请你删除链表中所有满足Node.val==val的节点,并返回新的头节点。第一想法定义一个指针a指向头节点,顺序遍历链表,循环结束的条件是指针a.next为null删除操作是判断a.next.val=val时让a.next=a.next.nex......
  • [代码随想录]Day21-回溯算法part01
    题目:77.组合思路:回溯就是dfs的一个特殊情况也就是递归的一种情况,值得注意的一点:要记得深拷贝,不然最后全是空代码:varres[][]intvarpath[]intfunccombine(nint,kint)[][]int{res=[][]int{}path=make([]int,0,k)Combine(n,1,k,0)ret......
  • SPI驱动0.96寸OLED单色屏刷新率测试以及代码优化改进,方法适用于SPI驱动其他设备
    目前嵌入式当中OLED常用驱屏方式有两种:SPI或IIC。以速度来讲,SPI速度相较于IIC会快上一些,硬件IIC相较于模拟IIC速度又会快上一些。此外还有模拟SPI的,但该种用法我遇到较少,本文就硬件SPI驱动OLED屏幕做一个简单的刷新率测试。 测试硬件平台:CH32V307VCT6+杜邦线连接0.96寸SPI接口O......
  • 导出运营数据Excel报表_代码开发
           ......
  • 直线求交点公式及代码
    直线求交点题目链接:https://www.acwing.com/problem/content/3693/1.直线的表示直线标准形式:Ax+By=C设直线经过的两个点为(x1,y1),(x2,y2)则:A=y2-y1B=x1-x2C=A*x1+B*y12.两条直线求交点设两条直线方程为:A1x+B1y=C1A2x+B2y=C2特殊情况:......
  • 必备Python代码段
    1.反转字符串以下代码使用Python切片操作来反转字符串。#Reversingastringusingslicingmy_string="ABCDE"reversed_string=my_string[::-1]print(reversed_string)#Output#EDCBA2.使用标题类(首字母大写)以下代码可用于将字符串转换为标题类。这是通过使用字符串类中......