Week 4 - GiovanniDw/party-finder GitHub Wiki

Linting Research

Linting is commonly used to enforce a consistent 'code style', what do we mean by that?

Linting is the process of running a program that analyzes your code for programmatic and stylistic errors. A linting tool, or a linter, marks or flags any potential errors in your code such as syntax errors or incorrectly spelled variable names. This can save time and help you write better code.

What are common tools for 'linting'?

Javascript

eslint - Fully pluggable tool for identifying and reporting on patterns in JavaScript.
jshint - Community-driven tool that detects errors and potential problems in JavaScript code.
standart - Javascript style linter that allows no configuration.

sass

scss-lint - Tool to help keep your SCSS files clean and readable by running it against a collection of configurable linter rules.
stylelint - CSS linter that is unopinionated, supports plugins and has a wide range of rules built-in. Written in Javascript, it parses by default CSS-like syntaxes such as SCSS, Sass, Less and SugarSS.

How can you integrate these tools in your own project?

Javascript

eslint
You can install ESLint using npm: $ npm install eslint --save-dev You should then set up a configuration file:

$ ./node_modules/.bin/eslint --init After that, you can run ESLint on any file or directory like this:

$ ./node_modules/.bin/eslint yourfile.js

After running eslint --init, you'll have a .eslintrc file in your directory. In it, you'll see some rules configured like this:

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

jshint
You may install it globally using the following command:

npm install -g jshint

After this, you can use the jshint command-line interface.

It is common to install JSHint as a development dependency within an existing Node.js project:

npm install --save-dev jshint

standart

sass

What are the difference between syntax and stylistic errors?

With Stylistic Errors the code could still work. When there is an Syntax error it won't work most of the time.

Investigate EditorConfig. What could be the advantage of using it alongside a linter in your project?

What is EditorConfig?
EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

Example file:

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

Linting Setup

editorconfig

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true


[*]

# Change these settings to your own preference
indent_style = tab
indent_size = 4

# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

[*.ejs]
trim_trailing_whitespace = false

eslint

Installation & Usage

You can install ESLint using npm or yarn:

npm install eslint --save-dev

# or

yarn add eslint --dev

You should then set up a configuration file:

$ npx eslint --init After that, you can run ESLint on any file or directory like this:

$ npx eslint yourfile.js It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

My eslint config in package.json

"eslintIgnore": [
    "*.ejs",
    "node_modules/"
  ],
  "eslintConfig": {
    "env": {
      "browser": true,
      "commonjs": true,
      "es6": true,
      "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
      "ecmaVersion": 2018
    },
    "rules": {
      "indent": [
        "error",
        "tab"
      ],
      "linebreak-style": [
        "error",
        "unix"
      ],
      "quotes": [
        "error",
        "single"
      ],
      "semi": [
        "error",
        "always"
      ],
      "no-var": "error"
    }
  }

stylelint

Installation & Usage

Use npm to install stylelint and its standard configuration: npm install --save-dev stylelint stylelint-config-standard Create a .stylelintrc.json configuration file in the root of your project:

{
  "extends": "stylelint-config-standard"
}

Run stylelint on, for example, all the CSS files in your project: npx stylelint "**/*.css" This will lint your CSS for possible errors and stylistic issues.

My Stylelint Config in package.json:

 "stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "indentation": "tab",
      "number-leading-zero": "never",
      "no-descending-specificity": null
    }
  }