@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 — at 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 @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

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

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",
  "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 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"
  ]
}