Angular/JavaScript 代码检查工具

Krishna KV

4.82/5 (6投票s)

2016 年 3 月 5 日

CPOL

2分钟阅读

39173

220

使用 ESLint 验证您的 Angular/JavaScript 代码

下载源代码 - 964.2 KB

引言

ESLint 帮助我们避免在 JavaScript 程序中出现的低级错误。例如，在大型或中型 JavaScript 应用程序中，很难找到缺失的变量或函数。ESLint 帮助我们分析代码，查找错误，并确保在整个应用程序中遵循适当的编码风格指南。

ESLint 是一个基于 Esprima 构建的 JavaScript 代码检查工具。它可以用来检查 JavaScript 错误和风格。它更灵活且高度可配置。主要目标是开发者可以编写自己的规则，但我们仍然拥有默认规则，可以更改或扩展这些规则。

ES6 支持
支持 Angular JS
自定义报告器
验证 JSX
更多插件
风格检查器
规则可插拔
自定义错误或警告

验证

语法错误
编码标准
缺失或不必要的分号
无法到达的代码
未使用的参数
缺失闭合括号
它用于强制执行一组风格和一致性规则
检查变量名称

Package.json

{
  "name": "jsvalidator",
  "version": "1.0.0",
  "description": "Javascript validation test",
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-eslint": "2.0.0",
    "gulp-jshint": "2.0.0",
    "jshint": "2.9.1",
    "jshint-stylish": "2.1.0",
    "eslint-plugin-angular": "1.0.0"
  } 
}

使用 Gulp.js 配置

在本演示中，使用 Visual Studio、gulp 和任务运行器，可以使用任何其他 IDE、grunt 等。

gulpfile.js

var gulp = require('gulp');
var eslint = require('gulp-eslint');
var stylish = require('jshint-stylish');
var angularPlugin = require('eslint-plugin-angular');
var config =
    {
        apps: ['app/**/*.js'],
        html: ['*.html', 'app/**/*.html']
    };


gulp.task('validateSyntax-eslint', [], function () {
    return gulp.src(config.apps)
    .pipe(eslint())
    .pipe(eslint.format())
});

我们可以查看 gulp 中可用的任务列表。运行任务 validateSyntax-eslint。由于我们尚未添加或配置规则，因此它不会显示任何错误/警告。

让我们添加 ESLint 默认规则。

    gulp.task('validateSyntax-eslint', [], function () {
    return gulp.src(config.apps)
    .pipe(eslint(
        {"extends": ["eslint:recommended"]   
        }))
    .pipe(eslint.format())
});

自定义错误

更多规则

    gulp.task('validateSyntax-eslint', [], function () {
    return gulp.src(config.apps)
    .pipe(eslint(
        {
            "extends": ["eslint:recommended"],
            "plugins": ["angular"], 
            "env": {
                "browser": true
            },

            "globals": {
                'jQuery': true,
                '$': true,
                "angular": true,
                "app":true
            },
            'rules': {
                'quotes': [0, 'single'],
                'semi': [2, 'always'],
                'no-unused-vars': 1,
                'no-console': 0,            
            }
        }))
    .pipe(eslint.format())
});

由于配置 'no-unused-vars': 1，未使用的变量显示为警告。将值更改为 2 将显示为错误

0- Disabled
1- Warning
2- Error

添加 Angular Js 验证

控制器名称应以 [A-Z] 开头，后跟 Controller。

指令和过滤器应添加带有 dir 和 flr 的前缀。

禁止空控制器。

包含所需的插件 gulp.js 和 package.json - 'eslint-plugin-angular'