@amedia/eslint-config-base

@amedia/eslint-config-base

Common ESLint/Prettier configuration for javascript Extends AirBnb's Base configuration: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base

Install

To test this package:

Install the package with (change the version to the version in package.json)

NPM

With npm 5+

This is a cool tool that installs all dependencies you need in devDependencies to get going.

npx install-peerdeps --dev @amedia/eslint-config-base

OR

If you want a prefer manual approach then install the correct versions of each peerDependency package, which are listed by the command:

npm info "@amedia/eslint-config-base" peerDependencies
npm install --save-dev @amedia/eslint-config-base

yarn

yarn add  @amedia/eslint-config-base -D

Install the correct versions of each peerDependency package, which are listed by the command:

npm info "@amedia/eslint-config-base" peerDependencies

Usage

There are a few ways to include the eslint config in your project.

Make sure you dont have any other settings for eslint or prettier already in your editor workspace or global. Restart your editor if you dont see it working immediately (known issue for VS Code)

Select one of the options below:

Using your package.json:

{
  "eslintConfig": {
    "extends": "@amedia/eslint-config-base"
  }
}

Using your .eslintrc:

{
  "extends": "@amedia/eslint-config-base"
}

or .eslintrc.js:

module.exports = {
  extends: '@amedia/eslint-config-base',
};

eslint and prettier may need a punch in the gut for these changes to take effect. Restart your editor.

Prettier Config

This is how you use or extend the @amedia/eslint-config-base prettier config in your app. Add a line to the package.json file.

{
  "prettier": "@amedia/eslint-config-base/prettier.config"
}

Create a file named prettier.config.js Again, remove other prettier config files locally in your project or editor.

module.exports = require('@amedia/eslint-config-base/prettier.config');

Using VSCODE?

Install extenstion for VS Code ESLint extension (Dirk Baumer) (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and Prettier - Code formatter (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

create a folder .vscode, and a file settings.json with the following:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",

    "editor.formatOnSave": true,
    "[yaml]": {
        "editor.formatOnSave": false
    },
    "[javascript]": {
        "editor.detectIndentation": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Lint script

You might want to add these two scripts in you package.json.

"scripts": {
  "lint": "eslint bin lib",
  "lint-fix": "eslint --fix bin lib"
},

Need to customize?

Here is an example of how you could customize for your project :

An example of .eslintrc.js

const eslintAmedia = require('@amedia/eslint-config-base');

delete eslintAmedia.parser;
eslintAmedia.rules['import/extensions'] = 1;
eslintAmedia.parserOptions.ecmaVersion = 2020;

module.exports = eslintAmedia;