eslint-config-leafly
v1.0.0
Published
Eslint configuration for vanilla Javascript projects at Leafly
Downloads
122
Readme
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