ES Lint and Prettifier

The following readme will guide through to setup ES lint for linting TS or JS code, also prettifying code in VS code. ESLint can lint TypeScript files through typescript-eslint plugin, and prettier can format TypeScript code. Let's set it up!

Install Extension

First, if you have previous installed TSLint extension vscode-tslint for VSCode, uninstall it - let ESLint do everything Install ESLint extension from extension marketplace also called dbaeumer.vscode-eslint Install Prettier extesnion from extension marketplace

VS Code Settings

Open your project as workspace in VS, create .vscode folder on the root of your project and create file settings.json Commands:

mkdir .vscode && cd .vscode && touch settings.json

Install parser and plugin modules

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint eslint-config-prettier eslint-plugin-react
npm i -D --save-exact prettier

Paste this content in settings.json file

{
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
      "javascript",
      "typescript"
    ],
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.workingDirectories": [
      "./"
    ]
}

Create .eslintrc.json file on root of project and add following content in it

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true
      }
    },
    "plugins": ["@typescript-eslint", "prettier"],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended",
      "plugin:prettier/recommended"
    ],
    "rules": {
      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
      "no-var": "error"
    },
    "settings":  {
      "react":  {
        "version":  "detect"  // Tells eslint-plugin-react to automatically detect the version of React to use
      }
    }
}

Create .prettierrc.json file on root of project and add following content in it

{
    "trailingComma": "all",
    "tabWidth": 2,
    "semi": true,
    "printWidth": 100,
    "singleQuote": true
}

Create .eslintignore file on root of project and add following content in it

# don't ever lint node_modules
node_modules
# add names of the folder or files you don't want to run lint
# this file follows the gitignore syntax

Create .prettierignore file on root of project and add following content in it

# don't ever lint node_modules
node_modules
# add names of the folder or files you don't want to run lint
# this file follows the gitignore syntax

Rules Details

We are using the recommended rule set for the projects recommended by the ESLint Team

Checkout the rules included in recommended rule set from here
Rules description from here

nabeel-shakeel/linter-readme.md

Select an option