Linting extensions - mikehov/Dating-app GitHub Wiki

Research Linting

Mike Hovenier | Tech-4

What is Linting?

Linting is a consistent code style, its like a list of rules that you can give to your code. This is useful cause you code in one consistent style, its not only easier to read, but also accessible and reusable for others. So for example: you are only using double-quotes and not single quotes if you don't need them. You can use linter as an extension or as a package.json. Its recommended to use both of them. Linting is looking for potential errors, so its not looking what you are trying to do. The difference between a package.json and an extension is that a package.json is for everybody that is working on the project. Extension is just for you cause its only on your PC.

Three popular linter tools are:

  • JSHint
  • JSCS
  • ESLint

The best one to use lately is ESLint, this is because it provides the most functionalities then the other two combined. That's the reason why I personally chose ESLint, also it's the most used one at this moment and there is a lot to find about this Linting tool.

To install a package.json for ESLint, do the following:

  1. Go to your folder of your project in your terminal:
  2. Type in your terminal $ npm install eslint --save-dev
  3. Type in your terminal $ npx eslint --init
  4. Answer the questions and continue.

To install the extension for ESLint, do the following:

  1. Go to your code editor (Visual Code Studios).
  2. Go to Extensions.
  3. Install the Extension ESLint by "Dirk Baeumer".
  4. Restart your code editor and see if its working in one of your JavaScript files.

Besides the current style guide you choose, you can still put in your own set off rules in your json file. For example:

''' var single = 'single'; '''

So if you want to input a var, it needs to be with single quotes.

The difference between Stylistic and Syntax codes are as following:

  • Syntax codes are errors that your code ain't right or ain't working. You forgot to close your function for example, you never used that variable.
  • A stylistic code on the other hand are not really errors, they are used to keeping the code in the right shape. So your code is consistent, accessible and reusable. So for example: you have 4 spaces instead of 2, you double entered instead of one.

By stylistic errors your code will probably still work but it can be really messy. For Syntax errors you can break your project maybe.

The advantage of using a linter for your project is that its more accessible and reusable for you and for others. If you are working as a team on a project, its important that everyone writes his code the same way. So the code stays consistent and clear. Linters can be frustrating sometimes, but it's a good way to work consistent for in the future.

Extension to make the code easier to understand

Prettier by: Esben Petersen This one helps to keep your code organized, so the right spacings between elements or characters.

Bracket Pair Colorizer by: CoenraadSs The Bracket Pair Colorizer shows with colors the different levels, so the parents brackets are yellow for example, but the children are purple. That way you can keep track of what bracket connects with what bracket.

Code Spell Checker by: Street Side Software Like the extension says, it checks spelling mistakes in your code, it will not look at the sentences, but it will look if the word exists in the English dictionary. The only thing is, it will not come with recommendations, it will only tell you that it might be wrong.

Peacock by: John Papa If you have multiple tabs of your Visual Studio Code open, it will give those projects different colors. So its easier to recognize which project you are working on.

Colorize by: kamikillerto Colorize will show the color through the text, so you can see what color the RGB is for example. This also works for if you are using a root with var.

Extensions to code easier

Path Intellisense by: Christian Kohler This extension helps by finishing your pathname and bringing suggestions. So you can easily find the right folder without making a lot of mistakes doing so.

Auto Rename Tag by: Jun Han This extension will automatically adjust your closing or opening tag. So for example, if you have a section tag, but you want to change it to an article, it will change the other tag where its linked to automatically.

Color Theme

Visual Studio Code provides different color themes that you can use. By myself I'm using Monokai but I like to change up from time to time.
My color theme. The blue border isn't from the theme, that's the peacock extension (see above)

Code editors

There are different variations of code editors. Most populair ones are:

  • Atom
  • Brackets
  • Visual Studio Code

I'm using for my project Visual Studio Code cause it has on its own some good defaults. Also its easy to use and easily customizable if you need to. But Atom and Brackets are also fine to use by my opinion.

Sources

Bellairs, R. (n.d.). What Is Lint Code? And Why Is Linting Important? Retrieved May 21, 2020, from https://www.perforce.com/blog/qac/what-lint-code-and-why-linting-important

EditorConfig Team. (n.d.). EditorConfig. Retrieved May 21, 2020, from https://editorconfig.org/

Dutton, S. (n.d.). JavaScript linting: moving from JSHint and JSCS to ESLint. Retrieved May 21, 2020, from https://samdutton.wordpress.com/2015/10/14/javascript-linting-moving-from-jshint-and-jscs-to-eslint/

List of available rules. (n.d.). Retrieved May 21, 2020, from https://eslint.org/docs/rules/

A. (n.d.). airbnb/javascript. Retrieved May 21, 2020, from https://github.com/airbnb/javascript#types

What is linting and how can it save you time? (n.d.). Retrieved May 21, 2020, from https://www.freecodecamp.org/news/what-is-linting-and-how-can-it-save-you-time/

Sources extensions

Petersen, E. (n.d.). Prettier - Code formatter - Visual Studio Marketplace. Retrieved May 22, 2020, from https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

CoenraadS. (n.d.). Bracket Pair Colorizer - Visual Studio Marketplace. Retrieved May 22, 2020, from https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Street Side Software. (n.d.). Code Spell Checker - Visual Studio Marketplace. Retrieved May 22, 2020, from https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Papa, J. (n.d.). Peacock - Visual Studio Marketplace. Retrieved May 22, 2020, from https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

kamikillerto. (n.d.). colorize - Visual Studio Marketplace. Retrieved May 22, 2020, from https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

Kohler, C. (n.d.). Path Intellisense - Visual Studio Marketplace. Retrieved May 22, 2020, from https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Han, J. (n.d.). Auto Rename Tag - Visual Studio Marketplace. Retrieved May 22, 2020, from https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag