(window.webpackJsonp=window.webpackJsonp||[]).push([[1757],{2165:function(t,s,n){"use strict";n.r(s);var e=n(31),a=Object(e.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"linters-ensuring-code-quality"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#linters-ensuring-code-quality"}},[t._v("#")]),t._v(" Linters - Ensuring code quality")]),t._v(" "),n("h2",{attrs:{id:"jshint"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jshint"}},[t._v("#")]),t._v(" JSHint")]),t._v(" "),n("p",[n("a",{attrs:{href:"http://jshint.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("JSHint"),n("OutboundLink")],1),t._v(" is an open source tool which detects errors and potential problems in JavaScript code.")]),t._v(" "),n("p",[t._v("To lint your JavaScript you have two options.")]),t._v(" "),n("li",[t._v("Go to [JSHint.com](http://jshint.com/) and paste your code in there\non line text editor.")]),t._v(" "),n("li",[t._v("Install [JSHint in your IDE](http://jshint.com/install/).\n"),n("ul",[t._v("\n1. Atom: [linter-jshint](https://github.com/AtomLinter/linter-jshint) (must have [Linter](https://github.com/steelbrain/linter) plugin installed)\n1. Sublime Text: [JSHint Gutter](https://github.com/victorporof/Sublime-JSHint) and/or [Sublime Linter](https://github.com/SublimeLinter/SublimeLinter-for-ST2)\n1. Vim: [jshint.vim](https://github.com/walm/jshint.vim) or [jshint2.vim](https://github.com/Shutnik/jshint2.vim)\n1. Visual Studio: [VSCode JSHint](https://github.com/Microsoft/vscode-jshint)\n")])]),t._v(" "),n("p",[t._v("A benefit of adding it to your IDE is that you can create a JSON configuration file named "),n("code",[t._v(".jshintrc")]),t._v(" that will be used when linting your program. This is convent if you want to share configurations between projects.")]),t._v(" "),n("p",[t._v("Example "),n("code",[t._v(".jshintrc")]),t._v(" file")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-W097"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Allow "use strict" at document level')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"browser"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// defines globals exposed by modern browsers http://jshint.com/docs/options/#browser")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"curly"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// requires you to always put curly braces around blocks in loops and conditionals http://jshint.com/docs/options/#curly")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"devel"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// defines globals that are usually used for logging poor-man's debugging: console, alert, etc. http://jshint.com/docs/options/#devel")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// List global variables (false means read only)")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"globals"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"globalVar"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"jquery"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This option defines globals exposed by the jQuery JavaScript library.")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"newcap"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// List any global functions or const vars")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"predef"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"GlobalFunction"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"GlobalFunction2"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"undef"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// warn about undefined vars")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"unused"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// warn about unused vars")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),n("p",[t._v("JSHint also allows configurations for specific lines/blocks of code")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("operation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'+'")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      result "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" a "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n   "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// JSHint W086 Expected a 'break' statement")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// JSHint flag to allow cases to not need a break")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* falls through */")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*'")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'x'")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      result "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" a "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// JSHint disable error for variable not defined, because it is defined in another file")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* jshint -W117 */")]),t._v("\nglobalVariable "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'in-another-file.js'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* jshint +W117 */")]),t._v("\n\n")])])]),n("p",[t._v("More configuration options are documented at "),n("a",{attrs:{href:"http://jshint.com/docs/options/",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://jshint.com/docs/options/"),n("OutboundLink")],1)]),t._v(" "),n("h2",{attrs:{id:"eslint-jscs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#eslint-jscs"}},[t._v("#")]),t._v(" ESLint / JSCS")]),t._v(" "),n("p",[n("a",{attrs:{href:"http://eslint.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("ESLint"),n("OutboundLink")],1),t._v(" is a code style linter and formatter for your style guide "),n("a",{attrs:{href:"http://www.slant.co/versus/8627/8628/%7Ejshint_vs_eslint",target:"_blank",rel:"noopener noreferrer"}},[t._v("much like JSHint"),n("OutboundLink")],1),t._v(". ESLint merged with "),n("a",{attrs:{href:"https://medium.com/@markelog/jscs-end-of-the-line-bc9bf0b3fdb2#.h2cktyall",target:"_blank",rel:"noopener noreferrer"}},[t._v("JSCS"),n("OutboundLink")],1),t._v(" in April of 2016. ESLint does take more effort to set up than JSHint, but there are clear instructions on their "),n("a",{attrs:{href:"http://eslint.org/docs/user-guide/getting-started",target:"_blank",rel:"noopener noreferrer"}},[t._v("website"),n("OutboundLink")],1),t._v(" for getting started.")]),t._v(" "),n("p",[t._v("A sample configuration for ESLint is as follows:")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rules"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"semi"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"error"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"always"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// throw an error when semicolons are detected ")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"quotes"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"error"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"double"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// throw an error when double quotes are detected")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),n("p",[t._v("A sample configuration file where ALL rules are set to off, with descriptions for what they do can be found "),n("a",{attrs:{href:"https://gist.github.com/cletusw/e01a85e399ab563b1236",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("h2",{attrs:{id:"jslint"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jslint"}},[t._v("#")]),t._v(" JSLint")]),t._v(" "),n("p",[n("a",{attrs:{href:"http://www.jslint.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("JSLint"),n("OutboundLink")],1),t._v(" is the trunk from which JSHint branched. JSLint takes a much more opinionated stance on how to write JavaScript code, pushing you towards only using the parts "),n("a",{attrs:{href:"http://crockford.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Douglas Crockford"),n("OutboundLink")],1),t._v(' deems to be its "good parts", and away from any code that Crockford believes to have a better solution. The following StackOverflow thread may help you decide '),n("a",{attrs:{href:"http://stackoverflow.com/a/6803574/6194193",target:"_blank",rel:"noopener noreferrer"}},[t._v("which linter is right for you"),n("OutboundLink")],1),t._v(". While there are differences (here are some brief comparisons between it and "),n("a",{attrs:{href:"http://www.slant.co/versus/8627/8626/%7Ejshint_vs_jslint",target:"_blank",rel:"noopener noreferrer"}},[t._v("JSHint"),n("OutboundLink")],1),t._v(" / "),n("a",{attrs:{href:"http://www.slant.co/versus/8628/8626/%7Eeslint_vs_jslint",target:"_blank",rel:"noopener noreferrer"}},[t._v("ESLint"),n("OutboundLink")],1),t._v("), each option is extremely customizable.")]),t._v(" "),n("p",[t._v("For a more information about configuring JSLint check out "),n("a",{attrs:{href:"https://www.npmjs.com/package/jslint",target:"_blank",rel:"noopener noreferrer"}},[t._v("NPM"),n("OutboundLink")],1),t._v(" or "),n("a",{attrs:{href:"https://gist.github.com/bretdavidson/3189814#file-jslint-options-descriptions",target:"_blank",rel:"noopener noreferrer"}},[t._v("github"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("h4",{attrs:{id:"remarks"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#remarks"}},[t._v("#")]),t._v(" Remarks")]),t._v(" "),n("p",[t._v("No matter what linter you choose every JavaScript Project should use one. They can help find error and make code more consistent. For more comparisions check out "),n("a",{attrs:{href:"https://www.sitepoint.com/comparison-javascript-linting-tools/",target:"_blank",rel:"noopener noreferrer"}},[t._v("comparison JavaScript linting tools"),n("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=a.exports}}]);