ES Lint and Prettifier Setup

linter-readme.md

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