Linters

ESLint & Stylelint

First, install ESLint and Stylelint globally (just in case of any CLI stuff we potentially are going to need in the future):

npm i -g eslint stylelint

next — at the root of your project — install the package's peer dependencies:

npx install-peerdeps -d @livechat/eslint-config-livechat

or if it doesn't work:

npm i -D @livechat/eslint-config-livechat babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-prettier-vue eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-vue prettier eslint-plugin-vue vue-eslint-parser stylelint stylelint-config-standard postcss postcss-less lint-staged @typescript-eslint/eslint-plugin @typescript-eslint/parser

If you spotted any missing dependency, please contribute to this file.

Prettier

Update package.json file in your project with the following property:

"prettier": "@livechat/eslint-config-livechat/.prettierrc"

Setting up

:warning: All files from below are available in snippets/webdev directory. Files are hidden so make sure you are browsing them in your code editor or your operating system has turned on an option for displaying hidden files.

ESLint

Create an .eslintrc file at the root of your project with the following content:

{
  "extends": ["@livechat/eslint-config-livechat"]
}

also we need to omit some directories from being checked by ESLint. To do this, we need to create an .eslintignore with the following content:

.netlify
node_modules
dist
functions-dist
resources

Stylelint

Create a .stylelintrc file at the root of the project with the following content:

{
  "extends": "@livechat/eslint-config-livechat/.stylelintrc"
}

as well as for ESLint, we need to add a .stylelintignore file, but this one also excludes html files:

.netlify
node_modules
dist
functions-dist
resources
**/*.html

Editor Config

Last but not least, create an .editorconfig file at the root of the project:

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[*.svg]
insert_final_newline = false

[**/{partials,shortcodes}/*.html]
insert_final_newline = false

Lint.sh

This file contains a shell script that hijacks stdout of the ESLint and Stylelint commands and returns it in the more readable way.

Code Editor Settings

It would be nice if you set your IDE (eg. VSCode) with the options that format and fix all issues automatically on file saving.

VSCode

For VSCode you should set something like this in your JSON preferences file:

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": false,
},
"css.validate": false,
"less.validate": false,
"scss.validate": false

HTML formatters may be messy, so we can skip this option for .html files.

You also need to install additional extensions:

• ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier — Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Stylelint — https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

Sublime Text

First, install the following extensions from the Sublime Text package manager:

• Tools > Command Palette > Install Package > ESLint-Formatter
• Tools > Command Palette > Install Package > SublimeLinter
• Tools > Command Palette > Install Package > SublimeLinter-eslint
• Tools > Command Palette > Install Package > jsPrettier

Next, go to the ESLint-Formatter (Preferences > Package Settings > ESLint-Formatter > Settings) package's config file and update it with:

"format_on_save": true,
"format_on_save_extensions": [
  "js",
  "jsx",
  "es",
  "es6",
  "babel",
  "vue"
]

Unfortunately, Sublime Text still doesn't support auto-fix option on file saving for the Stylelint... You will still see issue indicators but you need to fix them all manually.

Other

:warning: If you are using a different code editor, find how you can:

• set formatOnSave options (or something similar)
  • remember that you probably want to omit this feature for .html files.
• disable built-in validation

and install needed extensions.

When you are ready with your configuration please add it to this file for the rest of us. Thank you!

Manual fixes / Command line scripts

When you can't enable an auto-fix option or something went wrong with your plugins, here are useful commands that you can implement in your project (make sure you have eslint and stylelint installed globally or replace them with the locally installed packages from node_modules/.bin/*):

"scripts": {
  "eslint": "eslint .",
  "eslint:fix": "eslint . --fix",
  "stylelint": "stylelint **/*.{less,css}",
  "stylelint:fix": "stylelint **/*.{less,css} --fix",
  "lint": "./lint.sh"
}

Automatic workflows

In case when you don't want to use auto-formatting on file saving you can always define a GitHub action or Husky hook for this.

GitHub action

Here's an example of a simple GitHub action that will run on push event.

Husky hook

Here's an example of adding a pre-commit hook using husky and lint-staged packages:

npm install husky --save-dev
npm install lint-staged --save-dev
npx husky install
npx husky add .husky/pre-commit "node_modules/.bin/lint-staged --allow-empty"

after that please update your package.json with:

"lint-staged": {
  "**/*.{js,ts,vue}": [
    "eslint --fix"
  ],
  "**/*.{less,css}": [
    "stylelint --fix"
  ]
}

Troubleshooting

Variable @max not found

[webp] ERROR in ./assets/main.less
[webp] Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
[webp] ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
[webp]
[webp]
[webp]     > p:first-child {
[webp]       .u-text-p5;
[webp]     ^
[webp] Variable @max not found

I found a an bug with Stylelint that removes : after the @max variable in the packages/bold-frontend/core/settings/typography.less file. If you run into the issue, just bring back the : and you will be just fine (again).

Can't commit even if npm run lint says it's all good!

To be frank, I don't know why this is happening... When the issue occurs, please run the standalone scripts for ESLint and Stylelint to double check whether everything is OK with the files.

npm run eslint:fix
npm run stylelint:fix

Bad syntax

For example: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-less", and use the "customSyntax" option

Since version 14 of Stylelint, we need to rely on postcss and postcss-less to handle custom syntax (customSyntax property in .stylelintrc) for .less files. This is inconvenient, but we need to do this if we want to keep a support of the pluggin in VSCode.