Linting Code

📄 About

Linting is the process of running a program that will analyse code for potential errors. In the case of JavaScript, it’s incredibly useful for spotting little things that you might otherwise miss, such as using a variable before it’s been defined, using an out-of-scope variable, and passing the wrong number of arguments to a function.

🛠️ Linters and Code Quality Tools

→ Lint-staged

Lint-staged (opens in a new tab) is a tool that allows you to run linters on Git staged files. This means that only the files you’ve changed will be linted. Used together with Husky (opens in a new tab), it can prevent bad code from being committed and pushed.

how it works

running

# just do git commit and it will run the linter
$ git commit -am "fix: something"
 
# or you can run it manually
$ pnpm lint:staged

config structure

.
├── apps
│   ├── docs
│   │   ├── .eslintrc.js
│   │   └── lint-staged.config.js   # overwrite global lint-staged.config.js, custom eslint
│   └── web
│       ├── .eslintrc.js
│       └── lint-staged.config.js   # overwrite global lint-staged.config.js, custom eslint
│
├── packages
│   └── ui
│       ├── .eslintrc.js
│       └── lint-staged.config.js   # overwrite global lint-staged.config.js, custom eslint
│
├── lint-staged.common.js  # few common utils
└── lint-staged.config.js  # base config to overwrite per apps/packages

→ Commitlint

Commitlint (opens in a new tab) is a tool that checks if your commit messages meet the conventional commit (opens in a new tab) format. It’s used in conjunction with Husky (opens in a new tab) to ensure that your commit messages are in the correct format before you push them.

We also use conventional commit to generate changelog automatically. Check Contributing section for more details.

how it works

We are using our own, shared config, installed as npm dependency - @wayofdev/commitlint-config (opens in a new tab)

config structure

.
└── commitlint.config.js  # config extends @wayofdev/commitlint-config

→ Stylelint

Stylelint (opens in a new tab) is linter that helps you avoid errors and enforce conventions in your styles. It’s especially useful when you’re using a preprocessor, like Sass or Less, and want to ensure that your compiled CSS follows a certain standard. Configuration is shared from our @wayofdev/stylelint-config (opens in a new tab) package.

config structure

.
└── .stylelintrc.js  # config extends @wayofdev/stylelint-config

→ Secretlint

Secretlint (opens in a new tab) is a linter that helps you avoid committing secrets and credentials into git repositories. Configuration is shared from our @wayofdev/secretlint-config (opens in a new tab) package.

running

config structure

.
├── apps
│   ├── docs
│   │   └── .secretlintignore
│   └── web
│       └── .secretlintignore
│
└── .secretlintrc.js  # config extends @wayofdev/secretlint-config

→ Eslint

Eslint (opens in a new tab) is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions.

running

# through docker, with --fix option enabled
$ make lint
 
# or directly
$ pnpm lint:turbo
 
# with --fix option enabled
$ pnpm lint:turbo -- --fix

config structure

.
├── apps
│   ├── docs
│   │   └── .eslintrc.js  # extends base, enables mdx support
│   └── web
│       └── .eslintrc.js
│
└── packages
    ├── common-i18n
    │   └── .eslintrc.js
    ├── eslint-config-custom  # eslint config bases, shared across all workspaces
    │   └── .eslintrc.js
    └── ui
        └── .eslintrc.js

→ Prettier

Prettier (opens in a new tab) is used to format code. It’s an opinionated code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Enabled by default in packages/eslint-config-custom and is shared across all workspaces.

→ Sort-package-json

Sort-package-json (opens in a new tab) is used to sort package.json file. It’s a package.json formatter that enforces a consistent style by parsing your package.json and re-printing it with its own rules based on the well-known package.json keys order.

running

# through docker
$ make sort
 
# or directly
$ pnpm lint:package-json

→ Htmlhint

Htmlhint (opens in a new tab) is used to lint html files. It’s a static code analysis tool for identifying problematic patterns found in HTML code.

running

# through docker
$ make lint-html
 
# or directly
$ pnpm lint:html

config structure

lint:html command uses config, located in ./node_modules/@wayofdev/htmlhint-config/index.json and is shared across all workspaces.

Npm package with config is hosted on npmjs.com (opens in a new tab) as @wayofdev/htmlhint-config.

→ Es-check

Es-check (opens in a new tab) checks the version of ES in JavaScript files with simple shell commands.

running

# through docker
$ make lint-dist
 
# or directly
$ pnpm lint:dist

config structure

.
└── apps
    ├── docs
    │   └── .escheckrc
    └── web
        └── .escheckrc

→ Markdownlint

Markdownlint (opens in a new tab) is used to lint markdown files. It’s a Node.js style checker and lint tool for Markdown/CommonMark files. We are using our own, shared config, installed as npm dependency - @wayofdev/markdownlint-config (opens in a new tab) and root config extends it.

running

# through docker
$ make lint-md
 
# or directly
$ pnpm lint:md

config structure

.
└── .markdownlint.json  # config extends @wayofdev/markdownlint-config

→ Bundle-analyzer

Bundle-analyzer (opens in a new tab) is used to analyze bundle size. It’s a tool that represents the size of your webpack bundle as a convenient interactive zoomable treemap.

running

# through docker
$ make analyze
 
# or directly
$ pnpm analyze

Getting Started Versioning