前后端之代码检测

最新推荐文章于 2025-10-17 09:55:32 发布

原创

最新推荐文章于 2025-10-17 09:55:32 发布 · 4.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Tslint #StyleLint #代码质量检测 #vscode #IDEA

本文介绍了前后端代码质量检测的重要性，推荐了前端的StyleLint、Tslint和后端的sonarlint，并讲解了如何在vscode和IDEA中安装及定制规则，强调了规则配置对提高代码质量的关键作用。

我们写代码的时候触发强烈按照代码规范来执行，否则稍有不注意就会在哪里，写的代码有欠缺，并且在团队开发中为了统一大家书写规范避免一些不必要的规范冲突，提高代码的可维护性，所以引入代码检测工具非常重要，

现在越来越多的工程，使用前后端分离的技术，前后端的地位一样重要。

前端代码质量检测

工具选择

HTML / tpl：HTMLHint

Css/scss：StyleLint

JavaScript/ JSX：Eslint

TypeScript：Tslint

因为当前项目正在使用ionic，所以介绍一下stylelint和Tslint工具使用，IDE工具使用vscode。安装插件后，

vscode工具安装

vscode任何工具都是插件的形式安装进来，所有在插件库中找到tslint或styletlint等，安装并重新加载即可。

规则定制

安装代码检测工具都有一个配置文件，并不是所有的检测都加入进去就是最好的，问而是根据当前项目，选择合适的规则，才能发挥它最好的作用。

styletLint规则

rules: {
        // 颜色值避免直接使用颜色名
        'color-named': [
            'never', {
                ignore: ['inside-function']
            }
        ],
        // 使用数字或命名的 (可能的情况下) font-weight 值
        'font-weight-notation': 'numeric',
        // 在函数的逗号之后要求有一个换行符或禁止有空白
        'function-comma-newline-after': null,
        // 在函数的括号内要求有一个换行符或禁止有空白
        'function-parentheses-newline-inside': null,
        // url使用引号
        'function-url-quotes': 'always',
        // 禁止小于 1 的小数的前导 0
        'number-leading-zero': 'never',
        // 字符串使用双引号
        'string-quotes': 'double',
        // 要求选择器列表的逗号之前有一个换行符
        'selector-list-comma-newline-before': 'never-multi-line',
        // 在媒体查询的逗号之前禁止有一换行
        'media-query-list-co