配置eslint规范项目代码风格
为什么要使用eslint
你在接手一个项目的维护迭代任务,阅读代码的时候是否会因为项目中充斥着各种风格的代码而感到头疼?没错,eslint就是为了解决这类问题
eslint能做什么?
1.代码风格错误提示
配置好eslint后,如果代码风格与配置描述的不符,eslint会提示代码中存在的风格问题;一般提示的情形有:
1.编辑器内,大多数编辑器配置好后能读取eslint配置文件并在文件中进行相应提示
2.eslint-loader配合webpack-dev-server能在页面中弹出相应错误内容
3.eslint通过命令号对代码进行风格检查
2.修复相应风格问题
eslint --fix 命令能修复一部分代码风格问题;能修复的范围见https://cn.eslint.org/docs/rules/中带工具图标的部分
常见问题
如何在局部禁用eslint
/* eslint-disable no-alert, no-console */ alert('foo'); console.log('bar'); /* eslint-enable no-alert, no-console */
以下是详细配置
{ root: true,// 直接在根目录读取配置文件,能提高eslint性能 "env": { "node": true,// 允许使用nodejs相关的变量,下同 "es6": true, "browser": true, "commonjs": true }, "extends": "standard", // 继承eslint-config-standard中的配置,可以在rules中覆盖 "parser": "babel-eslint", // 为eslint制定parser,默认的Esprima只允许已纳入es标准的内容 "plugins": "vue",// 使用eslint-plugin-vue,使eslint能对vue语法进行处理,相应rules见https://eslint.vuejs.org/rules/ "rules": { "no-alert": 2, "indent": ["error", 4, { "SwitchCase": 1, "VariableDeclarator": 1, "outerIIFEBody": 1, "MemberExpression": 1, "FunctionDeclaration": { "parameters": 1, "body": 1 }, "FunctionExpression": { "parameters": 1, "body": 1 }, "CallExpression": { "arguments": 1 }, "ArrayExpression": 1, "ObjectExpression": 1, "ImportDeclaration": 1, "flatTernaryExpressions": false, "ignoreComments": false }] } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 快速设置IDEA代码风格为Google风格
- eslint+prettier统一代码风格的实现方法
- 实例详解Vue项目使用eslint + prettier规范代码风格
- 如何使用 Pylint 来规范 Python 代码风格(来自IBM)
- Pycharm学习教程(2) 代码风格
- php好代码风格的阶段性总结
- .Net 项目代码风格要求小结
- 当前流行的JavaScript代码风格指南
- 你应该知道的Ruby代码风格
- 关于更改Zend Studio/Eclipse代码风格主题的介绍
- JQuery入门—JQuery程序的代码风格详细介绍
- Java黑科技之通过Google Java Style 文件配置IDEA和Ecplise代码风格
相关文章
JavaScript实现将数组数据添加到Select下拉框的方法
这篇文章主要介绍了JavaScript实现将数组数据添加到Select下拉框的方法,涉及javascript数组操作及页面元素动态赋值的相关技巧,需要的朋友可以参考下2015-08-08JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
js定义类或对象的介绍,需要的朋友可以参考下2012-08-08
最新评论