@amedia/eslint-config-typescript

@amedia/eslint-config-typescript

Common ESLint/Prettier configuration for TypeScript that extends Airbnb's typescript configuration.

Install

You need to install this package and it's peer dependencies. You install the package by running:

npm i --save-dev @amedia/eslint-config-typescript @amedia/eslint-config-base

Then, to install the peer dependencies you can use install-peerdeps like this:

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

Or you can do it manually by running:

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

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. Select one of the options below:

Using package.json:

{
  "eslintConfig": {
    "extends": ["@amedia/eslint-config-typescript", "plugin:import/recommended"]
  }
}

Using .eslintrc:

{
  "extends": ["@amedia/eslint-config-typescript", "plugin:import/recommended"]
}

or .eslintrc.js:

module.exports = {
  extends: ['@amedia/eslint-config-typescript', 'plugin:import/recommended'],
};

You also need to set up prettier and typescript configs.

Prettier

This is how you use or extend the @amedia/eslint-config-base prettier config in your app. Select one of options below:

Using package.json:

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

Using .prettierrc:

"@amedia/eslint-config-base/prettier.config"

or prettier.config.js:

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

TSConfig

Create a file tsconfig.json and add the following and add:

{
  "extends": "@amedia/eslint-config-typescript/tsconfig.json",
  "compilerOptions": {
    "outDir": "build",
    "rootDir": "src",
    "typeRoots": ["./node_modules/@types"],
    "types": ["node"]
  },
  "exclude": ["node_modules"],
  "include": ["src"]
}

If you use jest, add ["node", "jest", "@types/jest"] to compilerOptions.types.

Are you using VS Code?

Install these extensions for VS Code:

• ESLint
• Prettier - Code formatter
• TSLint

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
  }
}

Linting scripts

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

"scripts": {
  "lint": "eslint src",
  "lint-fix": "eslint --fix src"
},