Lab 7: The lab I have been asking for !

Yes I have been asking for this lab and the reason for it is everytime I come across any Youtube tutorial or a blog post on what is the best set up for Webdev or best extensions to install on VSCode. They always recommended their viewers to install ESLint and Prettier. I got it installed but never have a chance to work on it and esspcially I always got lost reading the docs since I always come in with a mental of having to rush and keep glance through the docs instead of really read and evaluate it. So having a lab to practice a good habit is what I was craving for.

Setting up Prettier

Prettier is responsible formatting your code. Install instruction have been well documented. When setting up for both Prettier and ESLint, the doc that you will spend most of the time with will be the options doc for Prettier and
rules for Eslint. After reading thorugh the docs I pick out these option for my project:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "insertPragma": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "printWidth": 100
}

Prettier did not break my code and also help me properly indent my code uniformly

Setting up ESLint

For Eslint, I got these rules setting up:

{
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
    "func-names": "off",
    "no-console": "off",
    "prefer-arrow-callback": "warn",
    "no-unused-vars": "warn",
    "no-nested-ternary": "off",
    "no-empty": "off",
    "no-unused-expressions": ["error", { "allowTernary": true }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "ts": "never"
      }
    ]
  }
}

The first time when I run ESLint for my project it came up with 48 problems. Fortunately,

ESLint comes with several built-in formatters to control the appearance of the linting results

So I use the --fix option to let ESLint atomatically fix the most of it. For the import/unresolved packge I was lucky to file the original issue filed on eslint-plugin-import to fix it. There was one bug in my code where I have no-unused-expressions

path.extname(input) === '.md'
    ? fs.writeFileSync(`${outputDir}/${path.basename(input, '.md')}.html`, markup, { flag: 'w' })
    : fs.writeFileSync(`${outputDir}/${path.basename(input, '.txt')}.html`, markup, { flag: 'w' });

and this time the doc show it power where I come in my .eslintrc.json and adding no-unused-expressions": ["error", { "allowTernary": true }] so as to be able to solve the problem.

Trying to set up pre commit hook

I try to set up the pre commit hook as well as I was so fancy about what Telescope did to their project where they run linter and formatter whenever their contributors want to commit their changes:

1.Setting up Husky and Pretty-quick

npm install -D husky pretty-quick

1. Then add a script to run pretty-quick for staged files

{
    scripts: {
         ...
        "prepare": "husky install"
         ...
    },
   "husky": {
        "hooks": {
          "pre-commit": "pretty-quick --staged"
   }
}