Linting your code can be one of the most difficult and tedious aspects of web development, especially if you’re using pre-existing code to build your project. But don’t worry! It’s easier than you think to lint your code clean, especially when you know what to look out for! In this article, I’ll walk you through how to get existing code to lint clean so that it works seamlessly with your ESLint rules.
Let’s talk about why it’s important
Think of it as a linter for your code. It will not only tell you when you have errors in your syntax but also warn you about any potential problems before they happen.
Show Me the Error
If you’re like most developers, you probably have a love-hate relationship with linting. On one hand, it can be a pain to get your code to lint clean. On the other hand, once it’s clean, it can help prevent errors and improve code quality.
If you’ve got an existing project that needs to be linted clean, we recommend running it through ESLint and fixing any warnings or errors that come up.
First off, install ESLint by following the instructions on their website here.
Next go into your terminal and cd into your project directory where all of your files are located.
Finally type in npm run eslint –fix which will fix any problems ESLint finds for you automatically. Once this is done, you should see no issues in your terminal!
You can also optionally use the eslint -fix command to do the same thing without having to type npm run first. The final step is to commit these changes to your Git repository and push them live. That way, anyone else who wants to work on the project in the future will know what standards they need to follow!
How to Configure ESLint?
ESLint is the most popular tool for linting Node.js packages, and it can be set to enforce multiple coding styles. It is possible to create your own style definitions, but I will demonstrate how to use the StrongLoop style here. There are others, but StrongLoop’s coding style is unremarkable (which is a good thing because coding style should not draw attention) and similar to that used in many open-source Node.js projects.
For example, I want to use ECMAScript 6+, so I answered yes when asked if I wanted to use ES6+ syntax and no when asked if I wanted my rule set customized. It creates two files (eslintignore.js and .eslintrc) which should be added to your project’s root directory so they’re accessible by any other folders or files within it.
Step 2. Add Style Rules
For example, any new style rule should go after ‘no-mixed-spaces-and-tabs’. These are also called specificity. The most specific rule will always override more general ones (think about CSS specificity). With these changes made to our .eslintrc file, we’re now ready for step 3!
Step 3. Run Linter on Files or Folder(s)
- If you’re using a Mac, open the Terminal. If you’re on Windows, open the Command Prompt.
- Change directory to the location of your project files. For example, if your project is in a folder called MyProject on your Desktop, you would type the following into the command line and press Enter: cd Desktop/MyProject
find . -name *.js xargs eslint –ext .jsx –exclude-patterns node_modules/**/* .js —include-patterns **/*.test.js **/index*.js* && echo Done.
Check for Warnings and Errors: When there are warnings or errors with code, they will appear in the output that ESLint prints at the end of the process before it tells you whether or not it found any problems with your code.
Step 4. Fix Issues
Once you have your .eslintrc file configured, you can run ESLint on your code to check for linting errors. If there are any errors, they will be outputted in the terminal. To fix them, simply go through each error one by one and make the necessary changes to your code. After fixing all the errors, your code should now lint clean! A few things that might trip up your code as it’s being checked for issues is if you’re not using curly braces around a single line if/else statement or an assignment operator like ‘=’ or not including semicolons at the end of lines of Java script.
It’s also important to note that ESLint has a lot of rules (see list below) so while some fixes may seem simple, they may not always be as straightforward. It’s always worth giving yourself time to explore what might cause an issue before trying to tackle the problem head-on!
A) Use strict mode where applicable, for example ‘use strict’;
B) For the sake of consistency, never use var declarations;
C) Always declare all variables before use; and
D) Omit any trailing semicolons from the end of statements. It’s also a good idea to have a linter that will automatically remove semicolons at the end of each line. Most linter tools will recognize ; as ending a statement if there is no other character on its right-hand side.
ESLint recognizes this syntax and removes it automatically. As an alternative, you can use semicolon operator (;) in your code editor such as Sublime Text or Atom, which will insert the semicolon for you when necessary. You can also install an ESLint plugin to do this instead.