Eslint-config-leafly NPM

eslint-config-leafly

ESLint configuration for vanilla Javascript projects at Leafly.

Published to npm at https://www.npmjs.com/package/eslint-config-leafly

This will run eslint on your Javascript files with the general rules that have been agreed upon at Leafly and then it can format the project's Javascript code using prettier.

If your project uses react use eslint-config-leafly-react instead. That package extends this one with additional rules for react projects.

Installing

To use this package in your repo run the following:

yarn add --dev eslint eslint-config-leafly prettier

ESLint configuration

Create an .eslintrc.js file in your project with the following:

For VanillaJS projects

module.exports = {
  extends: "eslint-config-leafly",
  rules: {
    // Your project-specific rules
  }
};

Note: This configuration extends eslint:recommended and plugin:prettier/recommended

For React projects

module.exports = {
  extends: "eslint-config-leafly/react.js",
  rules: {
    // Your project-specific rules
  }
};

Note: This configuration eslint-config-leafly, eslint-config-react-app, and plugin:jsx-a11y/recommended

Prettier configuration

We are using all the defaults for prettier and do not need a configuration file for this tool.

Stylelint configuration

We are using stylelint for linting CSS. You'll need a stylelint.config.js file containing the following:

module.exports = {
  extends: "eslint-config-leafly/stylelint.config.js"
};

Add scripts to your `package.json`

{
  "scripts": {
    "fix:all": "run-s fix:js fix:css 'prettier --write'",
    "fix:css": "yarn lint:css --fix",
    "fix:js": "yarn lint:js --fix",
    "lint:all": "run-s lint:js lint:css 'prettier -- --list-different'",
    "lint:css": "stylelint --color --cache \"src/**/*.{js,css,html,scss}\"",
    "lint:js": "eslint --cache \"**/**.js\"",
    "prettier": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\""
  }
}

Modify the paths for the directories your files are in.

Ignoring files/directories

You can use .eslintignore, .prettierignore, and .stylelintignore to ignore files and directories that you don't want running through these processes. It's recommended to add all generated code directories into these ignore files. Examples are:

.next
coverage
dist
bundles
src/**/__snapshots__/

Ignoring caches

Both ESLint and Stylelint use caches to make runtimes faster. You will want to add these cache files to the project's .gitignore.

.eslintcache
.stylelintcache

Setting up linting on commit hooks

It's highly recommended to set up the linters and formatters to run on commit hooks. This can be done by using lint-staged and husky.

yarn add --dev lint-staged husky

{
 "lint-staged": {
    "linters": {
      "*.js": [
        "yarn fix:js",
        "git add"
      ],
      "*.{js,json,css,scss,md}": [
        "yarn prettier",
        "git add"
      ],
      "*.{js,html,css,scss}": [
        "yarn fix:css",
        "git add"
      ]
    },
    "ignore": [] // add any files/directories that need to be ignored
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

Integrating with Codeship

In your codeship-steps.yml file, add a step that runs:

yarn install && yarn lint:all

This will not show success logs, but it will show failure logs.

Publishing changes to this library

If there is a rule that needs to be added/removed/changed in this library, please consult with the #frontend channel in Slack first. When it's agreed to add the rule to the configurations here it's a simply process.

Create a feature branch
Modify the configuration for the linter you are working with
Commit your changes
Submit a PR and wait for it to be approved
Make sure you are logged into npm using the Leafly credentials found in LastPass
Run yarn publish and increment the version appropriately
Commit the publishing changes
Submit a PR for the publishing changes