npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

fe-scan

v0.0.15

Published

vue项目代码圈复杂度、认知复杂度、模板复杂度、重复率、ts覆盖率扫描

Readme

fe-scan

一款前端代码扫描工具,通过代码圈复杂度、认知复杂度、复杂函数和复杂文件数、ts覆盖率、代码重复率等维度度量代码质量。 目前模板复杂度只支持vue模板,其他不支持.

使用方法

  1. 安装依赖
npm install fe-scan -D
  1. 运行扫描任务
const scanCode = require('fe-scan');
scanCode({
	root:`${__dirname}/src`,
	ignore: ['build/**'],
	repeat: true,
	tscover: true,
	complex: true,
	absolutePath: false
}).then(res=>{
	console.log(res);//代码扫描结果
})

入参说明

  1. root
    扫描目录,目前一次只支持扫描一个目录,默认值:__dirname
  2. ignore
    忽略文件或者文件目录,按照数组形式传递,支持多个,默认值: ['node_modules/','build/','dist/**']
  3. repeat
    是否扫描代码重复率,默认:true 开启状态
  4. tscover
    是否扫描ts覆盖率,默认为:true 开启状态
  5. complex
    是否开启代码复杂度扫描,默认为:true 开启状态
  6. absolutePath
    是否是绝对路径,默认为:false 相对路径

扫描结果说明

结果示例

{
	"repeat":{
		"repeatScanLines":2939,//扫描代码总行数,去除了文件收尾的注释行数,其他地方的注释和空行全部包含,一般以该字段为代码总行数
		"duplicatedLines":199,//重复代码行数
		"percentage":"10%", //重复百分比【重复率】
		"data":[//重复代码块明细
			{
				"lines": 12,//重复行数
				"firstFile":{
					"path":"src/test.js",//重复文件地址
					"start":12,  //重复代码块开始行位置
					"end":24  //重复代码块结束行位置
				},
				"firstFile":{
					"path":"src/index.js",//重复文件地址
					"start":24,  //重复代码块开始行位置
					"end":36  //重复代码块结束行位置
				}
			}
		]
	},
	"tscover":{//ts覆盖数据
		"num": "87%",//ts覆盖率,
		"correctCount": 233, //ts声明的变量数据
		"totalCount": 250 //总变量数
	},
	"complex": [//代码复杂度数据
		{
			"filePath":"src/test.js",//文件路径
			"cognitiveComplexity":20,//当前文件总认知复杂度
			"cyclomaticComplexity":30,//当前文件总圈复杂度
			"templateComplexity": 12,//当前文件总模板复杂度
			"complexFunctions":[//当前文件复杂函数列表
				{
					"functionName":"onChange",//函数名称,匿名函数返回:匿名函数
					"line": 24,//函数所在行
					"cyclomaticComplexity": 23//函数圈复杂度,过滤掉了圈复杂度小于20的函数
				}
			]
		}
	]
}

名词解释

圈复杂度、认知复杂度、重复代码不做解释,自己百度就行。
ts覆盖率:有ts定义的变量个数除以总的变量个数,ts定义为any的变量不算在ts定义变量里面。
模板复杂度:对应vue模板中if、for、template 出现的次数