Package Exports

eslint-config-blvd

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-config-blvd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

eslint-config-blvd

✨ An ESLint config that conforms to the blvd JavaScript/TypeScript styleguide.

Installation

Install eslint and eslint-config-blvd using yarn:

yarn add --dev eslint eslint-config-blvd

or, for npm:

npm install --save-dev eslint eslint-config-blvd

Usage

In your .eslintrc file, extend eslint-config-blvd.

{
  "extends": "eslint-config-blvd"
}

React rules

For React projects, extend eslint-config-blvd/react.

{
  "extends": ["eslint-config-blvd/react"]
}

Using TypeScript

To use eslint-config-blvd with TypeScript, you need to do a little additional setup to make eslint-plugin-import play well with TypeScript. First, install eslint-import-resolver-typescript.

# yarn
yarn add --dev eslint-import-resolver-typescript

Then, on your .eslintrc:

module.exports = {
  // other configuration are omitted for brevity
  settings: {
    'import/resolver': {
      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
    }
  }
}

Prettier

Prettier is an automated code formatter for JavaScript, TypeScript, and other languages.

This eslint config works alongside Prettier, too. To use it, install Prettier as well as eslint-config-prettier to your project.

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

Create a .prettierrc file. Then add the following configs. This should make Prettier automatically format your code based on the blvd guidelines.

{
  "semi": false,
  "tabWidth": 2,
  "printWidth": 140,
  "singleQuote": true,
  "trailingComma": "none"
}

Then include eslint-config-prettier in your project. IMPORTANT: You must add prettier extends after extending the blvd config!

{
  "extends": ["blvd", "prettier", "prettier/@typescript-eslint", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Also include eslint-config-prettier/react for React projects.

{
  "extends": ["blvd/react", "prettier", "prettier/@typescript-eslint", "prettier/react", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}