eslint-config-blvd

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 eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

or, for npm:

npm install --save-dev eslint eslint-config-blvd eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

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