@livechat/eslint-config-livechat

    1.1.2 • Public • Published

    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

    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

    ⚠️ 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:

    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

    ⚠️ 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.

    Keywords

    none

    Install

    npm i @livechat/eslint-config-livechat

    DownloadsWeekly Downloads

    174

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    198 kB

    Total Files

    16

    Last publish

    Collaborators

    • marmatlc
    • mszpyruklc
    • joanna.sikora
    • kamilatokarska
    • mborowskalivechat
    • kajahd
    • grzgajda
    • bstopyra
    • m.teczynski
    • misterkuka
    • jakubpyzio
    • rkawka
    • bolchowka
    • lukiq
    • f.jaskolski
    • msypko
    • bamboo-livechat
    • olek_livechat
    • s.graczyk.livechat
    • michalpaszczakowski
    • andarist
    • konradk
    • k.zajac
    • dobrochna.przybylek
    • lkrolak
    • hstaniszewski
    • chatbot-com
    • jakubsikora
    • norbertprocak
    • walaszczykm
    • klarzynskik
    • ale-kacperczyk
    • sambor
    • macpankiewicz
    • mreszke
    • k-kozak
    • voyy
    • bbartek
    • mdebski
    • shwarcu
    • jfedyczak
    • paulinag
    • tomaszratajczyk
    • janowsiany
    • dzabrzenski
    • bartoszgamza
    • wouga
    • ttrzcinski
    • mzielonka
    • alithanar
    • msawickilc
    • jawinski
    • gh-actions-livechat
    • ewaryst
    • oliwiapolec
    • arturfracala
    • panr
    • vbezpalko