Skip to content

Instantly share code, notes, and snippets.

@brunopk

brunopk/typescript_00.md

Last active March 11, 2025 22:00
Show Gist options
  • Save brunopk/e79d31eea01b528495cb4711d94dbc3c to your computer and use it in GitHub Desktop.
Save brunopk/e79d31eea01b528495cb4711d94dbc3c to your computer and use it in GitHub Desktop.
Download ZIP
Setting ESLint and Prettier for TypeScript projects
Raw
typescript_01.md

Setting ESlint and Prettier


For newer versions of ESlint such as version 9, follow instructions in Getting Started with ESLint which indicates to create a configuration file with npm init @eslint/config@latest -- --config eslint-config-standard.


  1. Install dev dependencies:

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

    or

    $ npm install eslint --save-dev
$ npm install prettier --save-dev
$ npm install eslint-plugin-prettier --save-dev
$ npm install eslint-plugin-import@latest --save-dev    
$ npm install eslint-config-prettier --save-dev 
$ npm install eslint-config-airbnb-base --save-dev  
$ npm install @typescript-eslint/eslint-plugin@latest --save-dev
$ npm install @typescript-eslint/parser --save-dev

    In case of errors, open Visual Code Prettier Eslint output and check missed dependencies.*

  2. Create .eslintrc.json with this content:

{ 
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {}
}
  1. Create .prettierrc.json with this content:
{
  "semi": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none"
}

Using prettier

Check errors :

npx prettier file_path --check

Fixing errors :

npx prettier file_path --check --write

Notes

  • For some Prettier versions, .prettierrc file must be JSON formatted.
  • .eslintrc.json file can also be created with the eslint --init command.
  • It's not neccesary to extend "airbnb-base" rules.
  • The order of elements in "extends" array is important and "prettier" must be the last element (more information in this post)

Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment