常州网站开发培训,广东手机网站制作价格,重庆住房和城乡建设厅官方网站,有什么做兼职的网站这次给大家带来ESlint操作步骤详解#xff0c;ESlint操作的注意事项有哪些#xff0c;下面就是实战案例#xff0c;一起来看一下。vue-cli脚手架创建的项目默认使用ESlint规则#xff0c;启动项目的时候因为各种语法报错#xff0c;不得不先停下了解一下什么是ESlint…这次给大家带来ESlint操作步骤详解ESlint操作的注意事项有哪些下面就是实战案例一起来看一下。vue-cli脚手架创建的项目默认使用ESlint规则启动项目的时候因为各种语法报错不得不先停下了解一下什么是ESlint及其相关的一下操作。【使用vue-cli快速搭建项目】http://www.jb51.net/article/140498.htm1. 什么是ESlintESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具它的目标是保证代码的一致性和避免错误。【ESlint 中文官方网站】http://eslint.cn/2. ESlint规范你可以通过下面的列表大概了解ESlint的风格确实与一般的开发习惯不太相同。no-bitwise: 0,//禁止使用按位运算符no-catch-shadow: 2,//禁止catch子句参数与外部作用域变量同名no-class-assign: 2,//禁止给类赋值no-cond-assign: 2,//禁止在条件表达式中使用赋值语句no-console: 2,//禁止使用consoleno-const-assign: 2,//禁止修改const声明的变量no-constant-condition: 2,//禁止在条件中使用常量表达式 if(true) if(1)no-continue: 0,//禁止使用continueno-control-regex: 2,//禁止在正则表达式中使用控制字符no-debugger: 2,//禁止使用debuggerno-delete-var: 2,//不能对var声明的变量使用delete操作符no-p-regex: 1,//不能使用看起来像除法的正则表达式/foo/no-dupe-keys: 2,//在创建对象字面量时不允许键重复 {a:1,a:1}no-dupe-args: 2,//函数参数不能重复no-duplicate-case: 2,//switch中的case标签不能重复no-else-return: 2,//如果if语句里面有return,后面不能跟else语句no-empty: 2,//块语句中的内容不能为空no-empty-character-class: 2,//正则表达式中的[]内容不能为空no-empty-label: 2,//禁止使用空labelno-eq-null: 2,//禁止对null使用或!运算符no-eval: 1,//禁止使用evalno-ex-assign: 2,//禁止给catch语句中的异常参数赋值no-extend-native: 2,//禁止扩展native对象no-extra-bind: 2,//禁止不必要的函数绑定no-extra-boolean-cast: 2,//禁止不必要的bool转换no-extra-parens: 2,//禁止非必要的括号no-extra-semi: 2,//禁止多余的冒号no-fallthrough: 1,//禁止switch穿透no-func-assign: 2,//禁止重复的函数声明no-implicit-coercion: 1,//禁止隐式转换no-implied-eval: 2,//禁止使用隐式evalno-inline-comments: 0,//禁止行内备注no-invalid-regexp: 2,//禁止无效的正则表达式no-label-var: 2,//label名不能与var声明的变量名相同no-labels: 2,//禁止标签声明no-lone-blocks: 2,//禁止不必要的嵌套块no-lonely-if: 2,//禁止else语句内只有if语句no-loop-func: 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)no-multi-spaces: 1,//不能用多余的空格no-multi-str: 2,//字符串不能用\换行no-multiple-empty-lines: [1, {max: 2}],//空行最多不能超过2行no-native-reassign: 2,//不能重写native对象no-negated-in-lhs: 2,//in 操作符的左边不能有!no-nested-ternary: 0,//禁止使用嵌套的三目运算no-new: 1,//禁止在使用new构造一个实例后不赋值no-new-func: 1,//禁止使用new Functionno-new-object: 2,//禁止使用new Object()no-new-require: 2,//禁止使用new requireno-new-wrappers: 2,//禁止使用new创建包装实例new String new Boolean new Numberno-obj-calls: 2,//不能调用内置的全局对象比如Math() JSON()no-octal: 2,//禁止使用八进制数字no-octal-escape: 2,//禁止使用八进制转义序列no-param-reassign: 2,//禁止给参数重新赋值no-path-concat: 0,//node中不能使用dirname或filename做路径拼接no-plusplus: 0,//禁止使用--no-process-env: 0,//禁止使用process.envno-process-exit: 0,//禁止使用process.exit()no-proto: 2,//禁止使用proto属性no-redeclare: 2,//禁止重复声明变量no-regex-spaces: 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/no-restricted-modules: 0,//如果禁用了指定模块使用就会报错no-return-assign: 1,//return 语句中不能有赋值表达式no-script-url: 0,//禁止使用javascript:void(0)no-self-compare: 2,//不能比较自身no-sequences: 0,//禁止使用逗号运算符no-shadow: 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名no-shadow-restricted-names: 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用no-spaced-func: 2,//函数调用时 函数名与()之间不能有空格no-sync: 0,//nodejs 禁止同步方法no-ternary: 0,//禁止使用三目运算符no-trailing-spaces: 1,//一行结束后面不要有空格更全面的了解ESlint规则建议点这里 【ESlint 官方规则列表】http://eslint.cn/docs/rules/3.如何根据ESlint规则修改代码每次改动后启动项目ESlint都会检测你的代码然后在浏览器的控制台疯狂报错。一开始我是根据控制台的报错信息一条一条回去修改的但是这样的方式太低效。后来同事告诉我一种高效的方式可以直接让开发工具(webstorm or idea)识别ESlint并且格式代码过程是这样的Setting -Preferences - Languages Frameworks - JavaScript - Code Quality Tools - Eslint 然后勾选Enable单选框。配置ESlint勾选后你就会发现idea和webstorm会通过红色的下划线来告诉你什么地方不符合ESlint规则。这使我们能在开发过程中就根据ESlint规则修改代码而不是等到运行项目后通过控制台才发现语法错误。ESlint规则提示除了此之外idea和webstorm还能一键格式化让代码按照ESlint规则自动调整。在有语法错误的文件右击然后点击Fix ESint就好了一键格式化4.如何关闭ESlint语法检测这个很简单build -- webpack.base.conf.js然后注释掉图片所指那段代码就可以了。关闭ESlint语法检测// test: /\.(js|vue)$/,// loader: eslint-loader,// enforce: pre,// include: [resolve(src), resolve(test)],// options: {// formatter: require(eslint-friendly-formatter),// emitWarning: !config.dev.showEslintErrorsInOverlay// }相信看了本文案例你已经掌握了方法更多精彩请关注php中文网其它相关文章推荐阅读
