Dan Darg's Blog

Tag: typescript

  • Eslint, Typescript & VSCode

    Intro

    I found myself doing a project with deep, complex nesting of callback functions and wanted to flag the reuse of argument names, such as:

    const x: any = [];
x.forEach((el: any) => {
  el.forEach((el: any) => {});
});

    Since this is legit typescript syntax, you need to use a linter, such as ESLint, to indicate the problem in VSCode with the “no-shadow” rule.

    I found it frustrating trying to get ESLint to work, but finally found a decent article summarizing the essential steps. This post is just a quicker summary of how to get VSCode to flag ESLint-ruled problems.

    Summary

    • Install the main ESLint extension on VSCode
    • Create a local vscode settings file with the following entry:
      • "eslint.validate": ["typescript", "typescriptreact"]
    • Install locally: npm i -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
    • Create file .eslintrc.json in the root of your VSCode folder:
    {
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-shadow": [
      "error",
      {
        "builtinGlobals": false,
        "hoist": "functions",
        "allow": [],
        "ignoreOnInitialization": false
      }
    ]
  }
}

    Voila!

  • Typescript Linting & Formatting

    Intro

    Most stuff comes with eslint nowadays (e.g. ionic, nextjs), but not with prettier, husky and lint-staged. There are so many packages and plugins in this eco-system, and all I really want is to have formatting on git commits.

    ESLint, Prettier, Husky, Lint-Staged, etc.

    tl;dr

    see here: https://niteshseram.in/blog/setting-up-eslint-prettier-and-husky-with-lint-staged-for-your-nextjs-project

    npm i -D husky \
         prettier \
         lint-staged \
         eslint-config-prettier

    Add the following to package.json:

    {
  ...,
  "scripts":{
    ...,
    "format": "prettier --write .",
    "prepare": "husky install",
    "precommit": "lint-staged"
  },
  "prettier": {
    "printWidth": 100,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "tabWidth": 2,
    "useTabs": false
  },
  "lint-staged": {
    "*.{html,js,jsx,ts,tsx}": [
      "prettier --write"
    ]
  }	
}

    Finally, set up husky and its precommit hook with:

    npm run prepare
npx husky add .husky/pre-commit "npm run precommit"

    Gotchas

    If you have a dir with a package.json file with its own lint-staged configuration, then lint-staged will parse and try to apply those configs.

    Linting?

    Suppose you want to also enforce stylistic rules (e.g. no for loops allowed) in your code. Suppose that whenever you write a for loop, your code starts emitting errors and refusing to compile. How do you implement this? I.e., how do you intergrate eslint with your IDE and typescript server?

    Answer: don’t bother; life is too short; just rely on prettier.

    If you have eslint installed and configured in your project and want to see linting suggestions within vscode, then that is easy enough: just enable the microsoft ESLint extension.