@livechat/eslint-config-livechat

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 — in the root of your project — install the package's peer dependencies:

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

or if it doesn't work:

npm i -D 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

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

ESLint

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

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

Stylelint

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

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

Editor Config

Last but not least, create a .editorconfig file in 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

Code Editor Settings

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

VSCode

For VSCode you should set something like this in your JSON settings 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 save for the Stylelint... You will still see issue indicators but you need to fix them all manually.

Other

:warning: If you're 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're 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": {
  "elint": "eslint .",
  "elint:fix": "eslint . --fix",
  "stylelint": "stylelint **/*.less",
  "stylelint:fix": "stylelint **/*.less --fix"
}

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 to this for you.

GitHub action

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

Husky hook

WIP