Table of Contents

• Table of Contents
• Installation
• Usage
  • Other configs
    • React example
• VS Code

Installation

This module should be installed as one of your project's devDependencies:

npx install-peerdeps --dev eslint-config

Usage

Then add the extends to your .eslintrc.js:

module.exports = {
  extends: "hallar",
  rules: {
    // your overrides
  },
};

Other configs

You can use other configs in combination with the main eslint.

module.exports = {
  extends: ['hallar', 'hallar/<config-name>'],
}

React example

module.exports = {
  extends: [
    'hallar',
    'hallar/react',
    'hallar/jsx-a11y',
  ],
  rules: {
    // your overrides
  },
};

VS Code

Using the eslint-plugin you can use these settings for autoformatting:

"editor.formatOnSave": true,
"eslint.format.enable": true,
  "[javascript]": {
"editor.formatOnSave": false,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"editor.codeActionsOnSave": {
  "source.fixAll": true,
}

With JetBrains Products (IntelliJ IDEA, WebStorm, RubyMine, PyCharm, PhpStorm, etc)

If you have previously configured ESLint to run via a File Watcher, turn that off.

If you choose Local / Per Project Install Above

1. Open ESLint configuration by going to File > Settings (Edit > Preferences on Mac) > Languages & Frameworks > Code Quality Tools > ESLint (optionally just search settings for "eslint")
2. Select Automatic ESLint Configuration
3. Check Run eslint --fix on save

If you choose Global Install

The following steps are for a typical Node / ESLint global installtion. If you have a customized setup, refer to JetBrains docs for more ESLint Configuration Options.

1. Open ESLint configuration by going to File > Settings (Edit > Preferences on Mac) > Languages & Frameworks > Code Quality Tools > ESLint (optionally just search settings for "eslint")
2. Select Manual ESLint configuration
3. Choose your Node interpreter from the detected installations
4. Select the global ESLint package from the dropdown
5. Leave Configuration File as Automatic Search
6. Check Run eslint --fix on save

Ensure the Prettier plugin is disabled if installed.

1. Open Prettier configuration by going to File > Settings (Edit > Preferences on Mac) > Languages & Frameworks > Code Quality Tools > Prettier (optionally just search settings for "prettier")
2. Uncheck both On code reformat and On save
3. 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.
   1. Make sure the Run for files glob does not include js,ts,jsx,tsx.
   2. An example glob for styles, config, and markdown. {**/*,*}.{yml,css,sass,md}