Research: linters & extensions - imkarin/bloktech GitHub Wiki

Linters

A program that helps you follow specific set of coding style rules. It analyzes source code, flags programming errors, bugs, stylistic errors and suspicious constructs. You can configure this yourself (.eslintc or .editorconfig (useful to put in your repo if multiple people work on a project) file, check eslint.org). Also useful to debug common errors. Checkout Typescript.

Setup as extension in your editor, or as npm script in your package.json. You can also do both (recommended).

JSLint

Pros:

  • Comes configured and good to go (with own set of rules)

Cons:

  • There is no config file, hard to change settings
  • Few configuration options, some rules can't be disabled
  • No option to add custom rules
  • Undocumented features

JSHint

Pros:

  • Supports config file, easier in large projects
  • Most settings can be changed
  • Supports many popular libraries like NodeJS, jQuery, QUnit, Mocha etc.
  • Basic ES6 Support

Cons:

  • Has an enforcing and relaxing option, which can be confusing
  • No custom rule support

JSCS

Pros:

  • Supports custom reporters (easier to integrate with other tools)
  • Presets and ready-made config files available
  • Can include rule names in reports, so itโ€™s easy to figure out which rule is causing which error
  • You can add custom plugins

Cons:

  • Only detects coding violations, not potential bugs (like unused vars etc.)
  • Runs slowly, but this is not very noticable in use.

ESLint

Pros:

  • Very flexible: rules can be turned on/off, and have extra & tweakable settings
  • Extensible, many available plugins
  • Output is easy to understand, user friendly
  • Has many rules not available in other linters, more useful for detecting problems
  • Best ES6 support, and the only tool to support JSX
  • Supports custom reporters

Cons:

  • Needs some configuration
  • Slow, but not noticable

ESLint seems to be the most useful for this dating app project. It's a very flexible linter with many advantages and very few, small disadvantages. It's also very clear and easy to use, which comes in hand as I'm only a beginner.

Sources:

Extensions

As I've decided to use Visual Studio Code, I've looked into the most popular extensions for this code editor.

Beautify

Beautify makes sure your code (HTML, CSS, Sass, javascript, JSON) is written in a consistent style, that you can modify to your liking. It also enables using the js-beautify extension in VSCode.

GitLens

GitLens is one of the most popular VSCode extensions, and very useful for Git projects with more than one contributor. It's functionalities include:

  • Current Line Blame, see exactly who wrote which lines in the code, and when.
  • Git Code Lens, adds Git authorship info to the top of the file and code blocks.
  • Status bar blame.
  • Git blame hovers over current line.
  • Side bar with useful info (commits, etc.)
  • Very visual user settings that are easy to customize and change.

30 seconds of code

30SOC is an extension that provides short JavaScript snippets that you can understand in 30 seconds or less. The snippets get presented to you as a suggestion, prefixed by 30s_. They are written in ES6 and use the fat arrow syntax.

Bracket Pair Colorizer

This simple extension makes it easy to see which brackets are paired, by giving them the same color.

Auto close tag

Automatically adds the HTML/XML closing tag, making the workflow faster.

Auto rename tag

This extension automatically renames the paired HTML/XML tag. This prevents user errors and makes the workflow a lot faster.