angularjs+eslint-plugin-angular

一、安装 eslint-plugin-angular

1、安装eslint

1)全局安装

npm i -g eslint

2)局部安装

npm i -D eslint

3)eslint初始化

eslint --init

我选择的eslint规则

注意:

1、eslint规则:http://eslint.cn/docs/rules/

2、如果eslint是全局安装的  eslint-plugin-angular也需要全局安装

3、需要没有package.json文件请使用npm --init 命令添加

2、检查eslint 是否安装成功

1)此时会生成.eslintrc.js文件,且内容如下(根据初始化时的选择会有差异):

module.exports = {

"env": {

"es6": true,

"node": true

},

"extends": "eslint:recommended",

"parserOptions": {

"sourceType": "module"

},

"rules": {

"indent": [

"error",

4

],

"linebreak-style": [

"error",

"windows"

],

"quotes": [

"error",

"single"

],

"semi": [

"error",

"always"

]

}

};

2)运行eslint 命令(--fix 命令可自动修复常见问题)

eslint [options] file.js [file.js] [dir]

此时命令行工具会出现错误提示

3、添加eslint-plugin-angular插件

1)运行如下命令

npm install --save-dev eslint-plugin-angular

2)修改.eslintrc.js文件

module.exports = {

"env": {

"node": true

},

"extends": "eslint:recommended",

"plugins":["angular"],

"rules": {

"indent": [

"error",

4

],

"linebreak-style": [

"error",

"windows"

],

"quotes": [

"error",

"single"

],

"semi": [

"error",

"always"

],

/*error*/

'angular/avoid-scope-typos':2,

'angular/module-getter': 2,

'angular/module-setter': 2,

'angular/no-private-call':2,

/*best practices*/

'angular/component-name': 1,

'angular/constant-name': 1,

'angular/controller-as-route': 1,

'angular/controller-as-vm': 1,

'angular/controller-as': 1,

'angular/controller-name': 1,

'angular/directive-name': 1,

'angular/directive-restrict': 1,

'angular/document-service': 1,

'angular/factory-name': 1,

'angular/file-name': 1,

'angular/filter-name': 1,

'angular/function-type': 1,

'angular/interval-service': 1,

'angular/module-name': 1,

'angular/no-run-logic': 1,

'angular/no-service-method': 1,

'angular/provider-name': 1,

'angular/service-name': 1,

'angular/timeout-service': 1,

'angular/value-name': 1,

'angular/window-service': 1

}

};

注意:angular1.0代码规范:https://github.com/johnpapa/angular-styleguide/tree/master/a1

3)再次执行eslint命令,可在命令行查看警告

eslint [options] file.js [file.js] [dir]

参考网址:

1)http://eslint.cn/

2)https://github.com/Gillespie59/eslint-plugin-angular

3)https://github.com/johnpapa/angular-styleguide/tree/master/a1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,642评论 3 14
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,744评论 7 110
  • 也许前路崎岖,风雨交加,没关系,我会一直往前走,走向更好的自己。
    笑点滴滴阅读 81评论 0 0
  • 我心中的天空,并不是眼里所见的那么单调,更多的诗情画意。。 第一首 大海波涛 正如地球的风暴 时间的破产 心中的天...
    风的指尖2017阅读 347评论 3 0