What is a linting tool?

Who Should Be Linting?

Going Deeper With ESLint

Global Install

npm install -g eslint

eslint --init

eslint file_to_lint.js

Project Install

npm install --save-dev eslint npm install --save-dev eslint-loader

module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules|css|templates)/, enforce: 'pre', use: [{loader: 'eslint-loader'}], },

{ "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true, "experimentalObjectRestSpread": true } }, "rules": { "semi": 2, "no-var": 2, "prefer-const": 2, "max-len": ["error", { "ignoreRegExpLiterals": true, "code": 100, "ignoreStrings": true, "ignoreTemplateLiterals": true, "ignoreComments": true}], "no-lonely-if": 2, "object-property-newline": 2 } }

Setup ESLint Within Atom IDE

If you work on a big project, or even a small project, it is extremely good practice to set up a linting tool.When you run a linting tool on a file(s), you are running program that will do a static analysis of the source code you run it on. This means that it will perform the analysis of this code without running it.What this linting does is “flag” problem areas of code, and can even point these out on the fly if you have an editor setup to handle that sort of thing.In short, every developer should. Working with a linting tool when on a solo project can be very helpful in keeping you h0nest and consistent . It can also help limit the potential for bugs and make you more aware of what you are doing.While using a linter on a project where you are the sole coder is great, it really comes in handy when working with a team. Linting a code base when on a team can provide great benefits. Holding everyone to the same standards and keeping some consistency will go a long way in keeping the code base familiar, readable, and syntactic bugs down.Because most of the front end development I do is react based, I mostly stick with ESLint. I do this because of its great ES6 support as well as its JSX support.If you want to install ESLint for an individual file, you can easily do so by running (assuming you have node installed)Once you have that installed you need to setup a config file. This package allows you to do that via this commandAnd finally, you can call eslint on the fileA more common setup is the need to run ESLint on a per project basis. For this example, assume you are setting it up on a React project. We can try this on a previous project that was worked on in the article http://www.thedevnotebook.com/2017/02/front-end-tooling-setup-with-react.html Front End Tooling Setup With React . You can also download the repo here . Of course, you can also do this to a personal repo as well.From the root of your project directory (where package.json is), run the followingI'm using Webpack to build this project. In this case we need to add a rule to thefileThe key line here is theline. This line will avoid listing folders like node_modules or css directories.Once you are at this point, the only thing to do is add a file in the root of you project calledI have a basic file setup I use.This file check only for a few things. First in the parserOptions section, you can set the ecmaVersion to 6 which is obviously ES6. Here you can also set the feature to look out for as well. For this example, you can see I set to check in the context of JSX.You can get a full list of rules and how to implement them right from the source of ESLint http://eslint.org/docs/rules/ . You can also do some searching for others .eslintrc files and implement rules that they use. For example, the package eslint-config-airbnb-base allows you to extend Airbnb's .eslintrc file. Keep in mind, if you do this on a large code base, you will probably be spending a lot of time cleaning up code. That is not a bad thing, but it could take some time depending on how bad the code is.If you notice in myfile, in the rules section I have a lot of them set to 2. This means I am setting them to an Error state. For example, I have. This means that if I build my project using Webpack (as I am), and forget a semicolon at the end of a line that should have one, the project will throw an error and not build.0 off1 warn (will build with warnings)2 error (will fail build)You can also set this up with many IDEs in order to lint as you go. I use Atom IDE and it is very simple to do this with Atom.There are two plugins you need to do this (this also assumes you have ESLint setup on your system and/or project.If you go to yourin Atom (Atom->Preferences) and then thesection, you can search for installand. Search for linter-eslint and linter should show up beneath that as well.Once installed, you will notice that errors come and go as you are working. This saves a lot of cumulative time over the course of working on a project since you can fix errors live as you are working on them.One more setting within Atom. If you notice I have a rule set for "max-len", the line length in there is 100. That is 100 characters across. Anything over that will alert and Error. Also notice, that things like comments and strings that are long are ignored and can exceed the 100 character max. To set this in Atom, go to Atom -> Preferences and this time to Editor. Once there you can see a setting for Preferred Line Length. Set that to match the .eslintrc file and you will notice the line within the editor itself be that length while working.Follow _theDevNotebook on Twitter