Setting up ESLint & Prettier for Pulumi

Pulumi+Prettier+ESLint-setup.md

Setting up ESLint & Prettier for Pulumi

This is my process for addint ESLint and Prettier support for a new Pulumi TypeScript project.

Install packages

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-prettier prettier

Create .editorconfig

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

Create .prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "semi": true,
  "tabWidth": 2,
  "useTabs": false
}

Create .eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint", "prettier"],
  "env": {
    "jest": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "prettier/prettier": ["error", { "singleQuote": true }],
    "no-console": 0,
    "@typescript-eslint/explicit-member-accessibility": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/consistent-type-definitions": ["error", "type"]
  },
  "parser": "@typescript-eslint/parser"
}

Add lint script

In package.json:

{
  /* snip */
  "scripts": {
    /* snip */
    "lint": "eslint src/**/*.ts"
  }
  /* snip */
}

Optional: Auto-formatting in VSCode

In .vscode/settings.json set:

{
  /* snip */
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "typescript",
      "autoFix": true
    }
  ]
}