eslint-config-whatskit v0.2.0

💅 🦋 Shareable ESLint config for keeping JavaScript consistent across all of whatskit's projects, built upon JavaScript Standard Style.

This cat clearly forgot to lint her JavaScript before deployment:

Don't be like that cat.

Table of Contents

• Usage
  • React
  • Prettier
  • Editor Plugins
• Rules
• Development
• ⬆️ Releases
  • Production
  • Pre-Releases
• Changelog
• Contributing
• 🏛 License

Usage

For every project containing JavaScript, ESLint should be set up with this base setup.

npm install --save-dev eslint eslint-config-whatskit

Then, create a new file .eslintrc in the root of your project and fill with:

{
  "extends": "@whatskit/eslint-config"
}

React

When using within a React project use this to get set up:

npm i -D eslint eslint-config-whatskit

And in your .eslintrc:

{
  "extends": ["@whatskit/eslint-config", "@whatskit/eslint-config/react"]
}

Prettier

Additionally, you should add Prettier to your project and work with it through ESLint:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

Then add a .prettierrc file to the root of your project with this content:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

Finally, modify your .eslintrc:

{
  "extends": ["@whatskit/eslint-config", "prettier/standard", "plugin:prettier/recommended"],
  "plugins": ["prettier"]
}

Editor Plugins

For maximum fun during coding, install an ESLint plugin in your favorite editor to get suggestions and autofixes as you type.

• VS Code: ESLint
• Atom: linter-eslint
• PyCharm: Installing, enabling, and configuring ESLint in PyCharm
• Sublime Text: SublimeLinter-eslint
• IntelliJ IDEA, RubyMine, WebStorm, PhpStorm, PyCharm, AppCode, Android Studio: ESLint
• Vim, NeoVim: ALE

Rules

We keep it simple and follow almost everything defined in the JavaScript Standard Style. Only deviations are:

• indentation: 2
• no space before function parenthesis
• double quotes for jsx attributes
• prefer destructuring from objects & arrays
• enforce spacing inside curly braces

Development

Again, keeping it simple with 2 files for now:

• index.js: holds all the custom JavaScript linting rules
• react.js: holds all the custom React linting rules

For local development, clone this repo and install all dependencies:

git clone git@github.com:whatskit/eslint-config-whatskit.git
cd eslint-config-whatskit/

npm i

Linting is setup against the actual rules within this repo so for testing new rules against every js file in this repo, you can run:

npm test

⬆️ Releases

Releases are managed semi-automatically. They are always manually triggered from a developer's machine with release scripts.

Production

From a clean main branch you can run the release task bumping the version accordingly based on semantic versioning:

npm run release

The task does the following:

• bumps the project version in package.json, package-lock.json
• auto-generates and updates the CHANGELOG.md file from commit messages
• creates a Git tag
• commits and pushes everything
• creates a GitHub release with commit messages as description
• Git tag push will trigger a GitHub Action workflow to do a npm release

Pre-Releases

For pre-releases, this is required for the first one like v0.18.0-next.0:

./node_modules/.bin/release-it major|minor|patch --preRelease=next

Further releases afterwards can be done with npm run release again and selecting the appropriate next version, in this case v0.18.0-next.1 and so on.