统计前端项目代码的总行数

柔情只为你懂 2024-03-26 18:18 88阅读 0赞

统计前端项目代码的总行数，可以有两种方式：Git Bash 命令行页面中使用命令统计 或着 使用 VS Code 中的插件统计。

#### 方式一、使用命令 ####

##### 1、选择项目路径，进入Git Bash页面 #####

在前端项目的src目录，右键选择“Git Bash Here”，进入 Git Bash 的命令行页面。  
![在这里插入图片描述][a35671e9d2dd49888c019755be6dca22.png]

##### 2、执行统计命令 #####

在命令行页面中执行如下命令，即可统计出相关类型文件的总行数（包含空格）：

find . "(" -name "*.html" -or -name "*.js" -or -name "*.css" -or -name "*.vue" ")" -print | xargs grep -v "^$" | wc -l

> 说明：如果想增加文件类型，在查询过滤条件中增加即可，如：想筛选加 md 类型文件， 添加查询 -or -name “\*.md”。

![在这里插入图片描述][d161ec77c7f24eda874168e953282bbf.png]

#### 方式二、使用VS Code ####

##### 1、安装插件 VS Code Counter #####

在 VS Code 的扩展中，搜索“VS Code Counter”插件，install安装。  
![在这里插入图片描述][9c17feed9be44408b86e4458cf1698a2.png]

##### 2、VS Code打开前端项目 #####

VS Code打开前端项目，使用快捷键 Ctrl + Shift + P，搜素“VSCodeCounter”，选择 Count lines in directory。  
![在这里插入图片描述][9cbc2d35c33d4ca3b2aff96fdc6b4861.png]

##### 3、统计指定目录下文件的行数 #####

在文件路径搜索框中，补充待统计的目录，如：src目录。  
![在这里插入图片描述][f2a39a7552484425835e5aca5ff2a10b.png]

如下图，该插件可以统计出src目录下各个语言类型的文件数、有效代码行数、注释行数、空格行数、总行数，以及每个目录、每个文件的统计情况。  
![在这里插入图片描述][ecdb1a8516954aa98431ffce800635b6.png]

#### PS： ####

如果需要统计后端代码行数，可以参考如下博客：  
[https://www.cnblogs.com/miracle-luna/p/17184767.html][https_www.cnblogs.com_miracle-luna_p_17184767.html]

[a35671e9d2dd49888c019755be6dca22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/55a31009dde5459c8f1b1a6b3fb6fe0d.png
[d161ec77c7f24eda874168e953282bbf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3838867dbd864a0eb917ac0816956bbc.png
[9c17feed9be44408b86e4458cf1698a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/72cb181ab2474de5bfd999cbb3155bde.png
[9cbc2d35c33d4ca3b2aff96fdc6b4861.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5d10bcf6a75f4d398ff7ae5ece124090.png
[f2a39a7552484425835e5aca5ff2a10b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4d78e774627c4e42b3729d28f1176cc3.png
[ecdb1a8516954aa98431ffce800635b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/932970863b7e4541a86817ead063052f.png
[https_www.cnblogs.com_miracle-luna_p_17184767.html]: https://www.cnblogs.com/miracle-luna/p/17184767.html