@clickbar/eslint-config v9.1.0

eslint-config-clickbar

Opinionated eslint set of rules with support for Vue and PHP. This also includes prettier.

Usage

Install dependencies.

npx install-peerdeps --dev @clickbar/eslint-config

Add these keys to your package.json:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},
"eslintConfig": {
  "extends": ["@clickbar"]
}

With VS Code (courtesy of Wes Bos)

You should read this entire thing. Serious!

Once you have done one, or both, of the above installs. You probably want your editor to lint and fix for you. Here are the instructions for VS Code:

1. Install the ESLint package
2. Now we need to setup some VS Code settings via Code/File → Preferences → Settings. It's easier to enter these settings while editing the settings.json file, so click the {} icon in the top right corner:

  // These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
  "editor.formatOnSave": false
},
"[javascriptreact]": {
  "editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"eslint.autoFixOnSave": true,
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": ["javascript", "javascriptreact"],

License

MIT