Skip to content

Latest commit

 

History

History
286 lines (200 loc) · 5.18 KB

linting-style.md

File metadata and controls

286 lines (200 loc) · 5.18 KB
Raw

Linting & Style Guides

Code style is important. Consistency in indentation/quote style marks makes your code more maintainable & easier to read.

Style Guides

Airbnb

Repos:

Google

Standardjs

Linting

Linters are tools that:

  • Scan your code with a set of rules
  • Report any errors that are found
  • Some can auto-fix the errors for you
  • Prevents certain bugs
  • Saves you time
  • Static code analysis & part of white-box testing
    • Analyze internal structure of components or a system

Problems prevented by linting:

  • Works in development, breaks in production
  • Scope conflicts
  • Readability

Benefits

  • Readability
    • Teamwork appears as if written by one person
  • Pre-code review
    • Syntax errors, incorrect naming, tab vs spaces
  • Finding syntax errors before execution

The three most popular linting tools are:

  • JSLint, EASY, highly opinionated, based on JavaScript: The Good Parts by Douglas Crockford
  • JSHint, MEDIUM, sensible defaults, more configurable than JSLint
  • ESLint, DIFFICULT, extremely configurable, supports JSX, can autoformat scripts

All three provide an online GUI you can use.

ESLint

ESLint is a CLI tool, which is wrapped around two other open source projects:

  • Espree: JavaScript Parsing
  • AST: Evaluate code patterns

ESLint is completely pluggable. Every rule is a plugin and you can add more at runtime.

Installing ESLint

ESLint assumes you have npm installed already: npm init.

Install ESLint

# project level
npm init @eslint/config

# globally
npm install --global eslint

Run ESLint on any file/directory

npx eslint file.js
yarn run eslint yourfile.js

Configuring ESLint

Config file:

  • .eslintrc.json
  • .eslintrc.js
  • .eslintrc.yml

.eslintrc.json

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

Each rule has two values

  • Error level
    • "off"
    • "warn"
    • "error"

In addition to "rules", config also includes:

{
  "extends": "eslint:recommended"
}

Because of this line, all rules marked "(recommended)" will be turned on.

Alternative configs created by others can be found searching for "eslint-config" on npmjs.com.

ESLint & VS Code

Guide

Requirements: VSCode, ESLint plugin, Node

npm init
# local
npm install -D eslint
# or global
sudo npm install --global eslint
eslint --init

Formatting on save

Preferences: Open Workspace Settings (JSON)

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]
}

Prettier

Prettier is similar to a linter, but serves a slightly different function. It automatically formats your code to a set of rules.

  • Doesn't look for errors
  • Specifically targets layout of code
  • Makes intelligent decisions about:
    • Spacing
    • Indentation levels
    • Line-breaks

Installing Prettier

npm install -D --save-exact prettier
echo {}> .prettierrc.json

Ignoring Files

touch .prettierignore

Defaults:

# .prettierignore
**/.git
**/.svn
**/.hg
**/node_modules

Ignoring parts of your code

JavaScript

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

// add this comment to prevent the next node from highlighting:
// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

JSX

<div>
  {/* prettier-ignore */}
  <span     ugly  format=''   />
</div>

HTML

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

<!-- prettier-ignore-attribute -->
<div
  (mousedown)="       onStart    (    )         "
  (mouseup)="         onEnd      (    )         "
></div>

<!-- prettier-ignore-attribute (mouseup) -->
<div
  (mousedown)="onStart()"
  (mouseup)="         onEnd      (    )         "
></div>

CSS

/* prettier-ignore */
.my    ugly rule
{

}

Markdown

<!-- prettier-ignore -->
Do   not    format   this

Ignoring Ranges

<!-- prettier-ignore-start -->
<!-- SOMETHING AUTO-GENERATED BY TOOLS - START -->

| MY | AWESOME | AUTO-GENERATED | TABLE |
|-|-|-|-|
| a | b | c | d |

<!-- SOMETHING AUTO-GENERATED BY TOOLS - END -->
<!-- prettier-ignore-end -->

YAML

# prettier-ignore
key  : value
hello: world

Prettier & ESLint

Using Prettier & ESLint together causes conflicts and require customization to work together.

Pre-made configs

  • eslint-config-prettier
  • stylelint-config-prettier

eslint-config-prettier turns off all ESLint rules that are unnecessary or might conflict w/ Prettier.

An alternative is to use the eslint-plugin-prettier, which runs Prettier as ESLint rules. NOT recommended.